Jest / Enzyme Unit Testing: Как передать хранилище мелкому компоненту, использующему функцию connect-redux 4 и response-redux 6

Question

Я делаю как обычно несколько юнит-тестов с шуткой и энзимом для одного нового проекта. Я использовал для тестирования компонентов, которые были подключены к Redux следующим образом:

а) магазин генератора

import { createStore } from 'redux';

import rootReducer from '../src/reducers';

export const storeFactory = (initialState) => {
   return createStore(rootReducer, initialState);
}

, который используется файлом Input.test.js

import React from 'react';
import { shallow } from 'enzyme';

import { findByTestAttr,storeFactory } from '../../../test/testUtils';
import Input from './Input';



const setup = (initialState={}) => {
    const store = storeFactory(initialState);
    const wrapper = shallow(
        <Input store={store} />
        ).dive();
    console.log(wrapper.debug());

}

в качестве примера компонента Input.js:

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Input extends Component {
    render(){
        return <div />;
    }
}

const mapStateToProps = (state) => {
    return {};
}

export default connect(mapStateToProps)(Input);

Мои версии пакета npm:

 "dependencies": {
    "ajv": "^6.6.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1"
  }

  "devDependencies": {
    "check-prop-types": "^1.1.2",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "jest": "^23.6.0",
    "jest-enzyme": "^7.0.1",
    "prop-types": "^15.6.2"
  }

И это работало, но я получаю это сообщение при запуске тестов в отчете о выполнении тестов:

Инвариантное Нарушение: Удалено избыточное хранилище в реквизитах. и ничего не делает. Чтобы использовать пользовательский магазин Redux для конкретных компоненты, создайте пользовательский контекст React с помощью React.createContext (), и передать объект контекста провайдеру React-Redux и конкретному такие компоненты, как: Вы также можете передать {context: MyContext} опция для подключения

Я пытался передать контекст как параметр мелкой

const setup = (initialState={}) => {
    const store = storeFactory(initialState);
    const wrapper = shallow(
        <Input  />, { store }
        );
    console.log(wrapper.debug());

}

Но потом я записываю это на консоль

<ContextConsumer>
        [function bound renderWrappedComponent]
      </ContextConsumer>

и если я попытаюсь использовать метод ферментного погружения (), я получу:

const setup = (initialState={}) => {
    const store = storeFactory(initialState);
    const wrapper = shallow(
        <Input  />, { store }
        ).dive();
    console.log(wrapper.debug());

}

Не удалось запустить тестовый набор

TypeError: ShallowWrapper::dive() can only be called on components

Какой предлагаемый способ сделать это сейчас? Я знаю, что говорится в сообщении, но раньше не было необходимости включать элемент в провайдера для юнит-тестов шутки / энзимов. Большое спасибо!

Answer 1

shallow и dive не работают должным образом в react-redux 6, поэтому вы можете понизить его до react-redux 5.0.7, чтобы оно заработало.

Но если вы предпочитаете использовать react-redux 6, вы можете использовать mount. Таким образом, приведенный выше код можно переписать следующим образом:

Input.test.js

import React from 'react'
import {Provider} from 'react-redux'
import {mount} from 'enzyme'

import {findByAttr, storeFactory} from '../test/testUtils'
import Input from './Input'

const setup = (initialState={}) => {
  const store = storeFactory(initialState)
  const wrapper = mount(<Provider store={store}><Input /></Provider>)
  console.log(wrapper.debug())
}

setup()

Консоль

    console.log src/Input.test.js:11
      <Provider store={{...}}>
        <Connect(Input)>
          <Input dispatch={[Function: dispatch]}>
            <div />
          </Input>
        </Connect(Input)>
      </Provider>

И есть другой обходной путь, если вы предпочитаете тестировать компонент как неподключенный компонент, вы все равно можете использовать react-redux 6 и shallow; код можно переписать следующим образом:

Добавить ключевое слово export к Input

Input.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

export class Input extends Component {
    render(){
        return <div />;
    }
}

const mapStateToProps = (state) => {
    return {};
}

export default connect(mapStateToProps)(Input);

Input.test.js

import React from 'react';
import { shallow } from 'enzyme';

import { findByTestAttr } from '../../../test/testUtils';
import { Input } from './Input';



const setup = (props={}) => {
    const wrapper = shallow(<Input {...props} />);
    console.log(wrapper.debug());

}

Консоль

<div />

Надеюсь, это поможет!