我有以下简单的测试:
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”而不必模拟所有的脉轮?