RTL中的waitForElementToBeRemoved错误超时

html5 • • 问答

我有一个使用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('/')
  })

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

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

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

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

使用 waitForElementToBeRemoved 更新测试用例

错误：

 Timed out in waitForElementToBeRemoved.

    Ignored nodes: comments, <script />, <style />
    <html>
      <head />
      <body>
        <div>
          <div>
            <div
             
            >
              <form
               
              >
                <div>
                  <label
                    for="email-input"
                  >
                    Email
                  </label>
                  <input
                   
                   
                    name="email"
                    type="email"
                    value="neeraj@gmail.com"
                  />
                </div>
                <div>
                  <label
                    for="pass-input"
                  >
                    Password
                  </label>
                  <input
                   
                   
                    name="password"
                    type="password"
                    value="neeraj"
                  />
                </div>
                <button
                 
                  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)

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

代码沙盒链接

以上是RTL中的waitForElementToBeRemoved错误超时的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>