Chakra ui 使用 useMediaQuery 进行单元测试

Question

我有以下简单测试：

jest.mock("@chakra-ui/react", () => ({
  useMediaQuery: jest.fn().mockImplementation(() => ({
    isMobile: false,
  })),
  chakra: jest.fn(),
}))

describe("TopUp card", () => {
  test("should render correctly", () => {
    const { getByTestId } = render(<TopUp {...propsPhysicalProduct} />)

    expect(getByTestId(testIds.TOP_UP_CARD)).toBeInTheDocument()
    expect(getByTestId("test-id")).toBeInTheDocument()
  })
})

当我运行它时，我得到以下信息：

我怀疑这是因为我一直在尝试模拟组件内部使用的“useMediaQuery”来建立条件。

组件：

export const TopUp: React.FC<Props> = (props) => {
  const { item } = props

  if (!item?.variant) return null

  const [isMobile] = useMediaQuery([hookBreakpoints.mobileMax])
  const binIcon = <BinIcon />

  return (
    <CardLayout
      dataTestId={testIds.TOP_UP_CARD}
      cardContent={
        <>
          <Stack display="flex" flexDirection={isMobile ? "column" : "row"}>
...

有没有办法只模拟“useMediaQuery”而不必模拟所有 Chakra？

Answer 1

您可以使用jest.requireActual(moduleName)

jest.mock("@chakra-ui/react", () => {
  // --> Original module
  const originalModule = jest.requireActual("@chakra-ui/react");

  return {
    __esModule: true,
    ...originalModule,
    useMediaQuery: jest.fn().mockImplementation(() => ({
         isMobile: false,
    })),
  };
});

Chakra ui 使用 useMediaQuery 进行单元测试

Chakra ui unit test with useMediaQuery

javascript

reactjs

chakra-ui