1

对于这个测试用例，我正在测试一个表单，以查看表单提交后是否在 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!'
        }
      ])
    );
  });
4

2 回答 2

0

好的，事实证明问题在于模拟服务器的错误响应没有正确处理。我所要做的就是向 useMutation 钩子添加一个 onError 方法，如下所示：

const [fnMutate, tuple] = useMutation(CREATE_USER_INVITE_MUTATION, {
  onError: error => console.error(error)
});
于 2022-01-17T06:00:45.190 回答
0

假设您的测试由于代码的最后一点而失败，即

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

您可以简单地将其更新为此&它应该可以工作：

expect(await screen.findByText(errorMessage)).toBeInTheDocument();
于 2022-01-13T16:39:09.437 回答