Unable to run Typescript unit tests in jest and jest-playwright using @testing-library/react, Getting wrong test environment error

Describe the bug

Hi there,

I have few unit tests which I have written using react testing library. I want to run it using jest-playwright presets. Moreover, I don't want to run unit tests in jsdom. I am integrating playwright so that I can run my above unit tests in real browsers. Also, I want to use @testing-library/react and Enzyme etc.

I am getting the following error.

FAIL browser: chromium tests/src/app/App.test.ts Test suite failed to run

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/en/configuration#testenvironment-string.
Consider using the "jsdom" test environment.

ReferenceError: window is not defined

  57 |
  58 |   private constructor() {
> 59 |     window.appid = {
     |     ^
  60 |       locale: 'en_US',
  61 |       client_id: process.env.REACT_APP_API_KEY,

  at new TMS (src/services/TMS.ts:59:5)
  at Object.<anonymous> (src/services/TMS.ts:50:34)
  at Object.<anonymous> (src/edits/effects/controller/PSAction.ts:1:1)

FAIL browser: chromium tests/src/app/AppView.test.tsx Test suite failed to run

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/en/configuration#testenvironment-string.
Consider using the "jsdom" test environment.

ReferenceError: window is not defined

  57 |
  58 |   private constructor() {
> 59 |     window.appid = {
     |     ^
  60 |       locale: 'en_US',
  61 |       client_id: process.env.REACT_APP_API_KEY,

  at new TMS (src/services/TMS.ts:59:5)
  at Object.<anonymous> (src/services/TMS.ts:50:34)
  at Object.<anonymous> (src/services/Storage.ts:48:1)

AppView.test.tsx:

import React from 'react';
import {render, fireEvent, cleanup} from '@testing-library/react';
import AppView from '../../../src/app/AppView';
import App from '../../../src/app/App';
import {IAppProps} from '../../../src/app/AppView';
import {expect} from 'chai';

afterAll(cleanup);

const objApp = new App();

test('renders home react link',  async () => {
  const props: IAppProps =   {controller: objApp, loggedIn: true}
  const {getByText}  = render(<AppView{...props} />);

  const linkElement = getByText(/Home/i);
  const  cdolinkElement = getByText(/CDO/i);
  expect(getByText(/CDO/i).textContent).to.equal("CDO");
  expect(getByText(/Home/i).textContent).to.equal("Home");

  fireEvent.click(cdolinkElement);
  console.log(cdolinkElement);

});

App.test.tx:

import {expect} from 'chai';
import IEditor from '../../../src/workspaces/IEditor/IEditor';
import App from '../../../src/app/App';

const app1 = new App();

test('renders learn react link', () => {
  expect(app1.getApp).instanceOf(IEditor);
});

Expected behavior

My expectation is, I don't want to run unit tests in jsdom. I am integrating playwright so that I can run my above unit tests in real browsers. Also, I want to use @testing-library/react and Enzyme etc. I expect it to work like charm. Please help me.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: macOS
jest-playwright-preset: "^1.5.1",
playwright: "^1.10.0",
ts-jest: "26.4.4"
jest: "26.6.0"

Jest configuration (Either in the package.json > jest or in the jest.config.js):

module.exports = {
  preset: 'jest-playwright-preset',
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  verbose: true,
  testRegex: '(/tests/.*|(\\.|/)(test|spec))(\\.it)?\\.(jsx?|tsx?)$',
  testPathIgnorePatterns: ['/coverage', '/lib', '/tests/fixture/','/node_modules/','/build/','/builds/','/automation/'],
  //testPathIgnorePatterns: ['/node_modules/', '/dist']
  testResultsProcessor: './node_modules/jest-junit-reporter',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
  },
  coverageDirectory: "coverage/src",
  coverageThreshold: {
      global: {
    branches: 15, // 80
    functions: 15, // 80
    lines: 15, // 80
    statements: 0 // 20
      }
  },
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!**/*.d.ts',
    '!**/tests/*.{ts,tsx}',
      ],
  coverageReporters: ['json-summary', 'text', 'lcov'],
  modulePaths: [
    "<rootDir>/node_modules/"
   ],
   globals: {
    CLIENT_VERSION: 'test',
    'ts-jest': {
        tsconfig: '<rootDir>/test.tsconfig.json'
    },
  },
}

jest-playwright.config.js:

module.exports = {
    browsers: [
        'chromium'
          ],
    exitOnPageError: false, // GitHub currently throws errors
    launchOptions: {
      headless: true
    }
}

test.tsconfig.json:

  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "types": ["jest-playwright-preset", "expect-playwright","@types/jest"],
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": [
    "src",
    "tests"
  ]
}

I am not able to find this issue anywhere on google. Could anyone please help me with this?

playwright-community / jest-playwright

Unable to run Typescript unit tests in jest and jest-playwright using @testing-library/react, Getting wrong test environment error #779