在函数上调用 shouldHaveBeenCalled 时，storybook + jest play 方法失败答案

【问题标题】：storybook + jest play method is failing when calling shouldHaveBeenCalled on a function在函数上调用 shouldHaveBeenCalled 时，storybook + jest play 方法失败
【发布时间】：2023-02-07 03:20:32
【问题描述】：

我有这个组件：

import {
  FC,
  ReactElement,
  useState,
  MouseEvent as ReactMouseEvent,
  ChangeEvent as ReactChangeEvent,
} from 'react';

import { Stack, TablePagination } from '@mui/material';

export const Pagination: FC<IPaginationProps> = ({
  total,
  page = 1,
  rowsPerPage = 25,
  position = 'start',
  rowsPerPageOptions = [10, 25, 50, 100],
  onPageChange,
  onRowsPerPageChange,
}): ReactElement => {
  const [localPage, setPage] = useState(page);
  const [localRowsPerPage, setRowsPerPage] = useState(rowsPerPage);

  const handleChangePage = (event: ReactMouseEvent<HTMLButtonElement> | null, newPage: number) => {
    setPage(newPage);
    onPageChange({ page: newPage, total, rowsPerPage: localRowsPerPage });
  };

  const handleChangeRowsPerPage = (
    event: ReactChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    const perPage = parseInt(event.target.value, 10);
    setRowsPerPage(perPage);
    setPage(0);
    onRowsPerPageChange({ page: 0, total, rowsPerPage: perPage });
  };

  return (
    <Stack direction="row" justifyContent={`flex-${position}`}>
      <TablePagination
        component="div"
        showFirstButton
        showLastButton
        count={total}
        page={localPage}
        onPageChange={handleChangePage}
        rowsPerPage={localRowsPerPage}
        onRowsPerPageChange={handleChangeRowsPerPage}
        rowsPerPageOptions={rowsPerPageOptions}
      />
    </Stack>
  );
};

我为它写了一个故事：

export default {
  title: 'Components/Pagination',
  component: Pagination,
  parameters: {
    actions: {
      handles: ['click'],
    },
  },
  args: {
    total: 100,
    page: 1,
    onPageChange: ({ page }) => {
      // eslint-disable-next-line no-console
      console.log({ page });
    },
    onRowsPerPageChange: ({ rowsPerPage }) => {
      // eslint-disable-next-line no-console
      console.log({ rowsPerPage });
    },
  },
  decorators: [
    (Story) => (
      <div style={{ margin: '3em', boxShadow: '7px 5px 14px -8px rgba(0,0,0,0.55)' }}>
        {Story()}
      </div>
    ),
  ],
} as ComponentMeta<typeof Pagination>;


const Template: ComponentStory<typeof Pagination> = ({ ...args }) => <Pagination {...args} />;

export const Default = Template.bind({});
Default.play = async ({ canvasElement, args }) => {
  const onPageChangeSpy = jest.spyOn(args, 'onPageChange');
  const canvas = await within(canvasElement);

  const prevBtn = canvas.getByLabelText('Go to previous page');
  await userEvent.click(prevBtn);
  await expect(onPageChangeSpy).toHaveBeenCalled();
};

我可以看到按钮被点击了，onPageChange 被调用了，因为分页相应地改变了，但是测试失败了：

预期调用次数：>= 1

接听电话数：0

最奇怪的是，如果我在故事书的交互选项卡中单击重新运行，一切正常。

【问题讨论】：

标签： reactjs typescript jestjs material-ui storybook

【解决方案1】：

称之为愚蠢，但我意识到只是改变toHaveBeenCalled();到toHaveBeenCalled;工作了。

【讨论】：

【解决方案2】：

我也有同样的问题，每当我重新加载页面时它也会消失。我搜索了其他 stackoverflow 表单，他们说使用 shallow 和 wrapper 但不太确定如何去做。

Jest: Received number of calls: 0

【讨论】：

请不要添加我也是作为答案。它实际上并没有提供问题的答案。如果您有不同但相关的问题，请ask它（如果它有助于提供上下文，请参考此问题）。如果你对这个具体问题感兴趣，你可以upvote它，留下comment，或者一旦你有足够的reputation就开始bounty。