如何模拟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，您可以获得组件传递给它的回调。

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

下面是一个完整的工作示例：

history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

code.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; }
}

code.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!
})

Answer 2

我最终做的就是这样的事情。在第一次挂载时，它返回/，在第二次挂载时，它返回/second，然后从那里返回默认状态0(/)

jest.mock('./history', () => ({
  listen: jest
    .fn()
   .mockImplementationOnce(cb => {
      cb({ pathname: '/' });
    })
    .mockImplementationOnce(cb => {
      cb({ pathname: '/second' });
    }),
}));

以及测试本身(在一个测试中同时测试/second和/ )

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

    component = mount(<MyComponent />);

    expect(component.state().pathStep).toBe(1);

    component = mount(<MyComponent />);

    expect(component.state().pathStep).toBe(0);
  });

但要让我最初要求的测试工作，这样的东西就足够了：

jest.mock('./history', () => ({
  listen: cb => {
    cb({ pathname: '/second' });
  },
}));

我只是在模仿时传递了一个回调，非常接近于我以前的回调，但通过一些配对成功地使其工作:)

希望这是有意义的，并将在未来帮助某些人