RTL 中的 waitForElementToBeRemoved 错误超时

Question

RTL 中的 waitForElementToBeRemoved 错误超时

Nee*_*ani 7 reactjs react-testing-library

我有一个使用Formik制作的基本登录表单，只是尝试编写 RTL 和 jest 代码来填写详细信息、提交表单并导航到主页。因此，写了以下内容：

 it('Fill the form and login', async () => {
    render(<Login />)

    await userEvent.type(screen.getByTestId('emailInput'), 'neeraj@gmail.com')
    await userEvent.type(screen.getByTestId('passwordInput'), 'neeraj')
    await userEvent.click(screen.getByTestId('submitBtn'))

    expect(window.location.pathname).toBe('/')
  })

Run Code Online (Sandbox Code Playgroud)

上面的测试已经通过，但出现了经典的行为错误。

When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

Run Code Online (Sandbox Code Playgroud)

因此，参考此博客文章并按照建议使用waitForElementToBeRemoved函数，但现在测试因超时错误而失败。

使用 waitForElementToBeRemoved 更新测试用例

When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

Run Code Online (Sandbox Code Playgroud)

错误：

 Timed out in waitForElementToBeRemoved.

    Ignored nodes: comments, <script />, <style />
    <html>
      <head />
      <body>
        <div>
          <div>
            <div
              data-testid="loginCard"
            >
              <form
                data-testid="loginForm"
              >
                <div>
                  <label
                    for="email-input"
                  >
                    Email
                  </label>
                  <input
                    data-testid="emailInput"
                    id="email-input"
                    name="email"
                    type="email"
                    value="neeraj@gmail.com"
                  />
                </div>
                <div>
                  <label
                    for="pass-input"
                  >
                    Password
                  </label>
                  <input
                    data-testid="passwordInput"
                    id="pass-input"
                    name="password"
                    type="password"
                    value="neeraj"
                  />
                </div>
                <button
                  data-testid="submitBtn"
                  type="submit"
                >
                  Submit
                </button>
              </form>
            </div>
          </div>
        </div>
      </body>
    </html>

      19 |
      20 |     expect(window.location.pathname).toBe('/')
    > 21 |     await waitForElementToBeRemoved(screen.getByTestId('emailInput'))
         |           ^
      22 |   })
      23 | })
      24 |

      at waitForElementToBeRemoved (node_modules/@testing-library/dom/dist/wait-for-element-to-be-removed.js:22:24)
      at Object.<anonymous> (tests/login.test.js:21:11)

Run Code Online (Sandbox Code Playgroud)

试图将这三个userEvent包装在act函数中，但得到相同的超时错误，无法弄清楚我哪里出错了。

代码沙盒链接

Answer 1

Sub*_*aik 1

我设法通过了测试用例，没有任何行为警告。

由于当用户单击按钮时您正在调用 setTimeout 这是一个异步函数submitBtn，因此您必须等待承诺解决。

import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import React from 'react'

import Login from './../pages/login'

describe('Login Page', () => {
  it('renders without crashing', () => {
    render(<Login />)
    expect(screen.getByTestId('loginCard')).toBeInTheDocument()
  })
  
  it('Fill the form and login', async () => {
    render(<Login />)

    userEvent.type(screen.getByLabelText(/email/i), 'neeraj@gmail.com')
    userEvent.type(screen.getByLabelText(/password/i), 'neeraj')
    userEvent.click(screen.getByTestId('submitBtn'))

    await waitFor(() => expect(window.location.pathname).toBe('/'))
  })
})

Run Code Online (Sandbox Code Playgroud)

您还可以在单击事件上使用异步操作来完成此操作，这将等待承诺解决并状态更新完成。

import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import React from 'react'

import Login from './../pages/login'

describe('Login Page', () => {
  it('renders without crashing', () => {
    render(<Login />)
    expect(screen.getByTestId('loginCard')).toBeInTheDocument()
  })
  
  it('Fill the form and login', async () => {
    render(<Login />)

    userEvent.type(screen.getByLabelText(/email/i), 'neeraj@gmail.com')
    userEvent.type(screen.getByLabelText(/password/i), 'neeraj')
    await act(async () => userEvent.click(screen.getByTestId('submitBtn')))

    expect(window.location.pathname).toBe('/')
  })
})

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，6 月前
查看次数：	186 次
最近记录：	4 年，6 月前