标签: react-testing

我想测试我的自定义钩子，但在 React 18 中 @testing-library/react-hooks 库不起作用，而是我使用 @testing-library/react 它具有 renderHook 函数并且工作正常，但该库没有 waitForNextUpdate异步钩子函数。因此，我无法测试我的自定义异步挂钩。

我已经到处寻找这个问题的答案，并且可能尝试了 99% 的方法，所以我决定开始一个自己的线程，这样其他人就可以仔细查看我目前拥有的内容，看看他们是否能发现问题。

我对 Jest 测试非常陌生，决定尝试将其实现到我们的代码库中。我使用本指南来确保我所做的一切都是完美的，但仍然发生此错误\n使用 Jest 测试 React 应用程序的实用指南

我正在测试一个简单的功能组件，该组件使用react-hook-form在页面上生成表单，然后通过redux调用将完成的表单发送到我们的后端

我已将 setupTests.js 文件设置为：

import \'@testing-library/jest-dom\'\nimport { configure } from "enzyme"\nimport Adapter from "enzyme-adapter-react-16";\nimport \'@testing-library/jest-dom/extend-expect\';\n\nconfigure({ adapter: new Adapter() });\n

将我的 package.json 测试命令更新为

"test": "react-scripts test --env=jsdom --setupFiles ./src/setupTests.js"\n

这是我尝试通过简单测试运行的测试规范：

import React from \'react\';\nimport { render as rtlRender, screen } from \'@testing-library/react\';\nimport { Provider } from \'react-redux\';\nimport store from \'../../../store\';\nimport AddNewProperty from \'./AddNewProperty\';\n\nconfigure({ adapter: new Adapter() });\n\nconst render = component => rtlRender(\n …

我的文件中有一个自定义 Hook，我必须经常模拟它以进行多个测试。我可以将模拟放在单独的文件中，然后将其导入到测试中吗？

挂钩文件

export default function myHook(key) {
    const { state, app } = StateFromSomePlace();

    const setParameter = useCallback(
        newValue => {
            // do something
        },
        [app, key, state.something]
    );

    if (key) {
       // do something
        const parameter = // something;
        return [parameter, setParameter];
    }
}

我想使用 jest 来模拟上面的内容以返回一些东西（我可以），但我想在助手/设置文件中这样做，这样我就可以通过导入模拟来在多个测试中使用它。

我在这里先向您的帮助表示感谢。:)

我正在学习React测试库（多年其他语言的TDD经验）

React 测试库的文档说，当getByText失败时，它“但是会打印正在测试的 DOM 的状态”：

https://testing-library.com/docs/dom-testing-library/api-debugging/

然而，在当前的 RTL 中，这种情况不会发生在我身上。

相反，我得到这个：

  \xe2\x97\x8f loads and displays greeting\n\n    TestingLibraryElementError: Unable to find an element with the text: the current weather is: overcast clouds. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.\n\n    Ignored nodes: comments, <script />, <style />\n    <h1\n      data-testid="currentWeatherOutput"\n    />\n\n      27 | …

1. 我读到 act / waitFor 是等待 DOM 更新。我还读到渲染是同步的。我假设我不需要用 act/waitFor 包装渲染，因为当我单击或测试时 DOM 总是会更新？它是否正确 ？

2. 接下来，我不明白为什么我需要 act / waitFor ？ 我不能只是等待吗？ 对于测试A，我使用user.click，并且我看到在线示例代码使用await。它似乎在我的笔记本电脑上运行良好。

   然而，在测试 B 中，当我看到 fireEvent.click 的一些示例代码时，他们使用了 waitFor。我尝试使用等待，它标记我“等待对这种类型的表达式没有影响”。但“await waitFor()”有效。为什么是这样 ？

首先十分感谢 ！

Test A
it('user.click', async () => {
  render(
    <BrowserRouter>
      <Notes />
    </BrowserRouter>
  );

  const checkBox = screen.getByRole('checkbox');
  await user.click(checkBox);
  const prev = screen.getByRole('button', { name: 'Prev' });
  expect(prev).toBeEnabled();
});

Test B
it('fireEvent.click', async () => {
  render(
    <BrowserRouter>
      <Notes />
    </BrowserRouter>
  );

  const checkBox = screen.getByRole('checkbox');
  await fireEvent.click(checkBox);
  const prev = …