window.history.back () не вызывается - шутить фермент

Question

Я написал простой модульный тест для следующего.Я новичок в тестировании React JS - пытаюсь запустить тест с использованием jest и энзима.

     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>

)}}

Файл выглядит просто, нет реквизита и единственное, чего нетнакрывается во время выполнения теста onClick.Как я могу протестировать onClick и убедиться, что тест покрыт на 100%.Спасибо

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

file.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 для МОР.Кроме того, вместо использования анонимной функции вы можете использовать класс PureComponent (он похож на класс Component, но не обновляет state) с функцией класса method.

Рабочий пример : https://codesandbox.io/s/j3qo6ppxqy (в этом примере используется react-router-dom и проводится тестирование integration и unit - см. Вкладку tests в нижней частистраница для запуска тестов и поиска папок __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>
  );
}

компоненты /NotFound / __ tests __ / notfound.test.js (как уже упоминалось здесь , при желании вы также можете протестировать метод класса)

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();
  });
});