如何在未处理的承诺拒绝中测试抛出

Question

当我无法访问该 promise 实例的引用时，如何测试异步函数是否在特定条件下抛出错误？

const fakeRequest = Promise.reject();

function Component() {
  const click = async () => {
    await fakeRequest()
      .then(doStuff)
      .catch(error => {
        if (error.foo === true) {
          throw new Error('Error') // how do I test this?
        }

        return 'fallback';
      });
  };

  return (
    <button onClick={click}>hi</button>
  );
}

test('test', () => {
  render(<Component>)
  userEvent.click(screen.getByRole('button'))

  // ??
  await flushPromises()
  expect().throwError()
})

Answer 1

React-testing-library 提倡“像真实用户一样进行测试”，留下内部实现。遵循这一原则，您应该始终触发用户交互，并对视觉事物（或真实人类会体验到的事物）进行断言。

https://testing-library.com/docs/guiding-principles

您的组件“视觉输出”不受您发出的请求结果的影响，因此如果您想坚持 RTL 思维模式，则没有什么可测试的。事实上，你是在尝试测试内部实现，而这正是 RTL 试图避免的。

如果您修改组件并使其显示某种 success/error 消息，那么您可以测试 promise 拒绝是否会触发错误消息。

如何在未处理的承诺拒绝中测试抛出

How to test a throw in an unhandled promise rejection

javascript

unit-testing

reactjs

jestjs

react-testing-library