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

robcaldecott · 2022-01-13T12:37:11Z

@testing-library/jest-dom version: 5.16.1
node version: 14.17.0
yarn version: 1.22.17
@testing-library/react version: 12.1.2

I am using vitest instead of jest for testing a React component lib in a monorepo. I am using @testing-library/jest-dom and @testing-library/react and both happily work with vitest.

However, when type checking my code I am seeing a clash between @types/jest and vitest. The @types/jest dependency seems to have been pulled in by @testing-library/jest-dom.

../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/vitest/global.d.ts:1:1
    1 declare global {
      ~~~~~~~
    Conflicts are in this file.

../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/@types/jest/index.d.ts:34:1
    34 declare var beforeAll: jest.Lifecycle;
       ~~~~~~~
    Conflicts are in this file.


Found 2 errors.

It would be great to have a workaround for this issue so the jest types can be removed or ignored.

To reproduce this issue clone the following project (notice it uses a branch called yarn):

https://github.com/robcaldecott/pnpm-vite-monorepo-example/tree/yarn

To see the error:

yarn install
cd components
yarn build

The text was updated successfully, but these errors were encountered:

sheremet-va · 2022-01-14T12:01:50Z

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

dancras · 2022-02-11T12:30:06Z

Simply removing the following line from the types definition solves it and doesn't impact the functionality from my brief testing.

/// <reference types="jest" />

If anyone wants a hacky and crude solution in the meantime:

package.json

  "type": "module",
  "scripts": {
    "build": "node patchJestDom.js && %previous_build_commands%",
  }

patchJestDom.js

import fs from 'fs';
import path from 'path';

const typesPath = path.resolve('node_modules', '@types', 'testing-library__jest-dom', 'index.d.ts');

fs.readFile(typesPath, 'utf8', (err, data) => {
    if (err) throw err;

    let lines = data.split('\n');

    if (lines[8] === '/// <reference types="jest" />') {
        lines = lines.slice(0, 8).concat(lines.slice(9));
    }

    fs.writeFile(typesPath, lines.join('\n'), 'utf8', function(err) {
        if (err) throw err;
    });
});

larsenwork · 2022-02-21T11:45:33Z

@dancras thanks for the hack, currently using it too but added to postinstall lifecycle script to have it run on both https://docs.npmjs.com/cli/v8/using-npm/scripts#npm-ci and https://docs.npmjs.com/cli/v8/using-npm/scripts#npm-install

  "scripts": {
    ...existing scripts here,
    "postinstall": "node scripts/patchJestDom.js",
  }

alamo42 · 2022-03-12T17:04:22Z

Thanks @dancras, your solution worked! I had to modify it because my reference to jest was on line 10, so I ended up making it to recognize any line:

const fs = require("fs");
const path = require("path");

const typesPath = path.resolve(
  "node_modules",
  "@types",
  "testing-library__jest-dom",
  "index.d.ts"
);

fs.readFile(typesPath, "utf8", (err, data) => {
  if (err) throw err;

  let lines = data.split("\n");

  jestTypesIndex = lines.findIndex((line) =>
    line.includes('reference types="jest"')
  );

  if (lines[jestTypesIndex] === '/// <reference types="jest" />') {
    lines = lines
      .slice(0, jestTypesIndex)
      .concat(lines.slice(jestTypesIndex + 1));
  }

  fs.writeFile(typesPath, lines.join("\n"), "utf8", function (err) {
    if (err) throw err;
  });
});

larsenwork · 2022-03-14T10:09:44Z

FWIW this works just fine too. (I tend not to care about throwing errors because they are of limited value in a build step like this)

import fs from 'fs'
import path from 'path'

const typesFile = path.resolve('node_modules/@types/testing-library__jest-dom/index.d.ts')
const encoding = 'utf8'
const strings = {
  search: '/// <reference types="jest" />',
  replace: '// See https://github.com/testing-library/jest-dom/issues/427 for reference',
}

const result = fs
  .readFileSync(typesFile, encoding)
  .replace(strings.search, strings.replace)

fs.writeFileSync(typesFile, result, encoding)

EDIT: my vite.config.js and tsconfig.json for reference.
@laruiss ☝️

laruiss · 2022-03-17T16:57:08Z

@larsenwork Would you be so kind as to share your tsconfig.*.json?
I am still struggling with this 😕

BPreisner · 2022-04-27T13:13:35Z

@gnapse is there any possibility to remove /// <reference types="jest" /> from library types and make @types/jest a peerDependency?

Anyway, I found a slightly less hacky workaround 💯 :

setupTests.ts (file which goes to test.setupFiles in vite.config.ts)

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

global.d.ts (file placed in root or inside src directory)

/* eslint-disable @typescript-eslint/ban-types */
/* eslint-disable @typescript-eslint/no-unused-vars */
import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';

declare global {
  namespace jest {
    type Matchers<R = void, T = {}> = TestingLibraryMatchers<
      typeof expect.stringContaining,
      R
    >;
  }
}

tsconfig.json

{
  "compilerOptions": {
   ...
    "types": ["node", "vite/client", "vitest/globals"],
  },
}

airjp73 · 2022-05-05T20:49:43Z

Tried the workaround above, but had to tweak one thing. In global.d.ts I had to write this instead:

import type { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";

declare global {
  namespace jest {
    interface Matchers<R = void>
      extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
  }
}

cmacdonnacha · 2022-05-18T14:33:53Z

Not sure if this is the correct solution but adding "skipLibCheck": true, in my tsconfig.json fixed it.

edumudu · 2022-06-29T03:00:02Z

for me, using vitest@0.16.0 and @testing-library/jest-dom@5.16.4 only the solution bellow worked

// global.d.ts
import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';

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

declare global {
  namespace Vi {
    interface Assertion extends CustomMatchers {}
    interface AsymmetricMatchersContaining extends CustomMatchers {}
  }
}

and using pnpm the code bellow need to be placed in the .npmrc to be able to use the TestingLibraryMatchers types outside node_modules

shamefully-hoist = true

jsjoeio · 2022-07-04T15:09:24Z

Combining @BPreisner and @airjp73's solutions, I made a new template to save myself (and others) future time: https://github.com/jsjoeio/react-ts-vitest-template

seivan · 2022-07-06T06:08:26Z

@BPreisner
Out of curiosity, would this have worked on its own?

  "compilerOptions": {
    "typeRoots": [],
    "types": [],
    }

I know it doesn't fix the root problem of them bundling the types.
But am wondering ( can't test it right now) if augmenting the jest namespace would be necessary at all if types settings are set to not include by default.

zoontek · 2022-07-07T12:32:57Z

I made a simple solution to fix this issue: https://github.com/zoontek/types-testing-library-vitest-dom

Installation (yarn)

"resolutions": {
  "@types/testing-library__jest-dom": "github:zoontek/types-testing-library-vitest-dom"
}

Installation (npm)

"overrides": {
  "@types/testing-library__jest-dom": "github:zoontek/types-testing-library-vitest-dom"
}

Test setup file

import matchers from "@testing-library/jest-dom/matchers";
import { expect } from "vitest";

expect.extend(matchers);

kaorun343 · 2022-08-16T18:35:58Z

Hi.
How about providing @testing-library/vitest-dom ?
Since the release of Vitest, the number of downloads of Vitest has increased.
I think the official support for using Testing Library with Vitest makes us very happy and we don't have to add ad-hoc solutions.

nickserv · 2022-09-19T09:37:11Z

I don't think making a new package is worth the cognitive/maintenance overhead when we could just make this package more framework agnostic for now.

However, I vaguely remember another maintainer planning on refactoring matchers out of this package. Please let me know if there's an update on that. I couldn't find the source, but I don't want to step on any toes accidentally.

AndrewLeedham · 2022-09-21T08:24:16Z

Would the workaround here work for this? #439

nickserv · 2022-09-21T08:51:15Z

Are you suggesting we document this as a temporary workaround for Vitest users, or expose a Vitest entry point permanently?

AndrewLeedham · 2022-09-21T09:28:09Z

Are you suggesting we document this as a temporary workaround for Vitest users, or expose a Vitest entry point permanently?

Currently a workaround, I can see why the requirement of types: [] would be a pain, I was already using that to get around Cypress conflicts, but not an ideal solution. Maybe the inverse would be a cleaner solution, where we provide jest.d.ts and vitest.d.ts and the matchers are just exported from the index, so you have to do something like /// <reference types="@testing-library/jest-dom/vitest" /> in your jest-setup.ts script instead of excluding the index with types: []?

elliottsj · 2022-09-30T20:35:41Z

Maybe the inverse would be a cleaner solution, where we provide jest.d.ts and vitest.d.ts

I like this approach as well.

For now, I am using a workaround with pnpm patch, creating this diff to empty the definitions in @types/testing-library__jest-dom/index.d.ts:

diff --git a/index.d.ts b/index.d.ts
index 43ba6b7fe458e77d152fe0b2f7afeac05d8fc563..dfa540aa7d1ab8c78c31104d3210eee3c33a94c0 100755
--- a/index.d.ts
+++ b/index.d.ts
@@ -7,12 +7,9 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // Minimum TypeScript Version: 4.3
 
-/// <reference types="jest" />
+// NOTE: these definitions are left blank, to support using Testing Library Jest matchers with
+// Vitest, without having to use Jest's global types (for `expect`, etc).
 
-import { TestingLibraryMatchers } from './matchers';
+// Vitest's `expect` type is instead extended in `src/setupTests.ts`.
 
-declare global {
-    namespace jest {
-        interface Matchers<R = void, T = {}> extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
-    }
-}
+// For more context, see https://github.com/testing-library/jest-dom/issues/427

In patches/@types__testing-library__jest-dom@5.14.5.patch, with this in package.json:

"pnpm": {
  "patchedDependencies": {
    "@types/testing-library__jest-dom@5.14.5": "patches/@types__testing-library__jest-dom@5.14.5.patch"
  }
}

Paired with this in my Vitest setup file: #439 (comment)

import matchers, {
  TestingLibraryMatchers,
} from '@testing-library/jest-dom/matchers';

declare global {
  namespace Vi {
    interface JestAssertion<T = any>
      extends jest.Matchers<void, T>,
        TestingLibraryMatchers<T, void> {}
  }
}

expect.extend(matchers);

haikyuu · 2022-10-21T15:53:09Z

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"],
}

typeofweb · 2023-02-07T14:14:57Z

Solution for pnpm users:

Add this to your package.json:

  "pnpm": {
    "patchedDependencies": {
      "@types/testing-library__jest-dom@5.14.5": "patches/@types__testing-library__jest-dom@5.14.5.patch"
    }
  }

Now, create a file patches/@types__testing-library__jest-dom@5.14.5.patch with the following contents:

diff --git a/index.d.ts b/index.d.ts
index 43ba6b7fe458e77d152fe0b2f7afeac05d8fc563..3bf91587abf21f15ac166bcae1f5a59b23884b87 100755
--- a/index.d.ts
+++ b/index.d.ts
@@ -7,7 +7,7 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // Minimum TypeScript Version: 4.3
 
-/// <reference types="jest" />
+// See https://github.com/testing-library/jest-dom/issues/427 for reference
 
 import { TestingLibraryMatchers } from './matchers';

Save both and run pnpm i.

See testing-library/jest-dom#427 (comment) for the fix. This is also a possible fix for vitest-dev/vitest#3156.

edufarre · 2023-05-17T15:40:53Z

Do you have any updates on the status of this issue?
For now, the approach I've followed is the one mentioned into another issue (which targets the latest version of Vite)

madmadi · 2023-05-28T14:23:21Z

Another solution if you don't mind to install a new package is to install vitest-dom. no hack or workaround and it works straightforward with pnpm too. It is not part of testing-library though.

merlinstardust · 2023-06-27T05:29:50Z

I'm also seeing this issue on a brand new project

https://github.com/merlinstardust/coverage-zero-vitest-example/actions/runs/5384546869/jobs/9772635711#step:7:20

github-actions · 2023-08-13T16:32:23Z

🎉 This issue has been resolved in version 6.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

See testing-library/jest-dom#427

sheremet-va mentioned this issue Jan 14, 2022

@types/jest dependency should be changed to @jest/types #387

Closed

beefchimi mentioned this issue Feb 3, 2022

[Vitest] Type clash between vitest and jest-dom beefchimi/react-hooks#28

Open

dancras mentioned this issue Feb 11, 2022

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

Closed

6 tasks

sheremet-va mentioned this issue Apr 11, 2022

Missing type for test.fails when using testing library vitest-dev/vitest#1133

Closed

6 tasks

Jpoliachik mentioned this issue May 12, 2022

Yarn and Typescript fixes openmindlearning/design-system#1

Merged

jsjoeio mentioned this issue Jul 7, 2022

fix types this way jsjoeio/react-ts-vitest-template#1

Closed

nickserv mentioned this issue Sep 19, 2022

chore: remove @types from dependencies #472

Closed

4 tasks

nickserv added bug Something isn't working BREAKING CHANGE This change will require a major version bump labels Sep 19, 2022

nickserv mentioned this issue Sep 19, 2022

[@testing-library/jest-dom] Remove @types from dependencies DefinitelyTyped/DefinitelyTyped#62320

Closed

7 tasks

IanVS mentioned this issue Oct 6, 2022

Use expect 28 style typescript module augmentation #483

Closed

4 tasks

SwannHERRERA mentioned this issue Nov 19, 2022

Fix eslint issue with testing lib on jsdom jardin-pomodoro/react-pomodoro#2

Closed

This was referenced Mar 5, 2023

bug: Overshadowed types for Vitest global API trpc/trpc#3916

Closed

fix(build): Resolve overshadowed types for Vitest global API trpc/trpc#3923

Merged

adriencaccia added a commit to swarmion/swarmion that referenced this issue Apr 9, 2023

examples(full-stack): fix vitest and testing-library types

8049044

See testing-library/jest-dom#427 (comment) for the fix. This is also a possible fix for vitest-dev/vitest#3156.

adriencaccia mentioned this issue Apr 9, 2023

Problem with @testing-library/jest-dom types after updating to v0.30.0 vitest-dev/vitest#3156

Closed

6 tasks

adriencaccia added a commit to swarmion/swarmion that referenced this issue Apr 9, 2023

examples(full-stack): fix vitest and testing-library types

73d86b8

See testing-library/jest-dom#427 (comment) for the fix. This is also a possible fix for vitest-dev/vitest#3156.

jgoz mentioned this issue Aug 12, 2023

feat!: local types, supporting jest, @jest/globals, vitest #511

Merged

4 tasks

kentcdodds closed this as completed in #511 Aug 13, 2023

github-actions bot added the released label Aug 13, 2023

johnhunter added a commit to johnhunter/mondo that referenced this issue Sep 20, 2023

Fix issues with vitest and types

84dc5e1

See testing-library/jest-dom#427

manoldonev mentioned this issue Feb 17, 2024

chore(vitest): use official way of extending expect with custom matchers manoldonev/react-app-template-ts#109

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

robcaldecott commented Jan 13, 2022

sheremet-va commented Jan 14, 2022 •

edited

Loading

dancras commented Feb 11, 2022 •

edited

Loading

larsenwork commented Feb 21, 2022

alamo42 commented Mar 12, 2022

larsenwork commented Mar 14, 2022 •

edited

Loading

laruiss commented Mar 17, 2022

BPreisner commented Apr 27, 2022

airjp73 commented May 5, 2022

cmacdonnacha commented May 18, 2022

edumudu commented Jun 29, 2022

jsjoeio commented Jul 4, 2022

seivan commented Jul 6, 2022 •

edited

Loading

zoontek commented Jul 7, 2022 •

edited

Loading

kaorun343 commented Aug 16, 2022 •

edited

Loading

nickserv commented Sep 19, 2022 •

edited

Loading

AndrewLeedham commented Sep 21, 2022

nickserv commented Sep 21, 2022

AndrewLeedham commented Sep 21, 2022

elliottsj commented Sep 30, 2022

haikyuu commented Oct 21, 2022 •

edited

Loading

typeofweb commented Feb 7, 2023

edufarre commented May 17, 2023

madmadi commented May 28, 2023 •

edited

Loading

merlinstardust commented Jun 27, 2023

github-actions bot commented Aug 13, 2023

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

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

Comments

robcaldecott commented Jan 13, 2022

sheremet-va commented Jan 14, 2022 • edited Loading

dancras commented Feb 11, 2022 • edited Loading

larsenwork commented Feb 21, 2022

alamo42 commented Mar 12, 2022

larsenwork commented Mar 14, 2022 • edited Loading

laruiss commented Mar 17, 2022

BPreisner commented Apr 27, 2022

airjp73 commented May 5, 2022

cmacdonnacha commented May 18, 2022

edumudu commented Jun 29, 2022

jsjoeio commented Jul 4, 2022

seivan commented Jul 6, 2022 • edited Loading

zoontek commented Jul 7, 2022 • edited Loading

Installation (yarn)

Installation (npm)

Test setup file

kaorun343 commented Aug 16, 2022 • edited Loading

nickserv commented Sep 19, 2022 • edited Loading

AndrewLeedham commented Sep 21, 2022

nickserv commented Sep 21, 2022

AndrewLeedham commented Sep 21, 2022

elliottsj commented Sep 30, 2022

haikyuu commented Oct 21, 2022 • edited Loading

typeofweb commented Feb 7, 2023

edufarre commented May 17, 2023

madmadi commented May 28, 2023 • edited Loading

merlinstardust commented Jun 27, 2023

github-actions bot commented Aug 13, 2023

sheremet-va commented Jan 14, 2022 •

edited

Loading

dancras commented Feb 11, 2022 •

edited

Loading

larsenwork commented Mar 14, 2022 •

edited

Loading

seivan commented Jul 6, 2022 •

edited

Loading

zoontek commented Jul 7, 2022 •

edited

Loading

kaorun343 commented Aug 16, 2022 •

edited

Loading

nickserv commented Sep 19, 2022 •

edited

Loading

haikyuu commented Oct 21, 2022 •

edited

Loading

madmadi commented May 28, 2023 •

edited

Loading