在React Native Testing与TypeScript结合场景下传递Props的最佳方法

你遇到的错误非常典型——Props是TypeScript的类型定义，它只存在于编译阶段，并不是可以在运行时使用的实际值，所以直接用{...Props}传递给组件肯定会报错。下面我会分享几种实用的最佳实践，帮你高效处理测试中的props传递问题。

1. 手动创建基础模拟Props（最直接清晰） #

对于结构简单的组件，手动编写符合Props类型的模拟对象是最直观的方式，能让你明确控制测试用的参数：

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import { Example, Props } from '../example';

describe('Example Component', () => {
  // 创建符合Props类型的模拟数据，用jest.fn()模拟回调函数方便断言
  const mockProps: Props = {
    text: 'Test Button',
    func: jest.fn()
  };

  it('renders the button with the correct text', () => {
    const { getByText } = render(<Example {...mockProps} />);
    expect(getByText('Test Button')).toBeTruthy();
  });

  it('triggers the func callback when the button is pressed', () => {
    const { getByText } = render(<Example {...mockProps} />);
    fireEvent.press(getByText('Test Button'));
    expect(mockProps.func).toHaveBeenCalledTimes(1);
  });
});

2. 封装默认Props工具函数（适合复杂组件/多测试用例） #

如果组件有较多props，或者需要在多个测试用例中复用基础props，可以封装一个工具函数生成默认props，测试时只需要覆盖需要调整的字段即可：

// 可以放在当前测试文件，或者单独的测试工具文件中复用
const createDefaultProps = (override?: Partial<Props>): Props => ({
  text: 'Default Button Text',
  func: jest.fn(),
  ...override // 允许传入部分props覆盖默认值
});

describe('Example Component', () => {
  it('uses custom text when provided', () => {
    const customProps = createDefaultProps({ text: 'Custom Test Text' });
    const { getByText } = render(<Example {...customProps} />);
    expect(getByText('Custom Test Text')).toBeTruthy();
  });

  it('triggers the custom callback when pressed', () => {
    const testCallback = jest.fn();
    const customProps = createDefaultProps({ func: testCallback });
    const { getByText } = render(<Example {...customProps} />);
    
    fireEvent.press(getByText('Default Button Text'));
    expect(testCallback).toHaveBeenCalled();
  });
});

这种方式既保证了TypeScript的类型安全，又能灵活适配不同测试场景，避免重复编写冗余代码。

关键原理：为什么不能用类型作为值？ #

TypeScript的类型系统是编译时擦除的——当代码编译成JavaScript后，所有的类型定义（包括Props）都会被移除，不会出现在运行时环境中。所以你无法在测试代码（运行时执行）中把类型当作实际的值来使用，这就是你看到错误提示的根本原因。

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