使用 useMediaQuery 进行 Chakra ui 单元测试

如何解决使用 useMediaQuery 进行 Chakra ui 单元测试

我有以下简单的测试：

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？

解决方法

您可以使用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,})),};
});