如何在React Native中使用Jest测试组件的screenProps

Hey there! Let's walk through how to test your MyCustomComponent with screenprops in Jest—this is simpler than you might think!

First off, nice work getting the basic component test up and running. When it comes to testing components with custom props like screenprops, the approach mirrors exactly how you use the component in your production code: you just pass the props directly when rendering the component in your test.

Here's a step-by-step breakdown with examples:

1. Pass screenprops directly in your test #

Instead of passing the component class to renderer.create, render it as a JSX element and attach your screenprops just like you do in OtherClass.

import renderer from 'react-test-renderer';
import MyCustomComponent from './MyCustomComponent'; // Adjust the import path to match your project

test('MyCustomComponent renders correctly with screenprops', () => {
  // Define test data to pass via screenprops
  const testNumber = 42;
  
  // Render the component with your screenprops
  const component = renderer.create(
    <MyCustomComponent screenprops={{ number: testNumber }} />
  );
  
  // Optional: Take a snapshot to lock in the component's expected output
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

2. Verify the component uses screenprops correctly #

If you want to go beyond snapshot testing and confirm your component is actually using the screenprops values, you can add checks for rendered content or directly validate the props received.

Example: Check if the number from screenprops is displayed #

Suppose your MyCustomComponent renders the number value like this:

class MyCustomComponent extends Component {
  render() {
    return (
      <Text testID="number-display">{this.props.screenprops.number}</Text>
    );
  }
}

You can update your test to verify the displayed number matches what you passed:

import { render } from '@testing-library/react-native';
import MyCustomComponent from './MyCustomComponent';

test('MyCustomComponent shows the correct number from screenprops', () => {
  const testNumber = 42;
  
  // Use React Testing Library for user-centric testing
  const { getByTestId } = render(
    <MyCustomComponent screenprops={{ number: testNumber }} />
  );
  
  const numberDisplay = getByTestId('number-display');
  expect(numberDisplay.props.children).toBe(testNumber.toString());
});

Example: Confirm the component received the right screenprops #

If you just want to validate the props were passed correctly, you can access the component instance directly:

import renderer from 'react-test-renderer';
import MyCustomComponent from './MyCustomComponent';

test('MyCustomComponent receives correct screenprops', () => {
  const testNumber = 42;
  
  const component = renderer.create(
    <MyCustomComponent screenprops={{ number: testNumber }} />
  );
  
  const instance = component.getInstance();
  expect(instance.props.screenprops.number).toBe(testNumber);
});

Quick Notes #

• screenprops is just a custom prop name here—Jest doesn't treat it any differently than any other prop you pass to a component.
• If you're using React Navigation's legacy camelCase screenProps, the exact same approach applies: pass it as a prop to the component in your test.

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