Как проверить вложенные подключенные компоненты с помощью энзима?

Question

Я пытаюсь проверить вложенные подключенные компоненты (Redux подключен): Основной компонент имеет компонент Контейнер и предоставляется оберткой магазина в App.

import React, { Component } from 'react';
import Main from './components/Main';
import './App.css';
import { Provider } from 'react-redux'
import createStore from './redux'
import applyConfigSettings from './config'

// Apply config overrides
applyConfigSettings()

const store = createStore()

class App extends Component {
  render() {

    return (
      <Provider store={store}>
          <Main/>
      </Provider>

    );
  }
}

export default App;

Main.js

import React, { Component } from 'react';
import logo from '../logo.svg';
import { connect } from 'react-redux'

import Container from './Container'

export class Main extends Component {

    render(){
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to Pomodoro App</h1>
                </header>
                <Container/>
            </div>
        );
    } 
}

const mapStateToProps = (state) => {
    return {
      fetching: state.user.fetching,
    }
  }

  const mapDispatchToProps = (dispatch) => {
    return {

    }
  }

  export default connect(mapStateToProps, mapDispatchToProps)(Main)

Container.js

import React, { Component } from 'react';
import Grid from 'material-ui/Grid';
import { connect } from 'react-redux'


export class Container extends Component{
    render(){
        return (
            <div className="grid-root">

            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
      fetching: state.user.fetching,
    }
  }

  const mapDispatchToProps = (dispatch) => {
    return {

    }
  }

  export default connect(mapStateToProps, mapDispatchToProps)(Container)

Все это создано с помощью библиотеки Create-реагировать на приложение. Я установил Enzyme тоже для тестирования. Вот мой тестовый файл для Main.test.js

import React from 'react';

import { shallow, mount } from 'enzyme';

import {Main} from '../../components/Main'
import ContainerConnect, {Container} from '../../components/Container';

import configureStore from 'redux-mock-store';
import { Provider, connect} from 'react-redux';

describe('Main', () => {
    let wrapper;
    let mountWrapper;
    it('wraps all the contents in a div with .App class', () => {
        wrapper = shallow(<Main />);
        expect(wrapper.find('.App').length).toEqual(1);
    });

    it('wraps content of header in a div with .App-header class', () => {
        wrapper = shallow(<Main />);
        expect(wrapper.find('.App-header').length).toEqual(1);
    });

    it('mount', () => {
        const middlewares = [];
        const mockStore = configureStore(middlewares);
        const initialState = {}
        const store = mockStore(initialState)
        mountWrapper = mount(
            <Provider store={store}>
                    <Main />
            </Provider>
        );
    });

  })

Я получаю следующую ошибку для последнего теста:

 FAIL  src/tests/components/Main.test.js
  ● Console

    console.error node_modules/react-dom/cjs/react-dom.development.js:9643
      The above error occurred in the <Connect(Container)> component:
          in Connect(Container) (at Main.js:16)
          in div (at Main.js:11)
          in Main (at Main.test.js:31)
          in Provider (created by WrapperComponent)
          in WrapperComponent

      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit some link to fb to learn more about error boundaries.

  ● Main › mount

    TypeError: Cannot read property 'fetching' of undefined

      at Function.mapStateToProps [as mapToProps] (src/components/Container.js:18:30)
      at mapToPropsProxy (node_modules/react-redux/lib/connect/wrapMapToProps.js:54:92)
      at Function.detectFactoryAndVerify (node_modules/react-redux/lib/connect/wrapMapToProps.js:63:19)
      at mapToPropsProxy (node_modules/react-redux/lib/connect/wrapMapToProps.js:54:46)
      at handleFirstCall (node_modules/react-redux/lib/connect/selectorFactory.js:37:18)
      at pureFinalPropsSelector (node_modules/react-redux/lib/connect/selectorFactory.js:85:81)
      at Object.runComponentSelector [as run] (node_modules/react-redux/lib/components/connectAdvanced.js:43:25)
      at Connect.initSelector (node_modules/react-redux/lib/components/connectAdvanced.js:195:23)
      at new Connect (node_modules/react-redux/lib/components/connectAdvanced.js:136:15)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:6801:20)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:8336:9)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:8982:16)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:11814:16)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:11843:26)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:11874:9)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:12449:24)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:12370:9)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:12347:5)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:12247:7)
      at scheduleWorkImpl (node_modules/react-dom/cjs/react-dom.development.js:12122:13)
      at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:12082:12)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:12710:5)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:12738:12)
      at Object.updateContainer (node_modules/react-dom/cjs/react-dom.development.js:12765:14)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:16069:15)
      at node_modules/react-dom/cjs/react-dom.development.js:16488:14
      at Object.unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:12557:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:16484:17)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:16543:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.it (src/tests/components/Main.test.js:29:42)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:118:7)

Так сложно ли тестировать вложенные подключенные компоненты? Я должен пойти и использовать больше этого в приложении. А также означает ли это, что тестирование щелкает по кнопкам и все сложнее тестировать?

Answer 1

Исходя из того, что вы пытаетесь проверить, вам вообще не придется иметь дело с редуксом.

Поскольку вы тестируете свой <Main /> компонент и правильно ли он отображает заголовок, просто полностью смоделируйте ваш <Container />:

jest.mock('../../components/Container', () => ()=> <div id="mockContainer">
   mockContainer
</div>);

Тогда вы можете смонтировать ваше <Main />, не беспокоясь о избыточности.

После этого, когда вы начнете модульное тестирование своего <Container />, просто протестируйте модульный класс React.Component и не связывайтесь с подключенным компонентом, проверяя его избыточность.

Другими словами, у вас должна быть возможность протестировать любое приложение React, даже не издеваясь над магазином излишков. Просто макет подключенных компонентов полностью.

Подробнее здесь