ReferenceError: File is not defined on Unit Test

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.17.4

Current Behavior

Giving this test:

import { newSpecPage } from '@stencil/core/testing';
import { MyComponent } from './my-component';

describe('my-component', () => {
  it('renders', async () => {
    await newSpecPage({
      components: [MyComponent],
      html: '<my-component></my-component>',
    });
  });

  it('renders with values', async () => {
    await newSpecPage({
      components: [MyComponent],
      html: `<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>`,
    });
    console.log(
      new File(['whatever'], 'myFile.png', {
        type: 'image/png',
      }),
    );
  });
});

When I run it with the default test settings (no test config in stencil.config.ts)

yarn stencil test --spec

I get the following error:

    ReferenceError: File is not defined

      34 |     spyOn(component.changeEvent, 'emit');
      35 |     const files: File[] = [
    > 36 |       new File(['whatever'], 'myFile.png', {

Expected Behavior

No errors when test run with jsdom or happy-dom.

Steps to Reproduce

• npm init stencil

• add new File(...) to the test spec.

• yarn stencil test --spec

Alternatives

I doubted the jest test environment which appears to be node, which is surprising for a web component toolchain.

When using jsdom

  testing: {
    testEnvironment: 'jsdom',
  },

I get the following error:

 FAIL  src/components/file-uploader-component/file-uploader-component.spec.tsx
  ● Test suite failed to run

    TypeError: Cannot read properties of null (reading '_location')

When using happy-dom

• npm i @happy-dom/jest-environment

  testing: {
    testEnvironment: '@happy-dom/jest-environment',
  },

I get this error but only when I have more than one test in the file, otherwise the test passes.

    TypeError: Cannot read properties of undefined (reading '$lazyInstance$')

       9 |   beforeEach(async () => {
      10 |     const rules = 'Only .csv files';
    > 11 |     page = await newSpecPage({
         |                             ^
      12 |       components: [FileUploaderComponent],
      13 |       html: `
      14 |       <cds-file-uploader

      at disconnectedCallback (../../node_modules/@stencil/core/internal/testing/index.js:692:59)

Code Reproduction URL

https://github.com/chihab/stencil-test-env-issue/blob/main/src/components/my-component/my-component.spec.ts

Additional Information

When using jest alone, I don't have those issues:

• mkdir jest-sample && cd $_ && npm init -y
• npm add jest @happy-dom/jest-environment jest-environment-jsdom

The test suite below passes with happy-dom and jsdom

describe("Some Test", () => {
  it("should 1", () => {
    const file = new File([], "name");
  });
  it("should 2", () => {
    const file = new File([], "name");
  });
});

npx jest
 FAIL  ./file.spec.js
  Some Test
    ✕ should 1
    ✕ should 2

  ● Some Test › should 1

    ReferenceError: File is not defined

npx jest --env jsdom
 PASS  ./file.spec.js
  Some Test
    ✓ should 1 (1 ms)
    ✓ should 2

npx jest --env @happy-dom/jest-environment
 PASS  ./file.spec.js
  Some Test
    ✓ should 1 (1 ms)
    ✓ should 2