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

Я использую мокко, фермент, чай и некоторые имитирующие библиотеки, чтобы сделать тестирование возможным. Итак, содержимое TestComponent.js ниже, я настраиваю хранилище и передаю его провайдеру, а DeskScreen подключен к компоненту:

import mockery from "mockery";
import 'babel-polyfill';
import reactNativeSvgMock from "react-native-svg-mock";
mockery.enable();
mockery.registerMock("react-native-svg", reactNativeSvgMock);
var DeskScreen = require( '../app/containers/DeskScreen/DeskScreen');
import React, {View, Text, StyleSheet} from 'react-native';
import {Provider} from 'react-redux';
import {shallow, render, mount} from 'enzyme';
import {expect} from 'chai';
import configureStore from 'redux-mock-store';
import reducer from "../app/reducers";
import Button from "../app/containers/Common/Button";
import ButtonWithNoFlex from "../app/containers/Common/ButtonWithNoFlex";
const mockStore = configureStore([]);

describe('<Test />', () => {
    it('it should render 1 view component', () => {
        const store = mockStore(reducer);
        var comp = shallow(
         <Provider store={store}>
            <DeskScreen/>
        </Provider>
    );
        expect(button).to.have.length(1);
        expect(comp.find(View)).to.have.length(1);
    });
});

После запуска команды npm test она выдаст следующее:

1) it should render 1 view component


  0 passing (1s)
  1 failing

  1) <Test /> it should render 1 view component:
     AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
      at Context.<anonymous> (test/TestComponent.js:22:41)

Возможно, причина в том, что я использую shallow вместо mount, но, как я знаю, mount недоступна для response-native. В любом случае, хотелось бы как-нибудь протестировать подключенный компонент.


react-native testing enzyme mocha.js mockery
person Nikita Avrelin    schedule 14.01.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Думаю, есть два способа использования решения проблемы.

1. Экспорт простого компонента

В файле компонента экспортируйте компонент с именем export, который вы можете использовать в своих тестах.

// Export the plain component as named component
export class MyComponent {
    // ...
}

export default connect(mapStateToProps)(MyComponent);

Ваш тест импортирует простой компонент через именованный импорт:

import { MyComponent } from './MyComponent';

// Use it in your tests

2. Предоставьте контекст через shallow

Вы можете использовать подключенный компонент, если вы предоставляете хранилище через контекст. Это то, что делает <Provider>.

import { shallow } from 'enzyme';
import { createStore } from 'redux';

// reducer could be a real reducer or a mock fake reducer.
const store = createStore(reducer);

it('my test', () => {
    const wrapper = shallow(
        <MyComponent>,
        { context: { store } }
    );

    // test your component here
});
person floriangosse    schedule 22.02.2017
comment
Безумный реквизит на твоем 2. Предоставить контекст через мелкие - мне очень помогло! - person Jason Gaare; 22.04.2017