TypeError: Cannot read properties of undefined (reading 'location')

[kasir-barati]

Summary

Hi, I have a NextJS project + storybook, but the problem with it is that when I start my project it complains about location being undefined and I do not get why, And here I found something similar but not exactly my issue.

Clone the reproducible repo and just do an pnpm i --frozen-lockfile and then just pnpm storybook

Your help and comments are much appreciated

Additional information

Node version: 20.3.1
Npm version: 9.6.7
React version: 18
NextJS version: 14
Storybook version: 7

Create a reproduction

https://github.com/kasir-barati/my-nextjs-journey

[kylegach]

Thank you for sharing a reproduction!

I see that you're using the app directory in Next.js. To use that in Storybook, you need to configure it:

https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs#nextjs-navigation

[kasir-barati]

I just tried to add it but it did not work, I also tried to add it both globally and in the story but no luck; look at my last commit: kasir-barati/my-nextjs-journey@9412f2e

[kylegach]

I cloned and repo and ran it locally. Given your error, I had assumed the error was in the browser, so I was surprised to see that it was actually in the console.

The first few lines are:

TypeError: Cannot read properties of undefined (reading 'location')
    at instrument (/Users/kylegach/projects/my-nextjs-journey/node_modules/.pnpm/@[email protected]([email protected])/node_modules/@storybook/jest/dist/index.js:385:38)
    at Object.<anonymous> (/Users/kylegach/projects/my-nextjs-journey/node_modules/.pnpm/@[email protected]([email protected])/node_modules/@storybook/jest/dist/index.js:392:121)

Which makes me think that the issue is actually in @storybook/jest. The good news is, that package can be replaced with @storybook/test, which you're already using.

I uninstalled that package (and removed it from addons in main.ts)... and now it starts up with no errors! 🎉

[kasir-barati]

JFI dear reader: If you need methods and tools exported from @storybook/jest you can use @storybook/test instead. Read more about @storybook/jest VS @storybook/test here.

[adnan-sheikh]

I'm on "@storybook/test": "^7.6.11", and node v20.11.0

expect is only having 5 properties. I can't see the extended ones like toBeInTheDocument() method

[valentinpalkovic]

@kasperpeulen, @yannbf As mentioned above, expect from @storybook/test doesn't seem to provide the same assertion functions like @storybook/jest did, like toBeInTheDocument. Is this limitation known and communicated?

[kasperpeulen]

@valentinpalkovic @storybook/test has all functionality from @storybook/jest, if not that is a bug. Could you share a repro @adnan-sheikh ?