Ошибка типа: невозможно прочитать свойство 'getParam' из неопределенного. для реакции нативного юнит-теста с использованием шутки и энзима? - PullRequest
Новая
       36

Ошибка типа: невозможно прочитать свойство 'getParam' из неопределенного. для реакции нативного юнит-теста с использованием шутки и энзима?

3 голосов
/ 20 февраля 2020

Я пытаюсь написать примеры модульных тестов для реакции на натив в первый раз. Я получаю следующую ошибку

enter image description here

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')

  });

});

Могу ли я узнать, как справиться с этим?

Ответы [ 2 ]

2 голосов
/ 20 февраля 2020

Вам нужно смоделировать опору navigation в вашем тесте. Конечно, getParam не определено, так как вы не прошли его в своем тесте. При запуске приложения оно автоматически передается react-navigation, но в ваших тестах вы должны вручную смоделировать его. 

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

Теперь getParam больше не будет undefined. Конечно, используя приведенный выше код, ничего не вернется при вызове getParam('albumTitle'), поскольку в вашем тесте getParam() - это просто jest.fn(), который может преобразоваться в пустую функцию, которая ничего не делает.

Если если вы хотите, чтобы он возвращал значения, вам также нужно будет вручную реализовать фиктивную функцию, например 

it('should render Album Details component', () => {
    const wrapper = shallow(
        <AlbumDetailsView navigation={{ getParam: (param) => {
            if (param === 'albumTitle') return 'albumTitle';
            ...
        } }} />
    );
});
0 голосов
/ 20 февраля 2020

они недавно изменили способ передачи реквизита https://reactnavigation.org/docs/en/upgrading-from-4.x.html#no -more-getparam

...