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

[robcaldecott]

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

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[robcaldecott]

Just verified I have the same issue using yarn workspaces.

[sheremet-va]

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

[robcaldecott]

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

[dancras]

I've come up with a crude workaround that's removed the block for me for now.

[BPreisner]

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

[jsjoeio]

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

[adamaslan]

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?

[jsjoeio]

@adamaslan it should still work. For new projects, I've decided to not use globals and instead go with this approach: https://github.com/typescript-course/react-avatar-tutorial/blob/5173c2881d546b29949e2a5343da2bb7ff2cf7bd/setupTests.ts

See full commit for vitest + testing-lib setup: typescript-course/react-avatar-tutorial@5173c28

[hmajid2301]

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

Not sure how up to date it is!

[promise96319]

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

That's work for me!

[KevinKVJ]

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

Not sure how up to date it is!

Also works for me!!

[KevinKVJ]

Also found this library: https://github.com/chaance/vitest-dom
Not sure how up to date it is!

Also works for me!!

I think it should be stuck on the top... I dont know how to do that... Maybe there should be a repo like awesome-vite, called "awesome-vitest", and put those nice libs in it...?

[leognmotta]

just switched to jest...

[sheremet-va]

Fixed by testing-library/jest-dom#511

Use this code snippet:

import '@testing-library/jest-dom/vitest'