Как Unit Test Связанные с React-Redux компоненты?

Ответ 1

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

export class Sample extends Component {

    render() {
        let { verification } = this.props;
        return (
            <h3>This is my awesome component.</h3>
        );
    }

}

const select = (state) => {
    return {
        verification: state.verification
    }
}

export default connect(select)(Sample);

Таким образом, вы можете импортировать обычно в свое приложение, но когда дело доходит до тестирования, вы можете импортировать свой именованный экспорт, используя import { Sample } from 'component'.

Ответ 2

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

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

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 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 - это просто облегченная версия, предназначенная для тестирования.

Возможно, вы захотите использовать add-addons-test-utils вместо Airbnb Enzyme.

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

Ответ 3

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

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

Если вы используете 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
  }
})

Ответ 4

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

import PhoneVerificationComponent from './PhoneVerification-component.js'
import {connect} from 'react-redux'
...
export default connect(mapStateToProps, mapDispatchToProps)(PhoneVerificationComponent)

Затем вы можете протестировать свой "тупой" компонент, потребовав PhoneVerification-component.js в своем тесте и предоставив ему необходимые издевательства. Тестирование уже не тестировалось (соедините декоратор, mapStateToProps, mapDispatchToProps и т.д.)