Jest mock维度未更改

Question

我是第一次做测试，所以我很确定我做错了什么。

我在写测试用例，我的组件在内部做这个。

const {width, height} = Dimensions.get('window')

对于我的测试用例，我正在考虑尺寸为width: 414, height:896的iPhone 11，我希望所有测试用例都保持一致。

React原生测试库，而测试设置宽度为750，高度为1334。

我想把它改成iPhone 11的尺寸，我在网上搜索了一下，找到了用jest.mock来改变功能的文章。

所以我做了这样的操作

it('renders correctly', () => {
jest.mock("Dimensions", () => ({
get: jest.fn().mockReturnValue({ width: 414, height:896 }),
}))

const {getByTestId} = render(<Home />)

Home组件有console.log(width, height)，但它仍然给予宽度为750和高度为1334(因为我的测试用例失败)。

我该如何修复它?

Answer 1

如果您想在每个测试的基础上模拟Dimensions.get的返回值，您可以使用jest.doMock创建以下模拟函数。

const mockDimensions = ({ width, height }) => {
jest.resetModules()
jest.doMock('react-native/Libraries/Utilities/Dimensions', () => ({
get: jest.fn().mockReturnValue({ width, height })
}))
}

然后在测试开始时按如下方式调用它。

it('renders correctly', () => {
mockDimensions({ width: 414, height: 896 })  
const { getByTestId } = render(<Home />)
// Your assertions
})

使用jest.doMock而不是jest.mock来避免提升，这允许我们模拟每个测试的尺寸，而不是全局的。

Answer 2

这在ios上对我很有效

import { Dimensions } from 'react-native';
jest.spyOn(Dimensions, 'get').mockReturnValue({ width: 414, height: 818 });

Answer 3

在测试中，我们覆盖Dimensions

返回的屏幕宽度

const Dimensions = jest.requireActual(
"react-native/Libraries/Utilities/Dimensions"
);
return {
...Dimensions,
get: (param) => {
if (param === "window") {
return {
width: 310,
};
}
},
};
});