Как проверить компоненты, отображаемые при изменении хранилища redux? - PullRequest
Новая
       23

Как проверить компоненты, отображаемые при изменении хранилища redux?

0 голосов
/ 13 июля 2020

У меня есть компонент ниже - PLoad. js: 

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import Spinner from '../../../components/UI/Spinner/Spinner';
import { getLoad } from '../../../store/actions/poe';
import Load from '../../../components/apps/P/Load';

const PLoad = ({ dispatchGetLoad, loadD, loading }) => {
    return (loading ? <Spinner /> :
    <div>
        <Load loadD={loadD} />
    </div>
  );
}

const mapStateToProps = state => ({
   loadD: state.p.loadD,
   loading: state.p.loading
});

const mapDispatchToProps = dispatch => ({
   dispatchGetLoad: () => dispatch(getLoad())
});

export default connect(mapStateToProps, mapDispatchToProps)(PLoad);

Я пытаюсь протестировать этот компонент с помощью Jest + Enzyme - PLoad.test. js

import React from 'react';
import { shallow, mount } from 'enzyme';
import { Provider } from 'react-redux';
import PLoad from '../PLoad';
import store from '../../../../store';
import Load from '../../../../components/apps/P/Load';
import Spinner from '.././../../../components/UI/Spinner/Spinner';

describe('PLoad component', () => {
  let wrapper;

  beforeAll(() => {
    wrapper = mount(
        <Provider store={store}>
            <PLoad />
        </Provider>);
   });

  it('should render the Load and Spinner components', () => {
    expect(wrapper.find(Spinner)).toHaveLength(1); //this is passed
    expect(wrapper.find(Load)).toHaveLength(1); //ended in error
  });
});

ПРИМЕЧАНИЕ: - store. js используется в приведенном выше PLoad.test. js - это фактический store. js используется моим приложением. Я хочу проверить, когда load: false, PLoad отображает LoadD, а когда его true, он отображает Spinner. загрузка происходит из состояния хранилища redux. Возможно ли это?

Ответы [ 2 ]

0 голосов
/ 14 июля 2020

Да ... Возможно. Компонент получает все данные, которые вы передаете провайдеру. Передайте объект initialState для хранения с loading:false. Фактически, вы можете создать вспомогательный метод со всеми логами создания хранилища c в отдельном файле и повторно использовать его в каждом подключенном компоненте.

0 голосов
/ 13 июля 2020

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

it('should render the Load components', () => {
    ---- dispatch action -------
    expect(wrapper.find(Load)).toHaveLength(1);
  });
...