react-router - 如何模拟 history.listen？

Question

history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

在我的 .js 中，这就是我使用 history.listen 的方式

import history from './history';

构造函数中的以下内容:

history.listen(location => {
  if (location.pathname === '/second') {
    this.setState({
      pathStep: 1,
    });
  } else if (location.pathname === '/') {
    this.setState({
      pathStep: 0,
    });
  }
});

现在我正在努力对此进行有效测试:

    I tried to do the following:
    jest.mock('./history', () => ({
      listen: () => () => {
        '/second';
      },
    }));

    it('changes activeStep when called', () => {
      expect(component.state().pathStep).toBe(1);
    });

但即使在 history.listen(location => { 之后添加 console.log 我也没有到达我的 history.listen。所以我很好奇我做错了什么

我还尝试将 spyOn 添加到 history.listen，但很想知道这个特定测试的最佳实践是什么

Answer 1

如果您模拟 history.listen，您可以获取组件传递给它的回调。

然后，您可以直接调用回调来验证您的组件是否正确响应。

这是一个完整的工作示例:

历史.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

代码.js

import * as React from 'react';
import history from './history';

export class SimpleComponent extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = { pathStep: 0 };
  }
  componentDidMount() {
    this.unlisten = history.listen(location => {
      if (location.pathname === '/second') {
        this.setState({
          pathStep: 1,
        });
      } else if (location.pathname === '/') {
        this.setState({
          pathStep: 0,
        });
      }
    });
  }
  componentWillUnmount() {
    this.unlisten();
  }
  render() { return null; }
}

代码.test.js

import * as React from 'react';
import history from './history';
import { mount } from 'enzyme';

import { SimpleComponent } from './code';

test('SimpleComponent', () => {
  const listenMock = jest.spyOn(history, 'listen');
  const unlistenMock = jest.fn();
  listenMock.mockReturnValue(unlistenMock);

  const component = mount(<SimpleComponent />);
  expect(component.state().pathStep).toBe(0);  // Success!

  const callback = listenMock.mock.calls[0][0];  // <= get the callback passed to history.listen

  callback({ pathname: '/second' });
  expect(component.state().pathStep).toBe(1);  // Success!

  callback({ pathname: '/' });
  expect(component.state().pathStep).toBe(0);  // Success!

  component.unmount();
  expect(unlistenMock).toHaveBeenCalled();  // Success!
})