reactjs - 使用 Jest 和 enzyme 进行 native 单元测试时出现 TypeError : Cannot read property 'getParam' of undefined.？

Question

我第一次尝试为 React Native 编写单元测试用例..我收到以下错误

AlbumDetailView.js

import { View, Image } from 'react-native';
import { Button, Provider, Text } from 'react-native-paper';
import React from 'react';
import styles from '../style/AlbumDetailView.component.style';


export default class DetailView extends React.Component {
    static navigationOptions = {
      title: 'Album Details',
    };

    render() {
      { /* Using the navigation prop we can get the value passed from the previous screen */ }
      const { navigation } = this.props;
      const albumTitle = navigation.getParam('albumTitle', 'Default data');
      const albumImg = navigation.getParam('albumImg', 'some default value');
      const goBackToHome = () => this.props.navigation.goBack(this.props.navigation.state.key);


      return (
          <React.Fragment>
            <Provider>
              <View style={styles.mainContainer}>
                <View style={styles.albumViewContainer}>
                    <Image source = {{ uri: albumImg }} style={styles.imageView} />
                    <Text style={styles.textStyle}>{albumTitle}</Text>
                    <Button mode="contained"
                        onPress={() => this.props.navigation.navigate('HomeScreen', { goBackToHome, })}
                        style={styles.buttonStyle} testID='HomeButton'>
                        HOME
                    </Button>
                </View>
              </View>
            </Provider>
          </React.Fragment>
      );
    }
}

我正在编写测试用例，如下所示

import 'react-native';
import React, { Component } from 'react';
import { shallow } from 'enzyme';
import AlbumDetailsView from '../component/AlbumDetailsView';


describe('Album Details Screen', () => {

  it('should render Album Details component', () => {
      const wrapper = shallow(<AlbumDetailsView />);
  });

  it('should render initial layout', () => {
  // when
  const component = shallow(<AlbumDetailsView />);
  // then
  expect(component.getElements()).toMatchSnapshot();
  });

  it('should check if BackButton exists', () => {
    const wrapper = shallow(<AlbumDetailsView />);
    wrapper.findWhere(n => n.name() === 'Button' && n.prop('testID') === 'HomeButton')

  });

});

我可以知道如何处理吗？

Answer 1

您需要在测试中模拟 navigation 属性。当然 getParam 是未定义的，因为你还没有在测试中通过它。运行应用程序时，它会由 react-navigation 自动传递，但在测试中，您必须手动模拟它。

it('should render Album Details component', () => {
    const wrapper = shallow(
        <AlbumDetailsView navigation={{ getParam: jest.fn() }} />
    );
});

现在，getParam 将不再是未定义。当然，使用上面的代码，在调用 getParam('albumTitle') 时不会返回任何内容，因为在您的测试中 getParam() 只是一个 Jest 。 fn()，它可以转换为一个不执行任何操作的空函数。

如果你想让它返回值，你还必须手动实现模拟函数，例如

it('should render Album Details component', () => {
    const wrapper = shallow(
        <AlbumDetailsView navigation={{ getParam: (param) => {
            if (param === 'albumTitle') return 'albumTitle';
            ...
        } }} />
    );
});