Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: @storybook/testing-library does not work with with Next v13.5.1 & @storybook/nextjs out of the box #24304

Closed
kodai3 opened this issue Sep 26, 2023 · 0 comments

Comments

@kodai3
Copy link

kodai3 commented Sep 26, 2023

Describe the bug

After upgrading to Next v13.5.1 & @storybook/* v7.4.5 all test fails.

● Test suite failed to run

    Cannot find module 'next/dist/shared/lib/head-manager-context' from 'node_modules/@storybook/nextjs/dist/preview.js'

    Require stack:
      node_modules/@storybook/nextjs/dist/preview.js
      setupFiles.js

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.<anonymous> (node_modules/@storybook/nextjs/dist/preview.js:1:6062)

To Reproduce

Setup jest test using @storybook/testing-library and @storybook/nextjs with latest next.js.

System

Environment Info:

  System:
    OS: macOS 13.5.2
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Safari: 16.6
  npmPackages:
    @storybook/addon-a11y: 7.4.5 => 7.4.5
    @storybook/addon-coverage: 0.0.9 => 0.0.9
    @storybook/addon-essentials: 7.4.5 => 7.4.5
    @storybook/addon-interactions: 7.4.5 => 7.4.5
    @storybook/addon-links: 7.4.5 => 7.4.5
    @storybook/addon-styling-webpack: 0.0.4 => 0.0.4
    @storybook/addon-themes: 7.4.5 => 7.4.5
    @storybook/addons: 7.4.5 => 7.4.5
    @storybook/jest: 0.2.2 => 0.2.2
    @storybook/nextjs: 7.4.5 => 7.4.5
    @storybook/react: 7.4.5 => 7.4.5
    @storybook/testing-library: 0.2.1 => 0.2.1

Additional context

lalated to #24234

the fix introduced here won't work with jest.

I can workaround by modifying jest.config.js like this

module.exports = createJestConfig({
  moduleNameMapper: {
    // https://github.com/vercel/next.js/issues/47866
    // You have to specify the complete path to preview.ts for it ot be taken into account as a module
    '\\.storybook/preview': '<rootDir>/.storybook/preview.ts',

    + // the workaround for next 13.5
    + 'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context.shared-runtime',
    + 'next/dist/shared/lib/head-manager-context': 'next/dist/shared/lib/head-manager-context.shared-runtime',
    + 'next/dist/shared/lib/app-router-context': 'next/dist/shared/lib/app-router-context.shared-runtime',
    + 'next/dist/shared/lib/hooks-client-context': 'next/dist/shared/lib/hooks-client-context.shared-runtime',
  },
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['./jest.setup.js'],
  testMatch: ['**/*.test.ts', '**/*.test.tsx'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

No branches or pull requests

2 participants