如何在 React 中 Jest / Enzyme 测试带有Router() 包装的组件的 react-router-dom？答案

【问题标题】：How to Jest / Enzyme test a react-router-dom withRouter() wrapped component in React?如何在 React 中 Jest / Enzyme 测试带有Router() 包装的组件的 react-router-dom？
【发布时间】：2019-08-29 01:37:31
【问题描述】：

我在 React 中有一个组件，它使用 withRouter() HOF 包装器导出。如何测试这个组件？

酶错误：

Invariant failed: You should not use <withRouter(Palette) /> outside a <Router>

我如何导出组件：

export default withRouter(Palette);

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

解决方案是导出组件的两种变体：一种用于正常开发环境，另一种用于测试环境。

测试

// named export for the testing version
// src/components/Palette/Palette.js
export const Palette = props => { ... }

// import this version into the test and continue as usual...
// src/components/Palette/Palette.test.js
import React from "react";
import { Palette } from "./Palette";
import { shallow } from "enzyme";
import { shallowToJson } from "enzyme-to-json";

describe("Palette", () => {
  it("should match the snapshot", () => {
    const wrapper = shallow(<Palette />);
    expect(shallowToJson(wrapper)).toMatchSnapshot();
  });
});

常规

// default export for the normal version
// src/components/Palette.js
export default withRouter(Palette);

基本上，导出具有不同预期目的的两个版本。

【讨论】：

【解决方案2】：

你可以在声明组件时尝试在箭头函数上包装 withRouter，示例

const Palette = withRouter(({ //propsHere }) => {

   //component content here

 }); 

export default Palette;

【讨论】：

【解决方案3】：

加倍export 的替代方法是在类似测试中使用<MemoryRouter> 或<StaticRouter>

 const wrapper = shallow(<StaticRouter location={someUrl}><Palette /></StaticRouter>);

【讨论】：

【解决方案4】：

我觉得你应该试试这个

let wrapper = shallow(<componentName.WrappedComponent/>);

【讨论】：