Upgrading to v6.0.0 remove the `toBeInTheDocument` interface with vitest

Question

Upgrading to v6.0.0 remove the `toBeInTheDocument` interface with vitest

qchuchu opened this issue 10 months ago · comments

@testing-library/jest-dom version: 6.0.0
node version: 18.16
npm (or yarn) version: 9.5.1

Relevant code or config:

import '@testing-library/jest-dom/vitest';
import { vitest } from 'vitest';

  await waitFor(() => {
    expect(getByTestId('text-input-error-message')).toBeInTheDocument();
  });

What you did:

Upgraded from v5 to v6

What happened:

I don't know why, but upgrading the package to the last version using vitest caused all my "toBeInTheDocument" matchers to be undefined, although I can see them in the type definition of the package.

Reproduction:

TO-DO

Problem description:

All my tests are failing because toBeInTheDocument is not defined anymore

Suggested solution:

I guess this is due to an upgrade on the dependency of jest types but I'm not sure. Still digging.

John Gozde · Answer 1 · Thu Aug 17 2023 22:55:39 GMT+0800 (China Standard Time)

What version of vitest, and where is the import statement located for @testing-library/jest-dom/vitest?

curtvict · Answer 2 · Fri Aug 18 2023 00:23:19 GMT+0800 (China Standard Time)

fwiw this is happening to me in Jest too.

Quentin Churet · Answer 3 · Fri Aug 18 2023 02:57:32 GMT+0800 (China Standard Time)

ah sorry I thought that I added the vitest version.

Vitest -> 0.34.2

I added the import statement in the vitest.setup.ts file (that is pointed from my vite.config.ts like this)

/// <reference types="vitest" />

import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['test/vitest.setup.ts'],
    include: ['**/?(*.)test.ts?(x)'],
  },
});

John Gozde · Answer 4 · Fri Aug 18 2023 03:17:31 GMT+0800 (China Standard Time)

@qchuchu Have you added test/vitest.setup.ts to your tsconfig.json file? You might also need to add the global vitest types reference to that file.

test/vitest.setup.ts:

/// <reference types="vitest" />

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

tsconfig.json

{
  "compilerOptions": {},
  "include": ["src", "test/vitest.setup.ts"]
}

Quentin Churet · Answer 5 · Fri Aug 18 2023 03:46:20 GMT+0800 (China Standard Time)

So it does work by adding the setup file in the tsconfig.json, but only if I stay with the original configuration

test/vitest.setup.ts

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

If I add /vitest at the end, i'm facing the issue again.

John Gozde · Answer 6 · Fri Aug 18 2023 04:56:37 GMT+0800 (China Standard Time)

Hmm, I think that's because you're using Vitest in "globals" mode. There isn't really a difference between what you have now and using /vitest, which was designed for the default non-globals mode, so if this works for you I say go with it.

Matej Šnuderl · Answer 7 · Fri Aug 18 2023 14:41:20 GMT+0800 (China Standard Time)

Getting this error trying to import

// setup.ts
import matchers from '@testing-library/jest-dom/vitest';

Error:

File '/Users/x/y/node_modules/@testing-library/jest-dom/vitest.d.ts' is not a module.ts(2306)

Dominik G. · Answer 8 · Fri Aug 18 2023 17:50:07 GMT+0800 (China Standard Time)

is adding the setup file to the tsconfig the only way to get this to work?
I'm using a monorepo where the vitest config is created in a separate package and the consuming applications/libraries have it like this in their vitest.config.ts

import {defineVitestConfig} from 'shared-workspace-vitest-setup';
export default defineVitestConfig({
  // custom options here that get merged with the default config
  // default config contains a setupFile adding dom matchers
});

i don't really want to add something like ../../packages/vitest-config/setupFile.js to every package tsconfig just for this, if that even works because the file is outside of the tsconfig parent dir....

edit:
Instead of including the setup file in the tsconfig, you can reference it directly in tsconfig compilerOptions.types

"compilerOptions": {
  "types": ["@testing-library/jest-dom/vitest"]
}

or put it in a .d.ts file that's included like src/jest-dom-types.d.ts

/// <reference types="@testing-library/jest-dom/vitest.d.ts" />

John Gozde · Answer 9 · Fri Aug 18 2023 23:00:04 GMT+0800 (China Standard Time)

Getting this error trying to import

// setup.ts

import matchers from '@testing-library/jest-dom/vitest';

Error:

File '/Users/x/y/node_modules/@testing-library/jest-dom/vitest.d.ts' is not a module.ts(2306)

Matchers are not exported from the vitest export. If you want to import matchers, use this:

import * as matchers from '@testing-library/jest-dom/matchers'

Or if you want to automatically extend Vitest's expect, do this:

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

John Gozde · Answer 10 · Fri Aug 18 2023 23:03:24 GMT+0800 (China Standard Time)

@dominikg Thanks for pointing out the alternate ways of getting the types recognized by TS. We should probably add that to the readme.

DeveloperMatheus · Answer 11 · Mon Aug 21 2023 16:11:51 GMT+0800 (China Standard Time)

fwiw this is happening to me in Jest too.

I can also confirm this is also happening with Jest as well. Don't know how to handle those errors yet :(

John Gozde · Answer 12 · Mon Aug 21 2023 22:55:33 GMT+0800 (China Standard Time)

For those using Jest, make sure you are importing like this:

import '@testing-library/jest-dom'

Many people are using an older deprecated /extend-expect import that was removed in v6.

curtvict · Answer 13 · Tue Aug 22 2023 00:11:06 GMT+0800 (China Standard Time)

Thanks @jgoz I can confirm this fixes the issue for me.

DeveloperMatheus · Answer 14 · Wed Aug 23 2023 16:01:53 GMT+0800 (China Standard Time)

@jgoz Sorry for asking help in this issue, i was checking my setup files and i see that i'm importing almost the same way as the library's documentation:

I have a .setup folder that groups some mocks globally, and also the import '@testing-library/jest-dom.
This is my setupFilesAfterEnv property in jest.config.js:
setupFilesAfterEnv: ['<rootDir>/.jest/setup.ts']

You have any suggestion of what might be causing my errors? When i'm importing on each test, the errors goes away (of course this is a solution, but would be better for me importing this globally in the setup hehe)

EDIT:

I found one possible solution, in my case, i tried to create e second setup file outside this folder (just in the root dir normally), and mentioned in the jest config file, and it worked! But, following my old setup file, can't it be inside any folder anymore?

John Gozde · Answer 15 · Wed Aug 23 2023 23:10:27 GMT+0800 (China Standard Time)

@DeveloperMatheus Is your setup file included in tsconfig.json? Like, in the includes or files properties?

DeveloperMatheus · Answer 16 · Thu Aug 24 2023 18:02:30 GMT+0800 (China Standard Time)

@jgoz It's like this:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["*"]
    },
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": false
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

It doesn't have the files property

EDIT: My setup file is linked in my jest.config.js

John Gozde · Answer 17 · Thu Aug 24 2023 22:21:39 GMT+0800 (China Standard Time)

@DeveloperMatheus it might be because your setup file is in a .jest folder. Typescript might not automatically include files in dot-folders even if they match an include pattern. Try creating a files property next to include and explicitly list the setup file:

"include": [...],
"files": [".jest/setup.ts"]

DeveloperMatheus · Answer 18 · Fri Aug 25 2023 19:09:42 GMT+0800 (China Standard Time)

@jgoz Many many many thanks for your help! It worked!

Kalven Schraut · Answer 19 · Sat Sep 02 2023 04:02:42 GMT+0800 (China Standard Time)

I think depending on how you import expect may cause this issue to occur. For instance my import looks like

import { expect } from 'vitest';

and below is a SS of what the type def points to

instead of the above if I do

then typescript finds the functions defined by jest-dom. Not sure if both need to be defined depending on how expect is being imported by the user?

Andre Nozari · Answer 20 · Mon Sep 04 2023 13:34:24 GMT+0800 (China Standard Time)

So while adding import '@testing-library/jest-dom'; to my setup for vitest (0.34.3) does prevent TS from giving an error, removing it gives me a slightly different error:

Property  toBeInTheDocument  does not exist on type  Assertion<HTMLElement>

John Gozde · Answer 21 · Mon Sep 04 2023 14:37:12 GMT+0800 (China Standard Time)

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

Andre Nozari · Answer 22 · Tue Sep 05 2023 02:06:58 GMT+0800 (China Standard Time)

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

This is my current setupTests.ts

import '@testing-library/jest-dom';
import '@testing-library/jest-dom/vitest';
import createFetchMock from 'vitest-fetch-mock';
import { afterEach, vi } from 'vitest';
import { cleanup } from '@testing-library/react';

export const fetchMocker = createFetchMock(vi);
fetchMocker.enableMocks();

afterEach(() => {
    cleanup();
});

I've tried with both import '@testing-library/jest-dom/vitest'; and import '@testing-library/jest-dom'; and JUST import '@testing-library/jest-dom/vitest'; alone.

I'm starting to think it might be something to do with yarn PnP and WebStorm. I have updated TS, ensured I only import /vitest and my IDE still shows errors.

Interestingly the tests still pass despite the error.

John Gozde · Answer 23 · Tue Sep 05 2023 08:57:31 GMT+0800 (China Standard Time)

And setupTests.ts is included in your tsconfig.json file, either via include or files?

Justin Waite · Answer 24 · Thu Sep 07 2023 02:01:01 GMT+0800 (China Standard Time)

Also using pnpm, I'm getting the type error Property toBeInTheDocument does not exist on type Assertion<HTMLElement> .

The tests pass, but still get the typescript error when typechecking.

test/setup-test-env.ts:

import { installGlobals } from '@remix-run/node';
import '@testing-library/jest-dom/vitest';

installGlobals();

tsconfig includes test/setup-test-env.ts explicitly

tsconfig:

{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "test/setup-test-env.ts"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2019"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "target": "ES2019",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
    "types": ["vitest/globals"],

    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}

Douglas Teoh · Answer 25 · Fri Oct 06 2023 09:06:08 GMT+0800 (China Standard Time)

Hey guys, I also ran into the same issue but finally got a working setup with v6.1.3, vitest 0.34.6 and pnpm. I have a React project created by Vite.

My setup:

// src/__tests__/extend-expect.ts
import "@testing-library/jest-dom/vitest";

Remember to add the above to vite.config.ts setupFiles.

// src/vitest.d.ts
import { type TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";
import {
  type Assertion,
  type AsymmetricMatchersContaining,
  type expect,
} from "vitest";

type CustomMatchers<R = unknown> = TestingLibraryMatchers<
  ReturnType<typeof expect.stringContaining>,
  R
>;

declare module "vitest" {
  interface Assertion<T = unknown> extends CustomMatchers<T> {}
  interface AsymmetricMatchersContaining extends CustomMatchers {}
}

For tsconfig.json, there were no additional changes. I did not add the extend-expect file into include (Vite already added src dir).

I think the problem is that the types being shipped for @testing-library/jest-dom/vitest just doesn't match with Vitest's own official docs of how to extend the types.

Damian P · Answer 26 · Tue Oct 10 2023 20:01:43 GMT+0800 (China Standard Time)

To make it work if you are using the vitest:

Make sure you have installed @testing-library/jest-dom
Create the setupTests.ts file with content inside import '@testing-library/jest-dom/vitest'
Import the setupTests.ts file inside vitest.config.ts, for example: setupFiles: path.resolve(__dirname, '../../setupTests.ts'),
Add "files": ["../../setupTests.ts"] into the tsconfig.json file

Nick Wittland · Answer 27 · Thu Oct 12 2023 13:27:19 GMT+0800 (China Standard Time)

So it does work by adding the setup file in the tsconfig.json, but only if I stay with the original configuration

test/vitest.setup.ts
import '@testing-library/jest-dom';
If I add /vitest at the end, i'm facing the issue again.

Had the same issue and can confirm this. When having "globals" set to true (in vite.config.ts), I need to import from @testing-library/jest-dom instead of @testing-library/jest-dom/vitest to make TypeScript happy.

But after taking a look into docs from vitest config for globals, I saw that you need to add vitest/globals to compilerOptions\types property. I did not had that and added it now. With that the import from @testing-library/jest-dom/vitest works without troubles

mdodge-ecgrow · Answer 28 · Fri Oct 27 2023 00:39:25 GMT+0800 (China Standard Time)

So it does work by adding the setup file in the tsconfig.json, but only if I stay with the original configuration
test/vitest.setup.ts
import '@testing-library/jest-dom';
If I add /vitest at the end, i'm facing the issue again.
Had the same issue and can confirm this. When having "globals" set to true (in vite.config.ts), I need to import from @testing-library/jest-dom instead of @testing-library/jest-dom/vitest to make TypeScript happy.

But after taking a look into docs from vitest config for globals, I saw that you need to add vitest/globals to compilerOptions\types property. I did not had that and added it now. With that the import from @testing-library/jest-dom/vitest works without troubles

Thank you!! I can confirm this also worked for me!

Andrea Di Marco · Answer 29 · Mon Dec 11 2023 22:13:21 GMT+0800 (China Standard Time)

Just bumped in this issue. For me, after following the setup instructions found on the testing-library docs, I also had to add jsdom types: npm i -D @types/testing-library__jest-dom, then it worked.

vinayak vikram · Answer 30 · Fri Feb 09 2024 13:54:36 GMT+0800 (China Standard Time)

create a setupTest.ts file in src folder and add import '@testing-library/jest-dom'

In vitest.config.ts file

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/setupTests.ts'],
    coverage: {
      provider: 'v8'
    }
  }
})

And finally install types/testing-library. This worked for me

ecoms-ye · Answer 31 · Mon Mar 11 2024 16:02:40 GMT+0800 (China Standard Time)

According to the comments above, import '@testing-library/jest-dom' can fix this error.

So this error can be fixed by using the TypeScript's Triple-Slash Directive:

// https://github.com/testing-library/jest-dom/issues/515
/// <reference types="@testing-library/jest-dom" />

// https://github.com/testing-library/jest-dom?tab=readme-ov-file#with-vitest
import '@testing-library/jest-dom/vitest'

Update: PR #589 can also solve this problem.

Pilyutin Denis · Answer 32 · Thu Mar 21 2024 07:09:24 GMT+0800 (China Standard Time)

"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.2",
"vitest": "^1.4.0"

i have one project create with next.js
and it was enough to create a setup.ts and add vitest.config setupFiles
But in second project which started with vite i have identical versions as above and this approach didn't work
i have to manually create global.d.ts with :

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

declare global {
 namespace jest {
   interface Matchers<R> {
     toBeInTheDocument(): R;
   }
 }
}

can't tell why it worked in first , but didn't in second
and also tests were working fine even before adding , i just had vscode to tell me that toBeInTheDocument doesn't exist.
and also i checked other mathers from jest-dom without global.d.ts they were working fine, somehow it only affects toBeInTheDocument

curtvict · Answer 33 · Thu Mar 21 2024 07:42:37 GMT+0800 (China Standard Time)

@RinalinDS I just ran into this same issue this morning! Try this:

import * as matchers from '@testing-library/jest-dom/matchers';
import '@testing-library/jest-dom/vitest';
import { cleanup } from '@testing-library/react';
import { afterEach, expect } from 'vitest';

expect.extend(matchers);

afterEach(() => {
  cleanup();
});

The import '@testing-library/jest-dom/vitest'; bit took me a while to find.

To get vscode to "get in the van", so to speak, I had to run yarn dlx @yarnpkg/sdks vscode, edit my vscode workspace json to add this setting: typescript.tsdk": ".yarn/sdks/typescript/lib", and restart.