使用 React、Jest、React-Testing-Library 測試失敗案例

Question

對於這個測試用例，我正在測試一個表單，以查看表單提交后是否在 DOM 中出現錯誤消息，並且來自服務器的響應返回錯誤。 我正在使用“MSW”（Mocked Service Worker JS）模擬表單的 API 請求和響應。 在終端中，每當我用 jest 運行測試時，它都會失敗，但是在我在測試中設置 screen.debug() 之后，我編寫了檢查錯誤消息是否存在，我發現錯誤消息實際上存在。

測試用例失敗並顯示以下消息：

 FAIL  src/components/Form/Form.test.tsx
  Form
    ○ skipped Should show "Add User" button
    ○ skipped Should open modal, when button is pressed
  Form submit
    ✕ Should show an error alert message when form fails to submit (519 ms)
    ○ skipped Should show a "success" alert message when form is successfully submitted
  Form validation
    ○ skipped Form validation successfully handles invalid user input
    ○ skipped Form validation succesfully handles valid user input

  ● Form submit › Should show an error alert message when form fails to submit

    Failed to submit form!

      at new ApolloError (node_modules/@apollo/client/errors/index.js:29:28)
      at node_modules/@apollo/client/core/QueryManager.js:91:47
      at both (node_modules/@apollo/client/utilities/observables/asyncMap.js:16:53)
      at node_modules/@apollo/client/utilities/observables/asyncMap.js:9:72
      at Object.then (node_modules/@apollo/client/utilities/observables/asyncMap.js:9:24)
      at Object.next (node_modules/@apollo/client/utilities/observables/asyncMap.js:17:49)
      at notifySubscription (node_modules/zen-observable/lib/Observable.js:135:18)
      at onNotify (node_modules/zen-observable/lib/Observable.js:179:3)
      at SubscriptionObserver.next (node_modules/zen-observable/lib/Observable.js:235:7)
      at node_modules/@apollo/client/utilities/observables/iteration.js:4:68
          at Array.forEach (<anonymous>)
      at iterateObserversSafely (node_modules/@apollo/client/utilities/observables/iteration.js:4:25)
      at Object.next (node_modules/@apollo/client/utilities/observables/Concast.js:25:21)
      at notifySubscription (node_modules/zen-observable/lib/Observable.js:135:18)
      at onNotify (node_modules/zen-observable/lib/Observable.js:179:3)
      at SubscriptionObserver.next (node_modules/zen-observable/lib/Observable.js:235:7)
      at node_modules/@apollo/client/link/http/createHttpLink.js:103:26

Test Suites: 1 failed, 1 total
Tests:       1 failed, 5 skipped, 6 total
Snapshots:   0 total
Time:        4.032 s, estimated 5 s

這是測試：

  it.only('Should show an error alert message when form fails to submit', async () => {
    mockServer.use(createUserInviteHandlerException);

    const errorMessage = 'Failed to submit form!';

    userEvent.click(addUserButton);

    const emailTextField = await screen.findByRole('textbox', {name: 'Email'});
    const fullNameTextField = await screen.findByRole('textbox', {name: 'Full Name'});
    const phoneNumberTextField = await screen.findByRole('textbox', {name: 'Phone Number'});
    userEvent.type(emailTextField, 'tess.dinh@onetutree.co');
    userEvent.type(fullNameTextField, 'Nadanuda Bugg');
    userEvent.type(phoneNumberTextField, '9091221233');

    const submitButton = screen.getByText('Send Invitation');
    userEvent.click(submitButton);

    await waitFor(async () =>
      expect(await screen.findByText(errorMessage)).toBeInTheDocument()
    );
  });
});

這是模擬服務器的請求處理程序：

export const createUserInviteHandlerException =
  graphql.mutation('CreateUserInvite', (_, res, ctx) => {
    return res(
      ctx.delay(),
      ctx.errors([
        {
          status: 400,
          message: 'Failed to submit form!'
        }
      ])
    );
  });

Answer 1

假設您的測試由於代碼的最后一點而失敗，即

await waitFor(async () =>
  expect(await screen.findByText(errorMessage)).toBeInTheDocument()
);

您可以簡單地將其更新為此&它應該可以工作：

expect(await screen.findByText(errorMessage)).toBeInTheDocument();

Answer 2

好的，事實證明問題在於模擬服務器的錯誤響應沒有正確處理。 我所要做的就是向 useMutation 鈎子添加一個 onError 方法，如下所示：

const [fnMutate, tuple] = useMutation(CREATE_USER_INVITE_MUTATION, {
  onError: error => console.error(error)
});