[英]Chakra ui unit test with useMediaQuery
我有以下简单的测试:
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”而不必模拟所有的脉轮?
您可以使用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,
})),
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.