Jest-Dom not importing correctly: "TypeError: Cannot set properties of null (setting 'escape')"

[AlexVild]

• @testing-library/jest-dom version: 5.2.0
• node version: 16.17.0
• npm (or yarn) version: 8.15.0

Relevant code or config:

In my project's root you can find two files:

setup-jest.ts

import 'jest-preset-angular/setup-jest';
import './jest-global-mocks';
import '@testing-library/jest-dom
import { ngMocks } from 'ng-mocks';
import { OrgAdminService } from '@modules/admin-settings/services/org-admin.service';
import { EMPTY, of } from 'rxjs';
import { ModalService } from '@modules/modals/services/modal.service';
import { MockOrganizations } from './src/test-utils/mock-organizations';

ngMocks.autoSpy('jest'); // Configures ngMocks to always create spys on mock creation

// Default mocks
ngMocks.defaultMock(OrgAdminService, () => ({
  getOrganizations: () => of(MockOrganizations.data),
}));

ngMocks.defaultMock(ModalService, () => ({
  show: () => EMPTY,
}));

and jest-config.ts:

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  globalSetup: 'jest-preset-angular/global-setup',
  moduleDirectories: ['node_modules', 'src'],
  moduleNameMapper: {
    '@modules/(.*)': '<rootDir>/src/app/modules/$1',
    '@models/(.*)': '<rootDir>/src/app/modules/consumer/models/$1',
    "@utils/(.*)": '<rootDir>/src/app/utils/$1',
    "@shared/(.*)": '<rootDir>/src/app/modules/shared/$1',
    "@store/(.*)": '<rootDir>/src/app/store/$1',
    "@services/(.*)": '<rootDir>/services/$1',
    "@guards/(.*)": '<rootDir>/src/app/guards/$1',
  }
};

As instructed by jest-dom's installation instructions.

What you did:

I've been scaffolding my angular (v13) project's testing, and decided jest-dom would be perfect after migrating my testing framework to Jest.

I installed jest-dom via npm i --save-dev @testing-library/jest-dom, then added the import to my setup-jest.ts file, which is loaded in during jest startup as configured in jest.config.js.

What happened:

Upon running jest for any test, I get the following error thrown from setup-jest.ts:

  ● Test suite failed to run

    TypeError: Cannot set properties of null (setting 'escape')

      1 | import 'jest-preset-angular/setup-jest';
      2 | import './jest-global-mocks';
    > 3 | import '@testing-library/jest-dom';
        | ^
      4 | import { ngMocks } from 'ng-mocks';
      5 | import { EMPTY, of } from 'rxjs';
      6 | import { OrgAdminService } from './app/modules/admin-settings/services/org-admin.service';

      at node_modules/css.escape/css.escape.js:103:18
      at node_modules/css.escape/css.escape.js:6:20
      at Object.<anonymous> (node_modules/css.escape/css.escape.js:14:2)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/to-have-form-values.js:16:35)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/matchers.js:189:25)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:3:42)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/index.js:3:1)
      at Object.<anonymous> (src/setup-jest.ts:3:1)

Reproduction:

Problem description:

I can't use jest-dom at all, as it seems like there's a dependency issue?

Suggested solution:

[SushnVent]

I am facing the same issue. Have you found any solution of this?

[AlexVild]

I am facing the same issue. Have you found any solution of this?

Nope :(

[kamilapolewczyk]

I am facing the same issue. Have you found any solution of this?

[wesrog]

I ran into this issue as well and I had to change my setup-jest.ts file to have the testing-library/jest-dom import at the top 🤷

import '@testing-library/jest-dom';
import './jest-global-mocks';