Как модульный тест React-Redux подключенных компонентов?

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

Ниже приведен непроверенный экстракт того, что я делаю с Redux и ферментом. Основная идея заключается в использовании поставщика для подключения состояния в тесте к подключенному компоненту в тесте.

import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import SongForm from '../SongForm'; // import the CONNECTED component

// Use the same middlewares you use with Redux's applyMiddleware
const mockStore = configureMockStore([ /* middlewares */ ]);
// Setup the entire state, not just the part Redux passes to the connected component.
const mockStoreInitialized = mockStore({ 
    songs: { 
        songsList: {
            songs: {
                songTags: { /* ... */ } 
            }
        }
    }
}); 

const nullFcn1 = () => null;
const nullFcn2 = () => null;
const nullFcn3 = () => null;

const wrapper = mount( // enzyme
        <Provider store={store}>
          <SongForm
            screen="add"
            disabled={false}
            handleFormSubmit={nullFcn1}
            handleModifySong={nullFcn2}
            handleDeleteSong={nullFcn3}
          />
        </Provider>
      );

const formPropsFromReduxForm = wrapper.find(SongForm).props(); // enzyme
expect(
        formPropsFromReduxForm
      ).to.be.deep.equal({
        screen: 'add',
        songTags: initialSongTags,
        disabled: false,
        handleFormSubmit: nullFcn1,
        handleModifySong: nullFcn2,
        handleDeleteSong: nullFcn3,
      });

===== ../SongForm.js

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

const SongForm = (/* object */ props) /* ReactNode */ => {
    /* ... */
    return (
        <form onSubmit={handleSubmit(handleFormSubmit)}>
            ....
        </form>

};

const mapStateToProps = (/* object */ state) /* object */ => ({
    songTags: state.songs.songTags
});
const mapDispatchToProps = () /* object..function */ => ({ /* ... */ });

export default connect(mapStateToProps, mapDispatchToProps)(SongForm)

вы можете создать магазин с чистым Redux. redux-mock-store - это всего лишь легкая версия, предназначенная для тестирования.

вы можете использовать react-addons-test-utils вместо фермента airbnb.

Я использую chai-энзим airbnb, чтобы иметь реагирующие варианты ожидания. В этом примере она была не нужна.

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

вот более аккуратное решение без необходимости экспорта ничего, кроме подключенного компонента:

если вы используете jest, вы можете издеваться connect метод для возврата трех вещи:

1. mapStateToProps
2. mapDispatchToProps
3. ReactComponent

сделать это довольно просто. Есть 2 способа: встроенные насмешки или глобальные насмешки.

1. Использование встроенного макета

добавьте следующий фрагмент перед функцией описания теста.

jest.mock('react-redux', () => {
  return {
    connect: (mapStateToProps, mapDispatchToProps) => (ReactComponent) => ({
      mapStateToProps,
      mapDispatchToProps,
      ReactComponent
    }),
    Provider: ({ children }) => children
  }
})

2. Используя макет файла

1. создайте файл __mocks__/react-redux.js в корень (где пакет.JSON-это находится)
2. добавьте следующий фрагмент в файл.

module.exports = {
  connect: (mapStateToProps, mapDispatchToProps) => (ReactComponent) => ({
    mapStateToProps,
    mapDispatchToProps,
    ReactComponent,
  }),
  Provider: ({children}) => children
};

после издевательства вы сможете получить доступ ко всем вышеперечисленным трем, используя Container.mapStateToProps,Container.mapDispatchToProps и Container.ReactComponent.

контейнер можно импортировать просто делаю

import Container from '<path>/<fileName>.container.js'

надеюсь, что это помогает.

обратите внимание, что если вы используете пробный файл. Высмеянный файл будет использоваться глобально для всех тестов случаи (если вы не делаете jest.unmock('react-redux')) перед началом теста.

попробуйте создать 2 файла, один с самим компонентом, не зная о каком-либо магазине или чем-либо (PhoneVerification-component.в JS). Затем второй (Фоневеризация.js), который вы будете использовать в своем приложении и который возвращает только первый компонент, подписанный на store через