如何在 redux 存储更改时测试正在渲染的组件？答案

【问题标题】：How to test components being rendered when the redux store is changed?如何在 redux 存储更改时测试正在渲染的组件？
【发布时间】：2020-11-02 14:25:58
【问题描述】：

我有以下组件-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
  });
});

注意：- 上面 PLoad.test.js 中使用的 store.js 是我的应用程序使用的实际 store.js。我想测试加载：false 时，PLoad 呈现 LoadD，当它为 true 时呈现 Spinner。加载来自 redux 存储的状态。有可能吗？

【问题讨论】：

标签： reactjs react-redux jestjs enzyme

【解决方案1】：

是的……这是可能的。该组件获取您传递给提供者的任何数据。传递一个 initialState 对象以使用 loading:false 存储。实际上，您可以在单独的文件中创建包含所有商店创建逻辑的辅助方法，并在每个连接的组件中重用它。

【讨论】：

【解决方案2】：

您可以尝试调度一个动作来更改状态下的加载标志，这将触发组件的渲染。

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

【讨论】：