reactjs - 如何浅测试使用 redux hooks 的非 redux 连接组件

Question

我在 ReactJS 项目中的 jest/enzyme 单元测试中遇到问题，我将组件转换为 ES6 并使用 hooks 将 redux 连接到 reducer 存储。然而，在这个组件中添加使用钩子(Hook)的更改后，它的单元测试已经被破坏，我花了几天时间试图弄清楚为什么这个测试将不再浅层渲染，因为完整安装可以正常工作。

DemoPage.js

import React  from 'react';
import { useSelector, useDispatch} from 'react-redux';
import * as actions from '../../actions/demoPageActions';
import DemoPageForm from '../demoApp/DemoPageForm';
import {compose} from "recompose";
import {withStyles} from "@material-ui/core";

const styles = theme => ({});

export const DemoPage = () => {
  const demoState = useSelector(state => state.demoPage);
  const dispatch = useDispatch();

  const saveSomething = () => {
    dispatch(actions.saveSomething(demoState));
  };

  const calculateSomething = e => {
    dispatch(actions.calculateSomething(demoState, e.target.name, e.target.value));
  };

  return (
    <DemoPageForm
      onSaveClick={saveSomething}
      onChange={calculateSomething}
      demoState={demoState}
    />
  );
};

export default compose(withStyles(styles))(DemoPage);

DemoPage.spec.js

import React from "react";
import { shallow } from "enzyme";
import {DemoPage} from "./DemoPage";
import DemoPageForm from "../demoApp/DemoPageForm";

describe("<DemoPage />", () => {
  it("should contain <DemoPageForm />", () => {
    const wrapper = shallow(
      <DemoPage/>
    );
    expect(wrapper.find(DemoPageForm).length).toEqual(1);
  });
});

这会产生以下错误

 <DemoPage /> › should contain <DemoPageForm />

    Invariant Violation: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

       9 | 
      10 | export const DemoPage = () => {
    > 11 |   const demoState = useSelector(state => state.demoPage);
         |                     ^
      12 |   const dispatch = useDispatch();
      13 | 
      14 |   const saveSomething = () => {

这是非常令人困惑的，因为它仍然应该测试未连接的组件，但是我相信 useSelector 的钩子(Hook)导致了这个问题，所以在阅读了大约 30-40 页的相关内容后，我还没有找到解决方案和最接近的解决方案我已经使用了挂载，它工作得很好，但是我更喜欢浅层进行此测试，这里是包装在带有模拟库的提供程序中时的代码和结果

describe("<DemoPage />", () => {
  const mockStore = configureMockStore()
  const store = mockStore(returnInitialState());

  it("should contain <DemoPageForm />", () => {
    const wrapper = shallow(
      <Provider store={store}>
        <DemoPage
          store={store}
        />
      </Provider>
    );

    console.log(wrapper.dive().debug())

    expect(wrapper.find(DemoPageForm).length).toEqual(1);
  });
});

   console.log src/components/containers/DemoPage.spec.js:23
      <DemoPage store={{...}} />

  ● <DemoPage /> › should contain <DemoPageForm />

    expect(received).toEqual(expected) // deep equality

    Expected: 1
    Received: 0

      23 |     console.log(wrapper.dive().debug())
      24 | 
    > 25 |     expect(wrapper.find(DemoPageForm).length).toEqual(1);
         |                                               ^
      26 |   });
      27 | });

如果有人知道如何解决这个问题，那将会非常有帮助。干杯

Answer 1

我在使用 enzyme 进行浅渲染时遇到了问题。目前， enzyme 在浅层渲染测试组件中不完全支持 react 钩子(Hook)。您暂时需要使用 mount 。您可以在问题 #1938 中与其 github 相关的问题页面上跟踪进度。

如果您想尝试使用shallow，您当前确实可以访问相当多的功能。尝试将 enzyme-adapter-react-16 升级到 1.15.1 或更高版本，以消除一些更明显的问题。截至 2019 年 11 月 12 日，当我上次尝试添加它时，它肯定仍然存在问题，但随着他们致力于解决兼容性问题，它一直在变得更好。