在组件的函数中模拟 Promise 时保持 "this" 上下文

Question

我遇到一个问题，在我的 componentDidMount 方法中测试某些逻辑时，我无法通过 Jest 引用 this 关键字。因此，一旦我进入承诺响应，当我将鼠标悬停在 this.props（或 this.setState）中的 this 上时，它只会显示 undefined.

这是我的 App 组件中的方法：

componentDidMount() {
  myHttpService.getUser(this.props.userId).then(response => {
    if (response.user !== null) {
      this.setState({ user: response.user });
    } else {
      this.props.history.push('/login');
    }
  });
}

这是我对该组件的单元测试：

it('push login route to history if no user is returned', () => {
  myHttpService.default.getUser = jest.fn(() =>
    Promise.resolve({ user: null }),
  );

  const result = renderer.create(
    <MemoryRouter>
      <App />
    </MemoryRouter>,
  );

  // Not sure how to check that route was pushed to history, trying to solve the this context issue first.
  // expect(?).toHaveBeenCalled();
});

Answer 1

在您的测试文件中模拟服务

jest.mock('<path-to-your myHttpService>', () => {
  return function() {
    return { getUser: () => Promise.resolve({ user: null }) };
  };
});

您可以使用 Jest 对断言执行以下操作

let instance = result.getInstance();
let history = instance.history;
expect(history.location.pathname).to.equal('/login');

这是 github

上的完整工作仓库

在组件的函数中模拟 Promise 时保持 "this" 上下文

Keep "this" context when mocking Promise in function on component

javascript

reactjs

jestjs

react-test-renderer