reactjs - window.history.back() 没有被调用 - Jest enzyme

Question

我为以下内容编写了一个简单的单元测试。我是 React JS 测试的新手 - 尝试使用 Jest 和 enzyme 来运行测试。

     render() {
  return (
    <div>
      <div className="not-found">
      <div className='_2'>WAS NOT FOUND</div>
            <div onClick={() => {window.history.back()}} className='not-found- 
 btn' href='/'>GO BACK</div>

) } }

该文件看起来很简单，没有任何 props，测试运行时唯一没有被覆盖的是 onClick 。我如何测试 onClick 并确保测试 100% 覆盖。谢谢

 <div onClick={() => {window.history.back()}} className='not-found- 
 btn' href='/'>GO BACK</div>

文件.test.js

  // jest mock functions (mocks this.props.func)
   const onClick =  jest.fn();
 // defining this.props
 const baseProps = {
  onClick,
}

describe(' Test', () => {
let wrapper;
let tree;

 beforeEach(() => wrapper = shallow(<Component{...baseProps } />));
// before each test, shallow mount the Component

it('should render correctly', () => {  
tree = renderer.create(<NotFound {...baseProps} />)
let treeJson = tree.toJSON()
expect(treeJson).toMatchSnapshot();
tree.unmount()
});

       it('calls onClick event ', () => {
  const mockOnClick = jest.fn();
 const wrapper = shallow(
    <NotFound onClick={mockOnClick} className='not-found-btn' />
  );
  const component = wrapper.shallow();
  component.find('GO BACK').simulate('click');
  expect(mockOnClick.mock.calls.length).toEqual(1);

Answer 1

我会避免使用 window 历史记录，而是使用 react-router-dom 进行 MPA。此外，您可以使用 PureComponent 类(它类似于 Component 类，但它不会更新 state) 与 method 类函数。

工作示例:https://codesandbox.io/s/j3qo6ppxqy (此示例使用 react-router-dom 并混合了集成和单元测试 - 请参阅测试 页面底部的选项卡运行测试并查找 __test__ 文件夹以查看代码)

组件/NotFound/notfound.js

import React, { PureComponent } from "react";
import { Button } from "antd";

export default class NotFound extends PureComponent {
  handlePageBack = () => this.props.history.push("/");

  render = () => (
    <div className="notfound">
      <h1>404 - Not Found!</h1>
      <Button type="default" onClick={this.handlePageBack}>
        Go Back
      </Button>
    </div>
  );
}

components/NotFound/__tests__/notfound.test.js(如前所述 here ，如果需要，您还可以测试类方法)

import React from "react";
import { shallowComponent } from "../../../tests/utils";
import NotFound from "../notfound";

const mockGoBack = jest.fn();

const initialProps = {
  history: {
    goBack: mockGoBack
  }
};

/* 
 the shallowComponent function below is a custom function in "tests/utils/index.js" that 
 simplifies shallow mounting a component with props and state
 */
const wrapper = shallowComponent(<NotFound {...initialProps} />);

describe("Not Found", () => {
  it("renders without errors", () => {
    const notfoundComponent = wrapper.find("div.notfound");
    expect(notfoundComponent).toHaveLength(1);
  });

  it("pushes back a page when Go Back button is clicked", () => {
    wrapper.find("Button").simulate("click");
    expect(mockGoBack).toHaveBeenCalled();
  });
});