TS error when using vitest globals and @testing-library/jest-dom
robcaldecott opened this issue · comments
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.141Used 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.
Just verified I have the same issue using yarn workspaces.
I suggest creating an issue at @testing-library/jest-dom
Will do. If I find a workaround we can add it to the vitest docs as @testing-library/jest-dom is very popular.
I've come up with a crude workaround that's removed the block for me for now.
Another workaround testing-library/jest-dom#427 (comment)
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
EDIT: NOT really working
The workaround (hack 😆) that worked for me was to copy globals.d.ts from vitest to my global.d.ts file
declare global {
const suite: typeof import('vitest')['suite']
const test: typeof import('vitest')['test']
const describe: typeof import('vitest')['describe']
const it: typeof import('vitest')['it']
const expect: typeof import('vitest')['expect']
const assert: typeof import('vitest')['assert']
const vitest: typeof import('vitest')['vitest']
const vi: typeof import('vitest')['vitest']
const beforeAll: typeof import('vitest')['beforeAll']
const afterAll: typeof import('vitest')['afterAll']
const beforeEach: typeof import('vitest')['beforeEach']
const afterEach: typeof import('vitest')['afterEach']
}
And adding the following to compilerOptions in my tsconfig:
"paths": {
"@jest/*": ["NOT_FOUND"],
"jest/*": ["NOT_FOUND"],
}
Another workaround testing-library/jest-dom#427 (comment)
I used this workaround with the
react-tstemplate 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?
@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
Also found this library: https://github.com/chaance/vitest-dom
Not sure how up to date it is!
Another workaround testing-library/jest-dom#427 (comment)
That's work for me!
Also found this library: https://github.com/chaance/vitest-dom
Not sure how up to date it is!
Also works for me!!
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...?
just switched to jest...