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

[robcaldecott]

• @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

[sheremet-va]

Related:

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

[dancras]

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]

@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]

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]

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]

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

[BPreisner]

@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]

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]

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

[edumudu]

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