[Bug]: TypeError: expect.extend error in Jest when using @storybook/jest's expect() in related stories

[raybrownco]

Describe the bug

I've run into an interesting bug related to the composeStories() method from @storybook/react, the expect() method from @storybook/jest@0.2.2, and Jest test suites that consume Storybook stories. This bug affects several of my company's front-end projects, each of which is a TypeScript React project that uses Jest/RTL for unit tests. I've narrowed down the bug to an isolated experience, which I've been able to reproduce in StackBlitz.

The issue occurs when:

1. A Storybook story contains a Play function that uses @storybook/jest's expect method, starting with @storybook/jestv0.2.2
2. A related Jest test suite consumes the stories via the composeStories method
3. The Jest test suite asserts anything (via Jest's own expect() method) on the Play function stories

Please see the reproduction instructions and system info below. If you need any other information, please let me know - I'd love to help in any way that I can!

To Reproduce

1. Open the bug reproduction environment at StackBlitz: https://stackblitz.com/edit/github-zkbzqu-a4ljfz?file=README.md
2. Run yarn to install dependencies (if needed - this should happen automatically)
3. Run yarn storybook and wait for the UI to load
4. Navigate to Components/Foo in the Storybook sidebar
5. Note that the "Adding Apples" and "Removing Apples" stories contain passing Storybook interaction tests
6. Stop the Storybook process and run yarn test
7. Note that the test suite fails with the following error:

   TypeError: expect.extend: `default` is not a valid matcher. Must be a function, is "object"
   

8. Open the file at src/foo-component/index.stories.tsx
9. Comment out all lines that begin with await expect (there should be six of them, all within the Play functions)
10. Save the file and re-run yarn test
11. Verify that the test suite passes

System

Environment Info:
  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-a11y: ^7.4.2 => 7.4.2 
    @storybook/addon-actions: ^7.4.2 => 7.4.2 
    @storybook/addon-essentials: ^7.4.2 => 7.4.2 
    @storybook/addon-interactions: ^7.4.2 => 7.4.2 
    @storybook/addon-links: ^7.4.2 => 7.4.2 
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8 
    @storybook/blocks: ^7.4.2 => 7.4.2 
    @storybook/jest: ^0.2.2 => 0.2.2 
    @storybook/react: ^7.4.2 => 7.4.2 
    @storybook/react-webpack5: ^7.4.2 => 7.4.2 
    @storybook/testing-library: ^0.2.1 => 0.2.1

Additional context

No response

[kasir-barati]

Same problem, I just have written a bunch of stories exactly like the official doc says, e.x. https://storybook.js.org/docs/react/writing-stories/play-function

here is the log:

TypeError: Cannot read properties of undefined (reading 'location')
    at instrument (/path/to/project1/node_modules/@storybook/jest/dist/index.js:385:37)
    at Object.<anonymous> (/path/to/project1/node_modules/@storybook/jest/dist/index.js:392:121)
    at Module._compile (node:internal/modules/cjs/loader:1257:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1311:10)
    at Object.newLoader (/path/to/project1/node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (/path/to/project1/node_modules/esbuild-register/dist/node.js:4807:24)
    at Module.load (node:internal/modules/cjs/loader:1115:32)
    at Module._load (node:internal/modules/cjs/loader:962:12)
    at Module.require (node:internal/modules/cjs/loader:1139:19)
    at require (node:internal/modules/helpers:121:18)    
WARN   Failed to load preset: {"type":"presets","name":"/path/to/project1/node_modules/@storybook/jest/dist/index.js"} on level 1
TypeError: expect.extend: `default` is not a valid matcher. Must be a function, is "object"
    at ./node_modules/@storybook/expect/dist/index.js:1:132723
    at Array.forEach (<anonymous>)
    at t.setMatchers (./node_modules/@storybook/expect/dist/index.js:1:132667)
    at v.extend (./node_modules/@storybook/expect/dist/index.js:1:130447)
    at Object.<anonymous> (./node_modules/@storybook/jest/dist/index.js:396:8)
    at Module._compile (node:internal/modules/cjs/loader:1257:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1311:10)
    at Object.newLoader (./node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (./node_modules/esbuild-register/dist/node.js:4807:24)
    at Module.load (node:internal/modules/cjs/loader:1115:32)

[raybrownco]

A temporary fix (until this issue is resolved) is to pin @storybook/jest to v0.2.1 in package.json:

- "@storybook/jest": "^0.2.2",
+ "@storybook/jest": "0.2.1",

[nodegin]

same here

[kasperpeulen]

@IanVS Do you have any idea about this?
I guess this bug is introduced in:
storybookjs/jest#42

@raybrownco Could you check if 0.2.3 solves the problem?

[raybrownco]

@kasperpeulen I'm working at a different org now, so I don't have access to the projects that I originally ran into this issue with. However, I just opened the Stackblitz repro and updated the version from ^0.2.1 to 0.2.3 - looks like the issue is indeed fixed there.

[kasir-barati]

@raybrownco @kasperpeulen @nodegin @IanVS I guess this issue can be closed, not sure thought if they are 100% same issue. Look at this discussion here: #25093

[raybrownco]

I just tested this issue again with @storybook/jest@0.2.3 and it is resolved. I'm closing the issue now. Thanks, all!