React Native TypeScript组件快照测试如何传入Props？

1. 是否需要Mock/传递Props？ #

当然需要。你的NutritionValue是依赖Props渲染的展示型组件，内部直接解构了title、valueConsumed、valueRequired三个必填属性，不传Props会导致：

• TypeScript编译报错，不符合Item接口的类型要求；
• 组件运行时计算valueConsumed/valueRequired会得到NaN，渲染出异常内容，快照完全不符合预期。

你不需要“Mock”Props，直接构造符合接口的测试数据传进去即可。修改后的测试代码示例：

import renderer from 'react-test-renderer'
import { NutritionValue } from '../NutritionValue'

// 构造符合Item接口的基础测试数据
const baseProps = {
  title: 'Protein',
  valueConsumed: 50,
  valueRequired: 100
}

test('renders correctly with default unit', () => {
  const tree = renderer.create(<NutritionValue {...baseProps} />).toJSON();
  expect(tree).toMatchSnapshot();
});

// 额外测试Calories的特殊单位场景
test('renders correctly with Calories unit', () => {
  const tree = renderer.create(<NutritionValue 
    title="Calories"
    valueConsumed={2000}
    valueRequired={2500}
  />).toJSON();
  expect(tree).toMatchSnapshot();
});

这样快照会记录组件在不同Props下的正确渲染结果，后续组件修改时能快速发现结构或视觉变化。

2. 是否应该使用ts-jest？ #

建议使用，尤其是你的项目本身基于TypeScript开发的话：

• ts-jest是Jest官方推荐的TypeScript预处理器，既能让Jest正确解析TS/TSX文件，还会自动做类型检查——如果测试代码里Props类型写错，ts-jest会直接报错，避免无效测试。
• 如果你现在没用ts-jest也能跑测试，大概率是用了babel-jest配合@babel/preset-typescript，但后者仅做语法转换，不做类型检查，隐藏的类型错误可能到运行时才暴露。

简单配置步骤（供参考） #

1. 安装依赖：

npm install --save-dev ts-jest @types/jest

2. 生成jest配置文件：

npx ts-jest config:init

3. 确保jest.config.js包含核心配置：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'react-native', // 根据项目环境调整，web项目用'jsdom'
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx']
};

这样你的测试就能同时享受到Jest的快照能力和TypeScript的类型安全保障。

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