如果 React-Error-Boundary 从错误中恢复，如何编写测试？

Question

我的应用程序从 API 获取数据，然后呈现数据。如果输入不存在的值，则 error boundary 触发并捕获错误。

我正在使用 react-error-boundary 库中的 ErrorBoundary 和 react-query 库中的 QueryErrorResetBoundary。

使用我的 React-Error-Boundary 设置，我的应用程序在 error 发生时有一个 error boundary 触发器，并且能够通过重置 state 从 error 中恢复].我目前通过了 error boundary 在 error 发生时触发的测试。现在我想测试 error boundary 是否可以从触发的 error boundary 中恢复并重置 state。请让我知道如何使用 Jest 和 React Testing Library。

应用组件

const ErrorFallback = ({ error, resetErrorBoundary }) => {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
};

const App = () => {
  const [idQuery, setIdQuery] = useState(0);

  return (
    <div>
      <QueryErrorResetBoundary>
        <ErrorBoundary
          FallbackComponent={ErrorFallback}
          onReset={() => {
            setIdQuery(0);
          }}
          resetKeys={[idQuery]}
        >
          <Home idQuery={idQuery} setIdQuery={setIdQuery} />
        </ErrorBoundary>
      </QueryErrorResetBoundary>
      <ReactQueryDevtools initialIsOpen={true} />
    </div>
  );
};

App.test.js

const App = () => {
    const [state, setState] = useState(0)
    return (
        <QueryErrorResetBoundary>
            <ErrorBoundary
                FallbackComponent={ErrorFallback}
                onReset={() => {
                    setState(0);
                }}
                resetKeys={[state]}
            >
                <Child />
            </ErrorBoundary>
        </QueryErrorResetBoundary>
    )
}

const Child = () => {
    throw new Error()
}

describe("Error Boundary", () => {
    beforeEach(() => {
        render(
            <App />
        );
    });

    it("should trigger the Error Boundary when an error occurs", () => {
        const errorMessage = screen.getByTestId("error-boundary-message");
        expect(errorMessage).toBeInTheDocument();
    });

    it("should recover from Error Boundary", () => {
        // ???
    })

});

Answer 1

在不知道您实际想要做什么的情况下，我怀疑这样的事情可能会帮助您入门：

const App = () => {
    const [isRecovered,setIsRecovered] = useState(false)
    return (
        <QueryErrorResetBoundary>
            <ErrorBoundary
                FallbackComponent={ErrorFallback}
                onReset={() => {
                    setIsRecovered(true)
                }}
                resetKeys={[isRecovered]}
            >
                <Child isRecovered={isRecovered} />
            </ErrorBoundary>
        </QueryErrorResetBoundary>
    )
}

const Child = ({isRecovered}) => {
    if(!isRecovered) throw new Error();
    return 'All Good';
}

至少您可以将 ErrorBoundary 的代码添加到您的问题中。

如果 React-Error-Boundary 从错误中恢复，如何编写测试？

How to write a test if React-Error-Boundary recovers from error?

reactjs

jestjs

react-testing-library

react-hooks

react-error-boundary