diff --git a/README.md b/README.md index bd13d94..9b8d70f 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/package.json b/package.json index 5da3d9f..3c8332c 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,14 @@ "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" @@ -21,7 +29,7 @@ "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" }, diff --git a/src/index.ts b/src/index.ts index 73cf5d5..68e1cb5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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 }; diff --git a/tsup.config.ts b/tsup.config.ts index c41b313..7eca1a7 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -17,6 +17,6 @@ export default defineConfig({ dts: { entry: ['./src/index.ts'], resolve: true, - banner: '/// ', + banner: '/// \n/// ', }, }); diff --git a/yarn.lock b/yarn.lock index 33cfc7d..dd76625 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5,7 +5,7 @@ __metadata: version: 6 cacheKey: 8 -"@adobe/css-tools@npm:^4.0.1": +"@adobe/css-tools@npm:^4.3.0": version: 4.3.1 resolution: "@adobe/css-tools@npm:4.3.1" checksum: ad43456379ff391132aff687ece190cb23ea69395e23c9b96690eeabe2468da89a4aaf266e4f8b6eaab53db3d1064107ce0f63c3a974e864f4a04affc768da3f @@ -260,15 +260,6 @@ __metadata: languageName: node linkType: hard -"@jest/expect-utils@npm:^29.6.3": - version: 29.6.3 - resolution: "@jest/expect-utils@npm:29.6.3" - dependencies: - jest-get-type: ^29.6.3 - checksum: aeb0c2a485df09fdb51f866d58e232010cde888a7e6e1f9b395df236918e09e98407eb8281a3d41d2b115d9ff740d100b75100d521717ba903abeacb26e2a192 - languageName: node - linkType: hard - "@jest/schemas@npm:^28.1.3": version: 28.1.3 resolution: "@jest/schemas@npm:28.1.3" @@ -278,15 +269,6 @@ __metadata: languageName: node linkType: hard -"@jest/schemas@npm:^29.6.3": - version: 29.6.3 - resolution: "@jest/schemas@npm:29.6.3" - dependencies: - "@sinclair/typebox": ^0.27.8 - checksum: 910040425f0fc93cd13e68c750b7885590b8839066dfa0cd78e7def07bbb708ad869381f725945d66f2284de5663bbecf63e8fdd856e2ae6e261ba30b1687e93 - languageName: node - linkType: hard - "@jest/types@npm:^27.5.1": version: 27.5.1 resolution: "@jest/types@npm:27.5.1" @@ -300,20 +282,6 @@ __metadata: languageName: node linkType: hard -"@jest/types@npm:^29.6.3": - version: 29.6.3 - resolution: "@jest/types@npm:29.6.3" - dependencies: - "@jest/schemas": ^29.6.3 - "@types/istanbul-lib-coverage": ^2.0.0 - "@types/istanbul-reports": ^3.0.0 - "@types/node": "*" - "@types/yargs": ^17.0.8 - chalk: ^4.0.0 - checksum: a0bcf15dbb0eca6bdd8ce61a3fb055349d40268622a7670a3b2eb3c3dbafe9eb26af59938366d520b86907b9505b0f9b29b85cec11579a9e580694b87cd90fcc - languageName: node - linkType: hard - "@jridgewell/gen-mapping@npm:^0.3.2": version: 0.3.3 resolution: "@jridgewell/gen-mapping@npm:0.3.3" @@ -579,13 +547,6 @@ __metadata: languageName: node linkType: hard -"@sinclair/typebox@npm:^0.27.8": - version: 0.27.8 - resolution: "@sinclair/typebox@npm:0.27.8" - checksum: 00bd7362a3439021aa1ea51b0e0d0a0e8ca1351a3d54c606b115fdcc49b51b16db6e5f43b4fe7a28c38688523e22a94d49dd31168868b655f0d4d50f032d07a1 - languageName: node - linkType: hard - "@storybook/channels@npm:7.4.0-alpha.2": version: 7.4.0-alpha.2 resolution: "@storybook/channels@npm:7.4.0-alpha.2" @@ -628,11 +589,11 @@ __metadata: linkType: hard "@storybook/expect@npm:storybook-jest": - version: 27.5.2-0 - resolution: "@storybook/expect@npm:27.5.2-0" + version: 28.1.3-5 + resolution: "@storybook/expect@npm:28.1.3-5" dependencies: - "@types/jest": ">=26.0.0" - checksum: 09738a8f8e0b9d3d5a909c80ce0c101080cf376316ceca1f3820e88877d6b5ef92abd847b4c4a4e9687c43c2168a6e3e8cdd74947b6af622688797f74cf523df + "@types/jest": 28.1.3 + checksum: db2bf47d92dc5de97793f98bd12ebc9ca10c1afffbd27c38c268200ab186c75808c9a246a07838c5516229351e31cc47338f950bc918521dfd80efbb5239ed59 languageName: node linkType: hard @@ -665,7 +626,7 @@ __metadata: "@storybook/expect": storybook-jest "@storybook/instrumenter": next "@storybook/linter-config": ^3.1.2 - "@testing-library/jest-dom": ^5.16.2 + "@testing-library/jest-dom": ^6.1.2 "@types/jest": 28.1.3 "@types/react": "*" auto: ^10.37.6 @@ -739,20 +700,33 @@ __metadata: languageName: node linkType: hard -"@testing-library/jest-dom@npm:^5.16.2": - version: 5.17.0 - resolution: "@testing-library/jest-dom@npm:5.17.0" +"@testing-library/jest-dom@npm:^6.1.2": + version: 6.1.2 + resolution: "@testing-library/jest-dom@npm:6.1.2" dependencies: - "@adobe/css-tools": ^4.0.1 + "@adobe/css-tools": ^4.3.0 "@babel/runtime": ^7.9.2 - "@types/testing-library__jest-dom": ^5.9.1 aria-query: ^5.0.0 chalk: ^3.0.0 css.escape: ^1.5.1 dom-accessibility-api: ^0.5.6 lodash: ^4.17.15 redent: ^3.0.0 - checksum: 9f28dbca8b50d7c306aae40c3aa8e06f0e115f740360004bd87d57f95acf7ab4b4f4122a7399a76dbf2bdaaafb15c99cc137fdcb0ae457a92e2de0f3fbf9b03b + peerDependencies: + "@jest/globals": ">= 28" + "@types/jest": ">= 28" + jest: ">= 28" + vitest: ">= 0.32" + peerDependenciesMeta: + "@jest/globals": + optional: true + "@types/jest": + optional: true + jest: + optional: true + vitest: + optional: true + checksum: de6b7f98d1b42887192eb70fd917b2b98d92aab22a86801718de75e0ca4964589335efeb650b0f7b9859609446b20d2bd81bfc5755f1655885d5664d1c093a70 languageName: node linkType: hard @@ -931,16 +905,6 @@ __metadata: languageName: node linkType: hard -"@types/jest@npm:*, @types/jest@npm:>=26.0.0": - version: 29.5.4 - resolution: "@types/jest@npm:29.5.4" - dependencies: - expect: ^29.0.0 - pretty-format: ^29.0.0 - checksum: 38ed5942f44336452efd0f071eab60aaa57cd8d46530348d0a3aa5a691dcbf1366c4ca8f6ee8364efb45b4413bfefae443e5d4f469246a472a03b21ac11cd4ed - languageName: node - linkType: hard - "@types/jest@npm:28.1.3": version: 28.1.3 resolution: "@types/jest@npm:28.1.3" @@ -1076,15 +1040,6 @@ __metadata: languageName: node linkType: hard -"@types/testing-library__jest-dom@npm:^5.9.1": - version: 5.14.9 - resolution: "@types/testing-library__jest-dom@npm:5.14.9" - dependencies: - "@types/jest": "*" - checksum: d364494fc2545316292e88861146146af1e3818792ca63b62a63758b2f737669b687f4aaddfcfbcb7d0e1ed7890a9bd05de23ff97f277d5e68de574497a9ee72 - languageName: node - linkType: hard - "@types/unist@npm:^2, @types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2": version: 2.0.7 resolution: "@types/unist@npm:2.0.7" @@ -1108,15 +1063,6 @@ __metadata: languageName: node linkType: hard -"@types/yargs@npm:^17.0.8": - version: 17.0.24 - resolution: "@types/yargs@npm:17.0.24" - dependencies: - "@types/yargs-parser": "*" - checksum: 5f3ac4dc4f6e211c1627340160fbe2fd247ceba002190da6cf9155af1798450501d628c9165a183f30a224fc68fa5e700490d740ff4c73e2cdef95bc4e8ba7bf - languageName: node - linkType: hard - "@typescript-eslint/eslint-plugin@npm:^4.27.0": version: 4.33.0 resolution: "@typescript-eslint/eslint-plugin@npm:4.33.0" @@ -1825,13 +1771,6 @@ __metadata: languageName: node linkType: hard -"ci-info@npm:^3.2.0": - version: 3.8.0 - resolution: "ci-info@npm:3.8.0" - checksum: d0a4d3160497cae54294974a7246202244fff031b0a6ea20dd57b10ec510aa17399c41a1b0982142c105f3255aff2173e5c0dd7302ee1b2f28ba3debda375098 - languageName: node - linkType: hard - "clean-stack@npm:^2.0.0": version: 2.2.0 resolution: "clean-stack@npm:2.2.0" @@ -2127,13 +2066,6 @@ __metadata: languageName: node linkType: hard -"diff-sequences@npm:^29.6.3": - version: 29.6.3 - resolution: "diff-sequences@npm:29.6.3" - checksum: f4914158e1f2276343d98ff5b31fc004e7304f5470bf0f1adb2ac6955d85a531a6458d33e87667f98f6ae52ebd3891bb47d420bb48a5bd8b7a27ee25b20e33aa - languageName: node - linkType: hard - "diff@npm:^4.0.1": version: 4.0.2 resolution: "diff@npm:4.0.2" @@ -2991,19 +2923,6 @@ __metadata: languageName: node linkType: hard -"expect@npm:^29.0.0": - version: 29.6.3 - resolution: "expect@npm:29.6.3" - dependencies: - "@jest/expect-utils": ^29.6.3 - jest-get-type: ^29.6.3 - jest-matcher-utils: ^29.6.3 - jest-message-util: ^29.6.3 - jest-util: ^29.6.3 - checksum: c72de87abbc9acc17c66f42fcac8be4dff256f871f1800c3aaa004c74f95f61866cf80e8f2ddacc3f2df290fd58b0cba8adb3a0dee3a09dd5d39f97f63d2aae8 - languageName: node - linkType: hard - "exponential-backoff@npm:^3.1.1": version: 3.1.1 resolution: "exponential-backoff@npm:3.1.1" @@ -4094,18 +4013,6 @@ __metadata: languageName: node linkType: hard -"jest-diff@npm:^29.6.3": - version: 29.6.3 - resolution: "jest-diff@npm:29.6.3" - dependencies: - chalk: ^4.0.0 - diff-sequences: ^29.6.3 - jest-get-type: ^29.6.3 - pretty-format: ^29.6.3 - checksum: 23b0a88efeab36566386f059f3da340754d2860969cbc34805154e2377714e37e3130e21a791fc68008fb460bbf5edd7ec43c16d96d15797b32ccfae5160fe37 - languageName: node - linkType: hard - "jest-get-type@npm:^27.5.1": version: 27.5.1 resolution: "jest-get-type@npm:27.5.1" @@ -4120,13 +4027,6 @@ __metadata: languageName: node linkType: hard -"jest-get-type@npm:^29.6.3": - version: 29.6.3 - resolution: "jest-get-type@npm:29.6.3" - checksum: 88ac9102d4679d768accae29f1e75f592b760b44277df288ad76ce5bf038c3f5ce3719dea8aa0f035dac30e9eb034b848ce716b9183ad7cc222d029f03e92205 - languageName: node - linkType: hard - "jest-matcher-utils@npm:^27.5.1": version: 27.5.1 resolution: "jest-matcher-utils@npm:27.5.1" @@ -4151,18 +4051,6 @@ __metadata: languageName: node linkType: hard -"jest-matcher-utils@npm:^29.6.3": - version: 29.6.3 - resolution: "jest-matcher-utils@npm:29.6.3" - dependencies: - chalk: ^4.0.0 - jest-diff: ^29.6.3 - jest-get-type: ^29.6.3 - pretty-format: ^29.6.3 - checksum: d4965d5cc079799bc0a9075daea7a964768d4db55f0388ef879642215399c955ae9a22c967496813c908763b487f97e40701a1eb4ed5b0b7529c447b6d33e652 - languageName: node - linkType: hard - "jest-message-util@npm:^27.5.1": version: 27.5.1 resolution: "jest-message-util@npm:27.5.1" @@ -4180,23 +4068,6 @@ __metadata: languageName: node linkType: hard -"jest-message-util@npm:^29.6.3": - version: 29.6.3 - resolution: "jest-message-util@npm:29.6.3" - dependencies: - "@babel/code-frame": ^7.12.13 - "@jest/types": ^29.6.3 - "@types/stack-utils": ^2.0.0 - chalk: ^4.0.0 - graceful-fs: ^4.2.9 - micromatch: ^4.0.4 - pretty-format: ^29.6.3 - slash: ^3.0.0 - stack-utils: ^2.0.3 - checksum: 59f5229a06c073a8877ba4d2e304cc07d63b0062bf5764d4bed14364403889e77f1825d1bd9017c19a840847d17dffd414dc06f1fcb537b5f9e03dbc65b84ada - languageName: node - linkType: hard - "jest-mock@npm:^27.3.0": version: 27.5.1 resolution: "jest-mock@npm:27.5.1" @@ -4207,20 +4078,6 @@ __metadata: languageName: node linkType: hard -"jest-util@npm:^29.6.3": - version: 29.6.3 - resolution: "jest-util@npm:29.6.3" - dependencies: - "@jest/types": ^29.6.3 - "@types/node": "*" - chalk: ^4.0.0 - ci-info: ^3.2.0 - graceful-fs: ^4.2.9 - picomatch: ^2.2.3 - checksum: 7bf3ba3ac67ac6ceff7d8fdd23a86768e23ddd9133ecd9140ef87cc0c28708effabaf67a6cd45cd9d90a63d645a522ed0825d09ee59ac4c03b9c473b1fef4c7c - languageName: node - linkType: hard - "joycon@npm:^3.0.1": version: 3.1.1 resolution: "joycon@npm:3.1.1" @@ -5228,7 +5085,7 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1": +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf @@ -5325,17 +5182,6 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^29.0.0, pretty-format@npm:^29.6.3": - version: 29.6.3 - resolution: "pretty-format@npm:29.6.3" - dependencies: - "@jest/schemas": ^29.6.3 - ansi-styles: ^5.0.0 - react-is: ^18.0.0 - checksum: 4e1c0db48e65571c22e80ff92123925ff8b3a2a89b71c3a1683cfde711004d492de32fe60c6bc10eea8bf6c678e5cbe544ac6c56cb8096e1eb7caf856928b1c4 - languageName: node - linkType: hard - "pretty-ms@npm:^7.0.0": version: 7.0.1 resolution: "pretty-ms@npm:7.0.1"