Jest mock React Native Dimensions模块返回尺寸不生效如何解决？

问题根源 #

• jest.mock 不能放在it/test用例块内部，jest的模块mock会被自动提升到当前文件所有导入语句之前，写在用例内的mock不会生效。
• 如果你是在测试文件顶部导入Home组件，组件顶层的Dimensions.get('window')会在模块加载时立刻执行，拿到默认尺寸，后续再执行mock也不会更新已经计算完成的宽高变量。

解决方案 #

方案1：全局统一固定尺寸（适配所有测试用例统一用iPhone11参数的需求） #

直接在jest全局配置的启动文件（通常为jest-setup.js，或package.json中jest.setupFilesAfterEnv指定的文件）中添加mock，所有测试运行前就会替换默认的Dimensions逻辑：

jest.mock('react-native', () => {
  const originalRN = jest.requireActual('react-native')
  return {
    ...originalRN,
    Dimensions: {
      ...originalRN.Dimensions,
      get: jest.fn((type) => {
        if (type === 'window') return { width: 414, height: 896 }
        // 保留screen维度的默认逻辑，按需修改即可
        return originalRN.Dimensions.get(type)
      })
    }
  }
})

如果只需要单个测试文件生效，把上述mock代码放在该测试文件的最顶部，所有import语句之前即可。

方案2：灵活适配多尺寸测试（更推荐） #

React Native官方已推荐使用useWindowDimensions Hook替代顶层调用Dimensions.get的写法，天然支持窗口尺寸变化，也更方便测试：

1. 调整Home组件代码：

// 删掉顶层的Dimensions.get调用，在组件内部使用Hook
import { useWindowDimensions } from 'react-native'

const Home = () => {
  const { width, height } = useWindowDimensions()
  // 原有组件逻辑不变
}

2. 测试时直接调用React Native Testing Library提供的setWindowSize方法修改尺寸即可：

import { render, setWindowSize } from '@testing-library/react-native'

it('renders correctly with iPhone 11 size', () => {
  setWindowSize(414, 896)
  const { getByTestId } = render(<Home />)
  // 后续断言逻辑
})

如果需要不同用例用不同尺寸，只需要在对应用例中调用setWindowSize修改参数即可。

内容的提问来源于stack exchange，提问作者Alwaysblue