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

Question

Я использую мокко, фермент, chai и некоторые издевательские библиотеки, чтобы сделать возможным тестирование. Таким образом, содержание 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); 
    }); 
}); 

После выполнения теста команды НОЙ она производит следующее:

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) 

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

Answer 1

Я думаю, что есть два способа решить проблему.

1. Экспорт обычный компонент

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

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

export default connect(mapStateToProps)(MyComponent); 

Ваш тест на импорт равнине compenent через импорт имени:

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 
});