Skip to content
This repository has been archived by the owner on May 16, 2024. It is now read-only.

Update @testing-library/jest-dom to v6 #42

Merged
merged 9 commits into from
Aug 29, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 1 addition & 43 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,4 @@

Storybook integration for Jest, instrumented for use with the [Interactions addon](https://github.com/storybookjs/storybook/blob/next/code/addons/interactions/README.md).

## FAQ

### Typescript does not recognize expect().toBeInTheDocument()

This is likely an issue with newer package managers.

The `@storybook/jest` package provides some type augmentations so that `expect` has extended matchers coming from Testing Library. The way it works, is that `@storybook/jest` depends on `@testing-library/jest-dom`, a package that depends on `@types/testing-library__jest-dom`. That @types package should be hoisted in your project in order for your types to fully work. As a result, you should have a `node_modules/@types/testing-library__jest-dom` directory. If you don't, then the types won't exist and that's why you're having issues.

For instance, if you have a yarn project, hoisting happens automatically. However if you're using **pnpm**, `@types` are not hoisted automatically, you will have to add a `.npmrc` file with the following setting:

```js
// .npmrc
public-hoist-pattern[]=@types*
```

Otherwise, installing `@types/testing-library__jest-dom` as a direct dependency should have the same effect and fix your issue.

If you are still experiencing issues after making these changes, it's very likely that your `tsconfig.json` file contains specific type overrides, which means that it will ignore automatic types, for instance:

```json
{
"compilerOptions": {
"types": [
"node",
"mocha",
]
}
}
```

In that case, make sure to add `testing-library__jest-dom` to the `types` array:

```json
{
"compilerOptions": {
"types": [
"node",
"mocha",
"testing-library__jest-dom"
]
}
}
```
[jest-dom](https://github.com/testing-library/jest-dom) matchers are automatically included as well.
10 changes: 9 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,22 @@
"files": [
"dist/**/*"
],
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.js",
"types": "./dist/index.d.ts"
},
"./package.json": "./package.json"
},
"scripts": {
"build": "tsup",
"release": "yarn build && auto shipit"
},
"sideEffects": false,
"dependencies": {
"@storybook/expect": "storybook-jest",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/jest-dom": "^6.1.2",
"@types/jest": "28.1.3",
"jest-mock": "^27.3.0"
},
Expand Down
13 changes: 1 addition & 12 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,6 @@ const expect = instrument(
{ intercept: (_method, path) => path[0] !== 'expect' }
).expect as unknown as Expect;

// @TODO: This should be reverted once https://github.com/testing-library/jest-dom/pull/438 is merged
// Some bundlers include an undefined `default` in the namespace import,
// or __esmodule (a boolean) which cause expect.extend to throw.
const validMatchers = { ...matchers };
Object.keys(validMatchers).forEach((matcherName) => {
const matcher = validMatchers[matcherName];
if (typeof matcher === 'undefined' || typeof matcher === 'boolean') {
delete validMatchers[matcherName];
}
});

expect.extend(validMatchers);
expect.extend(matchers);

export { expect, jest };
2 changes: 1 addition & 1 deletion tsup.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@ export default defineConfig({
dts: {
entry: ['./src/index.ts'],
resolve: true,
banner: '/// <reference types="jest" />',
banner: '/// <reference types="jest" />\n/// <reference types="@testing-library/jest-dom" />',
},
});
Loading