React Native Button 组件 Jest 单元测试示例

以下是对代码 `const React = require('react'); const ReactNative = require('react-native'); const { TouchableNativeFeedback, View } = ReactNative;

const Button = (props) => { return ( <TouchableNativeFeedback delayPressIn={0} background={TouchableNativeFeedback.SelectableBackground()} // eslint-disable-line new-cap {...props}> {props.children} ); };

module.exports = Button;` 的 Jest 单元测试代码：

const React = require('react');
const ReactNative = require('react-native');
const { TouchableNativeFeedback } = ReactNative;

// 导入要测试的组件
const Button = require('../Button');

// 创建一个测试套件
describe('Button Component', () => {
  // 创建一个测试用例
  it('renders correctly', () => {
    // 渲染Button组件
    const wrapper = shallow(<Button>Hello Jest</Button>);
    
    // 断言Button组件渲染的结果是否符合预期
    expect(wrapper).toMatchSnapshot();
  });

  // 创建另一个测试用例
  it('calls onPress prop when pressed', () => {
    // 创建一个mock函数作为onPress prop
    const onPressMock = jest.fn();
    
    // 渲染Button组件，并传入onPress prop
    const wrapper = shallow(<Button onPress={onPressMock}>Press Me</Button>);
    
    // 模拟点击事件
    wrapper.find(TouchableNativeFeedback).simulate('press');
    
    // 断言onPress prop是否被调用
    expect(onPressMock).toHaveBeenCalled();
  });
});

需要注意的是，上述代码中使用了shallow函数来渲染Button组件。shallow函数是Enzyme库提供的一个浅渲染函数，它只会渲染Button组件本身，而不会渲染它的子组件。这样可以更加高效地进行单元测试。如果需要测试Button组件的子组件，可以使用mount函数来进行深渲染。