reactjs - 使用 testing-library 和 jest 的 React 组件抛出的测试错误

Question

遵循本 blog post 中解释的 Kent C Dodds 提供者模式，我有一个上下文提供程序组件以及一个使用该上下文的钩子(Hook)。
钩子(Hook)防止在提供者之外使用它，

export function useUser() {
  const { user } = useContext(UserContext) || {};
  const { switchUser } = useContext(SwitchUserContext) || {};
  if (!user || !switchUser) {
    throw new Error('Cannot use `useUser` outside of `UserProvider`');
  }
  return { user, switchUser };
}

为了测试这个场景，我创建了一个 TestComponent并使用 useUser钩在里面。

function TestComponent() {
  const { user, switchUser } = useUser();
  return (
    <>
      <p>User: {user.name}</p>
      <button onClick={switchUser}>Switch user</button>
    </>
  );
}

我是这样测试的

  test('should throw error when not wrapped inside `UserProvider`', () => {
    const err = console.error;
    console.error = jest.fn();
    let actualErrorMsg;
    try {
      render(<TestComponent />);
    } catch(e) {
      actualErrorMsg = e.message;
    }
    const expectedErrorMsg = 'Cannot use `useUser` outside of `UserProvider`';
    expect(actualErrorMsg).toEqual(expectedErrorMsg);

    console.error = err;
  });

我目前必须模拟 console.error然后在测试结束时将其设置为原始值。有用。但我想让它更具声明性和更简单。有没有好的模式来实现它？
使用 .toThrow() 的东西也许？
我有一个 codesandbox为此，上面的代码可以在 UserContext.js 中找到和 UserContext.test.js .
注意:测试可以在 Tests 下的代码框本身中运行。标签。

Answer 1

正如你已经提到的，有 expect().toThrow() :)
所以在你的情况下:

  test("should throw error when not wrapped inside `UserProvider`", () => {
    expect(() => render(<TestComponent />))
      .toThrow("Cannot use `useUser` outside of `UserProvider`");
  });

关于console.error :
目前没有办法关闭默认错误日志。
如果要隐藏错误，还需要mock console.error .
当你模拟像 console.error 这样的函数时您想在 afterEach 中恢复它们回调，以便在测试失败时也恢复它们。