Problems with Bun and Happy-DOM? TypeScript complains of Matchers?

[cpt-westphalen]

This started at oven-sh/bun#1825, the Bun repo. This was my answer there, but here it might help others in the same situation.

Problem is TypeScript is not correctly extending the Matcher to the types of jest-dom by itself.

Bellow is my original answer / tutorial:

I'm not experienced at configuring stuff, as you may notice by it, but I kept thinking: if someone's smart enough to code the thing I should be at least smart enough to find out how to use it, lol.

Anyway, for anyone who falls here and needs to know how to configure bun with happy-dom and jest-dom with TypeScript and working code completion, that is how I did it in Vite for working with React:

How to configure Bun + Jest-DOM + Happy DOM in Vite (TypeScript React)

1. Add dependencies with bun add:

   • bun add -D happy-dom @happy-dom/global-registrator @testing-library/jest-dom @types/web

2. Add this key to the compilerOptions in tsconfig.json file:

"types": [
      "bun-types", // add Bun global
      "@testing-library/react", // if with react
      "@testing-library/jest-dom",
      "web"
    ],

3. Create a happydom.ts file inside your src folder with the following (this will be pre-loaded so it works in every test file):

import { GlobalRegistrator } from "@happy-dom/global-registrator";

const oldConsole = console;
GlobalRegistrator.register();
window.console = oldConsole;

import * as matchers from "@testing-library/jest-dom/matchers";
import { expect } from "bun:test";

// Extend the expect object with custom matchers
expect.extend(matchers);

It is ugly, I know. It works, so I'm not touching it again so soon.

5. Add this to the bunfig.toml file (or create a file named bunfig.toml at the root level of the project, next to package.json):

[test]
preload = "./src/happydom.ts"

If you want to place the happydom file somewhere else, just make sure it is being parsed by TypeScript.

6. Create a file in your src folder with whatever name and the .d.ts extension (jest-dom-types.d.ts, for example) and this code:

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

declare module "bun:test" {
  interface Matchers<R = void>
    extends TestingLibraryMatchers<
      typeof expect.stringContaining,
      R
    > {}
  interface AsymmetricMatchers
    extends TestingLibraryMatchers {}
}

7. Import expect as you normally would in your test file:

import { describe, expect, it } from "bun:test";

8. Have blazing fast tests with Testing-Library
   

[dwjohnston]

I've just encountered an issue where this technique, (as well as bun's own guide here) does not work - the matchers will not be added.

Repro for this here: dwjohnston/bun-react-rtl@ab8d456

Essentially need to change:

-expect.extend(matchers);
+expect.extend({...matchers});

Not sure if this is an issue with bun or jest-dom.

[dwjohnston]

I believe this is this issue: oven-sh/bun#16312