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]: can't use stories in test file #29991

Open
baixiaoyu2997 opened this issue Dec 9, 2024 · 0 comments
Open

[Bug]: can't use stories in test file #29991

baixiaoyu2997 opened this issue Dec 9, 2024 · 0 comments

Comments

@baixiaoyu2997
Copy link

baixiaoyu2997 commented Dec 9, 2024

Describe the bug

flow the doc: https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/getting-started/material-ui.md

my main.js:

 addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-themes',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    'storybook-addon-pseudo-states', // force component state, eg: `:hover`,`:focus`, not support for nested elements
  ],

and my preview.js:

const preview: Preview = {
  decorators: [
    withThemeFromJSXProvider({
      themes: {
        light: theme,
        dark: theme,
      },
      defaultTheme: 'light',
      Provider: ThemeProvider,
      GlobalStyles: CssBaseline,
    }),
  ],

only use in test file , will show error:

 FAIL  tests/unit/components/basic/Button.test.tsx > Button Component > does not call onClick when loading
TypeError: Cannot read properties of undefined (reading 'palette')
 ❯ src/components/basic/inputs/button/index.tsx:88:36
     86|   },
     87|   ...(['highlight', 'success'].includes(variant) && {
     88|     '--variant-textBg': theme.vars.palette.sys.neutral,
       |                                    ^
     89|     '--variant-textColor': theme.vars.palette.sys['on-neutral'],
     90|     [`& > .${svgIconClasses.root}`]: {

my test file:

import { composeStories, composeStory } from '@storybook/react';
import * as stories from '@/stories/basic/inputs/Button.stories';
import userEvent from '@testing-library/user-event';
const { Loading } = composeStories(stories);

describe('Button Component', () => {
  const mockOnClick = vi.fn();
  beforeEach(() => {
    mockOnClick.mockReset();
  });


  it('does not call onClick when loading', async () => {
    await Loading.run();
    userEvent.click(screen.getByRole('button'));
    expect(mockOnClick).not.toHaveBeenCalled();
  });

when i change to:

it('does not call onClick when loading', async () => {
    // await Loading.run({
    //   args: {
    //     onClick: mockOnClick,
    //   },
    // });
    render(
      <Button onClick={mockOnClick} disabled={true}>
        Loading Button
      </Button>,
    );
    userEvent.click(screen.getByRole('button'));
    expect(mockOnClick).not.toHaveBeenCalled();
  });

it's worked

Reproduction link

sorry, i don't have

Reproduction steps

No response

System

Storybook Environment Info:

  System:
    OS: macOS 14.6.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.10.0 - /usr/local/opt/node@22/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.9.0 - /usr/local/opt/node@22/bin/npm <----- active
    pnpm: 9.13.2 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.4.7 => 8.4.7 
    @storybook/addon-interactions: ^8.4.7 => 8.4.7 
    @storybook/addon-onboarding: ^8.4.7 => 8.4.7 
    @storybook/addon-themes: ^8.4.7 => 8.4.7 
    @storybook/blocks: ^8.4.7 => 8.4.7 
    @storybook/nextjs: ^8.4.7 => 8.4.7 
    @storybook/react: ^8.4.7 => 8.4.7 
    @storybook/test: ^8.4.7 => 8.4.7 
    storybook: ^8.4.7 => 8.4.7 
    storybook-addon-pseudo-states: ^4.0.2 => 4.0.2 



others:  react:  v19 , next: 15.0.4

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant