javascript - 使用 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”而不必模拟所有的脉轮?
解决方案
您可以使用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,
})),
};
});
推荐阅读
- java - 在java端查找重叠记录
- charts - ReferenceError: google 未在 drawChart 中定义
- r - 如何将多列转换为新列并更改标签?
- android - 如何使用 ffmpeg 构建 .a 文件?
- arrays - 如何使用bash函数获取数组中元素的索引
- java - 即使在更正请求后,也无法在状态 400 错误后再次发送发布请求
- mongodb - $Push 如果对象不存在
- php - Wordpress:如何向 Woocommerce 订单页面添加元素
- node.js - async函数返回空数组,不考虑await?
- excel - 目标列更改为特定文本时复制部分行