компонент модульного тестирования, реквизиты которого получают значение от компонента реагирующей навигации - PullRequest
Новая
       9

компонент модульного тестирования, реквизиты которого получают значение от компонента реагирующей навигации

0 голосов
/ 30 апреля 2018

Как мне написать модульный тест для компонента React Native, который получает значение своего состояния из React Navigation , более конкретно this.props.navigation.state.params? Это класс компонента: 

  class RecAreas extends Component{ 
    static navigationOptions =({navigation}) => ({
        title: navigation.state.params.title,

        headerStyle: {
            backgroundColor: "#000000",
        }, 
          headerTintColor: '#facf33',
    });
    constructor(props){
        super(props); 
        const params = this.props.navigation.state.params;
        this.state={
            key:params.gymId,
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            }),
        };
        this.mainRef = db.ref("facilities");

    }
    componentDidMount(){
        this.listenForItem(this.mainRef)
    }

I Не могу понять, как передать вложенную функцию в качестве подпорки для модульного теста. В этом случае this.props.navigation, this.props.navigation.state, this.props.navigation.state.params - все объекты. Как мне издеваться над ними для юнит-теста? В приведенном ниже примере я получаю TypeError: Невозможно прочитать свойство 'gymId' с неопределенным , что имеет смысл, поскольку params не определено. Мне нужна помощь, чтобы решить это. Это модульный тест для компонента. Заранее спасибо! (PS: было бы замечательно знать также, как имитировать dataSource реквизит. Один из способов, как я думал, я мог бы сделать это - создать поддельную структуру данных dataSource (распечатать dataSource и посмотреть на ее структура). Любые указатели были бы полезны. Спасибо!) 

import React from "react";
import RecAreas from "../../app/screens/RecAreas";
import renderer from "react-test-renderer";

    describe ("<RecAreas", () => {
        it("renders without crashing", () => {
        const navigationMock = {state: jest.fn()};



        const rendered = renderer.create(<RecAreas navigation= 
                         {navigationMock}/>).toJSON();

        expect(rendered).toBeTruthy();
        expect(rendered).toMatchSnapshot();
      });
    }

1 Ответ

0 голосов
/ 29 мая 2018

эй, ты смеешься над тем, чтобы создать дерево для снимка как это 

import React from "react";
import RecAreas from "../../app/screens/RecAreas";
import renderer from "react-test-renderer";

describe ("<Test", () => {
    it("renders without crashing", () => {
    const navigationMock = { state: { params: { gymId: "1234" } } };
    const rendered = renderer
      .create(<RecAreas navigation={navigationMock} />)
      .toJSON();
    expect(rendered).toBeTruthy();
    expect(rendered).toMatchSnapshot();
  });
})

или вы пытаетесь Enzyme позволяет напрямую манипулировать реквизитом и состоянием компонентов

...