storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.55k stars 9.3k forks source link

[Bug]: @storybook/addon-storyshots TypeError: Cannot read properties of undefined (reading 'location') #21311

Closed stevepond closed 1 year ago

stevepond commented 1 year ago

Describe the bug

Following documents for storybook@next v7*, in a NextJS13 Project.
Getting the following when running the initial test to capture screenshots from stories.

yarn test storybook.test.js
TypeError: Cannot read properties of undefined (reading 'location')

      at getSelectionSpecifierFromPath (node_modules/@storybook/preview-api/dist/index.js:67:1115)
      at new UrlStore (node_modules/@storybook/preview-api/dist/index.js:67:1627)
      at new PreviewWeb (node_modules/@storybook/preview-api/dist/index.js:70:1158)
      at Object.start (node_modules/@storybook/preview-api/dist/index.js:83:2133)
      at start (node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:18:45)
      at Object.<anonymous> (node_modules/@storybook/react/dist/index.js:1:3027)

package.json

    "dependencies": {
    "@tanstack/react-table": "^8.7.9",
    "@types/node": "18.14.2",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.35.0",
    "eslint-config-next": "13.2.1",
    "flowbite": "^1.6.3",
    "flowbite-react": "^0.3.8",
    "next": "13.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "^3.2.7",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.0.0-beta.56",
    "@storybook/addon-interactions": "^7.0.0-beta.56",
    "@storybook/addon-links": "^7.0.0-beta.56",
    "@storybook/addon-storyshots": "^7.0.0-beta.57",
    "@storybook/blocks": "^7.0.0-beta.57",
    "@storybook/jest": "^0.0.11-next.0",
    "@storybook/nextjs": "^7.0.0-beta.56",
    "@storybook/react": "^7.0.0-beta.56",
    "@storybook/test-runner": "^0.10.0-next.8",
    "@storybook/testing-library": "^0.0.14-next.1",
    "@testing-library/react": "^14.0.0",
    "autoprefixer": "^10.4.13",
    "babel-jest": "^29.4.3",
    "eslint-plugin-storybook": "^0.6.11",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "storybook": "^7.0.0-beta.56",
    "ts-jest": "^29.0.5"
  }

storybook.test.js

      // storybook.test.js
      import initStoryshots from "@storybook/addon-storyshots";
      initStoryshots();

To Reproduce

No response

System

No response

Additional context

No response

shilman commented 1 year ago

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

Also FYI we're planning to deprecate Storyshots and transition users to the Test runner or other options. Expect a migration guide soon, but Storyshots will be available until 8.0 at least.

vfa-tuanva commented 1 year ago

@stevepond, update 'testEnvironment' in jest.config.js from 'node' to 'jsdom', it try to get Document object from 'jsdom' but your test environment is 'node', so it throw an undefined error { 'testEnvironment': 'jsdom' }

But as @shilman mentioned above, I suggest that you should use Test runner, it is easier to config and also support DOM Snapshot

manuartero commented 1 year ago

Same issue here, this is my package.json, in our case: React (ts) + Vite + Storybook + Storyshots

"devDependencies": {
    "@storybook/addon-actions": "^7.0.26",
    "@storybook/addon-docs": "^7.0.26",
    "@storybook/addon-links": "^7.0.26",
    "@storybook/addon-storyshots": "^7.0.27",
    "@storybook/addon-storyshots-puppeteer": "^7.0.27",
    "@storybook/addons": "^7.0.26",
    "@storybook/react": "^7.0.26",
    "@storybook/react-vite": "^7.0.26",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/react-hooks": "^8.0.1",
    "@testing-library/user-event": "^14.4.3",
    ...
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.6.1",
    "jest-environment-jsdom": "^29.6.1",
    "jest-transform-stub": "^2.0.0",
    "prettier": "2.2.1",
    "puppeteer": "^8.0.0",
    "react-test-renderer": "18.1.0",
    "sass": "^1.32.8",
    "storybook": "^7.0.26",
    "ts-jest": "^29.1.1",
    "typescript": "^4.2.4",
    "vite": "^4.4.2",
    "vite-plugin-svgr": "^3.2.0",
    "vite-tsconfig-paths": "^4.2.0"
  },

at jest.config we've already added testEnvironment: 'jsdom'

This is our current storyshots.test.js

import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

/**
 * issue related to React 18
 *  -> need react-test-renderer 18.1.0
 * @see https://github.com/storybookjs/storybook/issues/17985
 * ---
 * @see https://github.com/storybookjs/storybook/issues/21311
 */

initStoryshots({ test: imageSnapshot() });

raising this error:

$ jest --verbose --collectCoverage=false storyshots
 FAIL  src/storyshots.test.js
  ● Test suite failed to run

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

       8 |  */
       9 |
    > 10 | initStoryshots({ test: imageSnapshot() });
         |               ^
      11 |

      at node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:25:49
      at Object.load (node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:30:23)
      at loadFramework (node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:36:19)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/api/index.js:28:99)
      at Object.<anonymous> (src/storyshots.test.js:1
manuartero commented 1 year ago

( CC @stevepond )

I solved this upgrading storybook to 7.1.0 (right now we're using 7.1.0-rc.2) UPDATED TO STABLE

package.json

    "@storybook/addon-actions": "7.1.0-rc.2",
    "@storybook/addon-docs": "7.1.0-rc.2",
    "@storybook/addon-links": "7.1.0-rc.2",
    "@storybook/addon-storyshots-puppeteer": "7.1.0-rc.2",
    "@storybook/addon-storyshots": "7.1.0-rc.2",
    "@storybook/addons": "7.1.0-rc.2",
    "@storybook/react": "7.1.0-rc.2",
    "@storybook/react-vite": "7.1.0-rc.2",
    ...
    "storybook": "7.1.0-rc.2",

this is our current storyshots.test.js

import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

initStoryshots({
  test: imageSnapshot({
    storybookUrl: process.env.STORYBOOK_URL || 'http://localhost:6006',
    getMatchOptions: () => ({ failureThreshold: 0.1 }),
  }),
});
github-actions[bot] commented 1 year ago

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

github-actions[bot] commented 1 year ago

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.