Comments (10)
Weird that it seems I have everything correctly but I still get the error:
The setup file inside
./tests/setupFiles/testingLibrary.ts
import '@testing-library/jest-dom/vitest'My tsconfig.json:
{ "include": [ "remix.env.d.ts", "**/*.ts", "**/*.tsx", "./tests/setupFiles/testingLibrary.ts" ], // ...rest // baseUrl is "." in compiler options }My vitest.config.ts file:
import { defineConfig } from 'vitest/config' export default defineConfig({ test: { coverage: { include: ['app/**'], }, clearMocks: true, globals: true, environment: 'jsdom', setupFiles: ['./tests/setupFiles/testingLibrary.ts'], css: true, silent: process.env.CI === 'true', retry: 2, }, })... and my package versions:
pnpm -F my-project ls @testing-library/jest-dom vitest typescript Legend: production dependency, optional only, dev only my-project /path/to/monorepo/apps/my-project devDependencies: @testing-library/jest-dom 6.2.0 typescript 5.3.3 vitest 1.2.0With all that in place, I still get the error:
error TS2339: Property 'toBeInTheDocument' does not exist on type 'Assertion<HTMLElement | null>'
I notice one thing though, in the
@testing-library/jest-dom/vitest
, we're overriding@vitest/expect
module:import {type expect} from 'vitest' import {type TestingLibraryMatchers} from './matchers' export {} declare module '@vitest/expect' { interface JestAssertion<T = any> extends TestingLibraryMatchers< ReturnType<typeof expect.stringContaining>, T > {} }I don't have
@vitest/expect
listed in my package.json file and even though I know it's a dependency ofvitest
and it's being used under-the-hood, I guess that's the issue. That's because if I change the module declaration from@vitest/expect
tovitest
:import {type expect} from 'vitest' import {type TestingLibraryMatchers} from './matchers' export {} -declare module '@vitest/expect' { +declare module 'vitest' { interface JestAssertion<T = any> extends TestingLibraryMatchers< ReturnType<typeof expect.stringContaining>, T > {} }... it worked as intended.
I don't know if it's something related to
pnpm
, or monorepos.My workaround was doing by hand what the
testing-library/vitest
abstraction is doing:import * as matchers from '@testing-library/jest-dom/matchers' import { expect } from 'vitest' expect.extend(matchers) declare module 'vitest' { // vitest instead `@vitest/expect` interface JestAssertion<T = any> extends matchers.TestingLibraryMatchers< ReturnType<typeof expect.stringContaining>, T > {} }
Facing this same issue with pnpm with monorepos.
from jest-dom.
In your tsconfig.json
try adding to your include
the setup.ts
file.
{
//..tsconfig.json
"include": ["./test/setup.ts"]
}
I would remove the usage of "types": ["vite/client", "@testing-library/jest-dom/vitest"]
.
Be great if you could put up an example repo or codesandbox so we can recreate the issue and debug it.
from jest-dom.
Weird that it seems I have everything correctly but I still get the error:
The setup file inside ./tests/setupFiles/testingLibrary.ts
import '@testing-library/jest-dom/vitest'
My tsconfig.json:
{
"include": [
"remix.env.d.ts",
"**/*.ts",
"**/*.tsx",
"./tests/setupFiles/testingLibrary.ts"
],
// ...rest
// baseUrl is "." in compiler options
}
My vitest.config.ts file:
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
coverage: {
include: ['app/**'],
},
clearMocks: true,
globals: true,
environment: 'jsdom',
setupFiles: ['./tests/setupFiles/testingLibrary.ts'],
css: true,
silent: process.env.CI === 'true',
retry: 2,
},
})
... and my package versions:
pnpm -F my-project ls @testing-library/jest-dom vitest typescript
Legend: production dependency, optional only, dev only
my-project /path/to/monorepo/apps/my-project
devDependencies:
@testing-library/jest-dom 6.2.0
typescript 5.3.3
vitest 1.2.0
With all that in place, I still get the error:
error TS2339: Property 'toBeInTheDocument' does not exist on type 'Assertion<HTMLElement | null>'
I notice one thing though, in the @testing-library/jest-dom/vitest
, we're overriding @vitest/expect
module:
import {type expect} from 'vitest'
import {type TestingLibraryMatchers} from './matchers'
export {}
declare module '@vitest/expect' {
interface JestAssertion<T = any>
extends TestingLibraryMatchers<
ReturnType<typeof expect.stringContaining>,
T
> {}
}
I don't have @vitest/expect
listed in my package.json file and even though I know it's a dependency of vitest
and it's being used under-the-hood, I guess that's the issue. That's because if I change the module declaration from @vitest/expect
to vitest
:
import {type expect} from 'vitest'
import {type TestingLibraryMatchers} from './matchers'
export {}
-declare module '@vitest/expect' {
+declare module 'vitest' {
interface JestAssertion<T = any>
extends TestingLibraryMatchers<
ReturnType<typeof expect.stringContaining>,
T
> {}
}
... it worked as intended.
I don't know if it's something related to pnpm
, or monorepos.
My workaround was doing by hand what the testing-library/vitest
abstraction is doing:
import * as matchers from '@testing-library/jest-dom/matchers'
import { expect } from 'vitest'
expect.extend(matchers)
declare module 'vitest' { // vitest instead `@vitest/expect`
interface JestAssertion<T = any>
extends matchers.TestingLibraryMatchers<
ReturnType<typeof expect.stringContaining>,
T
> {}
}
from jest-dom.
I couldn't get it to work. My problem was having the tests in a tests
folder.
So the when I change the include in tsconfig.json
to read it works:
"include": ["src", "tests"]
from jest-dom.
I notice one thing though, in the
@testing-library/jest-dom/vitest
, we're overriding@vitest/expect
module:import {type expect} from 'vitest' import {type TestingLibraryMatchers} from './matchers' export {} declare module '@vitest/expect' { interface JestAssertion<T = any> extends TestingLibraryMatchers< ReturnType<typeof expect.stringContaining>, T > {} }I don't have
@vitest/expect
listed in my package.json file and even though I know it's a dependency ofvitest
and it's being used under-the-hood, I guess that's the issue.
I found out that if you install @vitest/expect
manually it fixes the TS error.
from jest-dom.
@kibertoad Have you followed the with vitest setup guide https://github.com/testing-library/jest-dom#with-vitest ?
// In your own vitest-setup.js (or any other name)
import '@testing-library/jest-dom/vitest'
// In vitest.config.js add (if you haven't already)
setupFiles: ['./vitest-setup.js']
from jest-dom.
yup.
vite.config.ts:
setupFiles: './test/setup.ts',
test/setup.ts:
/// <reference types="@lokalise/styled/dist/testing-setup" /> This includes global types (not handled by import below unfortunately)
import '@lokalise/styled/testing-setup'
import '@testing-library/jest-dom/vitest'
It works with 0.x vitest, but doesn't with 1.x
from jest-dom.
I had the same issue you had. This is how I fixed it, maybe it helps you.
Even though versions of vitest
and related libraries were all updated in package.json
, I did npm ls vitest
and realized I still had a rogue 0.34 vitest
.
I think the issue is because I didn't upgrade with npm update
, I reverted the package lock, and did npm update
(with all the updated versions in package.json
) and it was all good afterwards. No more rogue <1 version of vitest
.
from jest-dom.
I've update to
"vitest": "^1.2.0",
"@testing-library/jest-dom": "^6.2.0",
with the @andykenward docs and everything is working fine for toBeInTheDocument
assert
I don't have TS error
from jest-dom.
I'm having the same issue after upgrading from 0.34 to 1.2.2
from jest-dom.
Related Issues (20)
- Checking if input value is empty string using toHaveValue
- Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>' HOT 24
- Support assertions for each DOM query HOT 8
- toHaveStyle fails on custom property names containing uppercase letters HOT 4
- TypeScript types for the `"./matchers"` export don't match implementations HOT 3
- Regex support for `.toHaveClass()` HOT 9
- toBeVisible is not seeing svelte-kit classes HOT 1
- `"types": ["jest", "@testing-library/jest-dom"]` not working after v6 upgrade HOT 3
- .toHaveAttribute('disabled') and .toBeDisabled() HOT 1
- toHaveStyle does not behave consistently between number and string values HOT 10
- toHaveStyle for property `font-size` behaves incorrectly for number values HOT 2
- `.toHaveStyle()` doesn't know about aspect-ratio HOT 6
- Property 'toBeInTheDocument, toBeDisabled, etc' does not exist on type 'JestMatchers<HTMLElement>' HOT 4
- Types breakage in v6.4.0 HOT 9
- Remove unused and deprecated package `jest-environment-jsdom-sixteen`
- [attribute selector]:has(+ el) pseudo-class selector with emotionStyled reported as syntax error
- Memory leak when importing @testing-library/jest-dom in jest-setup file with NodeJS 20
- Cost effective lodash HOT 2
- toHaveStyles always report hover style HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jest-dom.