vitest: TS error when using vitest globals and @testing-library/jest-dom

Describe the bug

I have a pnpm monorepo containing a React component library and an app. The component library is using vitest, @testing-library/react and uses @testing-library/jest-dom to extend expect which means I need to use vitest globals.

The problem is that @testing-library/jest-dom pulls in @types/jest which causes a clash when typechecking my code prior to building.

../node_modules/.pnpm/@types+jest@27.4.0/node_modules/@types/jest/index.d.ts:34:1 - error TS6200: Definitions of the following identifiers conflict with those in another file: test, describe, it, expect, beforeAll, afterAll, beforeEach, afterEach

34 declare var beforeAll: jest.Lifecycle;
   ~~~~~~~

  ../node_modules/.pnpm/vitest@0.0.141_jsdom@19.0.0/node_modules/vitest/global.d.ts:1:1
    1 declare global {
      ~~~~~~~
    Conflicts are in this file.

../node_modules/.pnpm/vitest@0.0.141_jsdom@19.0.0/node_modules/vitest/global.d.ts:1:1 - error TS6200: Definitions of the following identifiers conflict with those in another file: test, describe, it, expect, beforeAll, afterAll, beforeEach, afterEach

1 declare global {
  ~~~~~~~

  ../node_modules/.pnpm/@types+jest@27.4.0/node_modules/@types/jest/index.d.ts:34:1
    34 declare var beforeAll: jest.Lifecycle;
       ~~~~~~~
    Conflicts are in this file.


Found 2 errors.

Any ideas how I can workaround this?

Reproduction

Repo here: https://github.com/robcaldecott/pnpm-vite-monorepo-example

pnpm install
cd components
pnpm exec tsc

System Info

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 912.70 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Firefox: 95.0.2
    Safari: 14.1.2
  npmPackages:
    @vitejs/plugin-react: ^1.0.7 => 1.1.4 
    vite: ^2.7.2 => 2.7.10 
    vitest: ^0.0.141 => 0.0.141

Used Package Manager

pnpm

Validations

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 17
  • Comments: 15 (5 by maintainers)

Commits related to this issue

Most upvoted comments

Will do. If I find a workaround we can add it to the vitest docs as @testing-library/jest-dom is very popular.

Also found this library: https://github.com/chaance/vitest-dom

Not sure how up to date it is!

I suggest creating an issue at @testing-library/jest-dom

Just verified I have the same issue using yarn workspaces.

Another workaround testing-library/jest-dom#427 (comment)

I used this workaround with the react-ts template and made a new template to save myself (and others) future time: https://github.com/jsjoeio/react-ts-vitest-template

Do you still recommend this template?

Another workaround testing-library/jest-dom#427 (comment)

I used this workaround with the react-ts template and made a new template to save myself (and others) future time: https://github.com/jsjoeio/react-ts-vitest-template