Reactjs 如何测试组件中异步呈现的某些元素？_Reactjs_Async Await_React Testing Library

Reactjs 如何测试组件中异步呈现的某些元素？

reactjs

Reactjs 如何测试组件中异步呈现的某些元素？,reactjs,async-await,react-testing-library,Reactjs,Async Await,React Testing Library,我正在更新使用React构建的公文包项目，最近我开始学习使用Jest和React测试库进行测试，所以我想重构项目以合并测试我有两个正在使用的组件：Projects，和ProjectCard Projects是一个容器组件，它从公用文件夹中的本地JSON文件中获取项目信息，然后为每个项目呈现一个ProjectCard组件以下是项目组件的代码： const Projects = () => { const sectionName = navLinks[0].toLowerCase(

我正在更新使用React构建的公文包项目，最近我开始学习使用Jest和React测试库进行测试，所以我想重构项目以合并测试

我有两个正在使用的组件：

Projects

，和

ProjectCard

Projects

是一个容器组件，它从公用文件夹中的本地JSON文件中获取项目信息，然后为每个项目呈现一个

ProjectCard

组件

以下是

项目

组件的代码：

const Projects = () => {
    const sectionName = navLinks[0].toLowerCase();

    const [projects, setProjects] = useState([]);

    useEffect(() => {
        const getProjects = async () => {
            const response = await fetch('./assets/Projects.json');
            const json = await response.json();
            setProjects(json);
        };

        getProjects();

        // cleanup
        return () => {
            setProjects([]);
        };
    }, []);

    return (
        <section className={sectionName} id={sectionName} data-testid={sectionName}>
            <Heading text={sectionName} color='maire' />
            <ul className='projects__list'>
                {projects.map((project) => (
                    <ProjectCard key={project.projectTitle} project={project} />
                ))}
            </ul>
        </section>
    );
};

我看到的错误是：

Unable to find role="listitem"

<body>
  <div>
    <section class="projects" data-testid="projects" id="projects">
      <h2 class="heading text-maire">
        projects
      </h2>
      <ul
        class="projects__list"
      />
    </section>
  </div>
</body>

  16 | test('renders project cards without error', async () => {
  17 |      render(<Projects />);
> 18 |      const listItems = await screen.findAllByRole('listitem');
     |                                     ^
  19 |      await waitFor(() => expect(listItems.length).not.toBe(0));
  20 | });
  21 |

  at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:173:27)
  at findAllByRole (node_modules/@testing-library/dom/dist/query-helpers.js:101:33)
  at Object.<anonymous> (src/components/Projects/Projects.test.jsx:18:33)

找不到role=“listitem”
项目

16 |测试（'无错误地呈现项目卡'，异步（）=>{
17 | render（）；
>18 | const listItems=等待屏幕。findAllByRole（“listitem”）；
|                                     ^
19 | wait waitFor（（）=>expect（listItems.length）.not.toBe（0））；
20 | });
21 |
在waitForWrapper（node_modules/@testing library/dom/dist/wait for.js:173:27）
在findAllByRole（node_modules/@testing library/dom/dist/query helpers.js:101:33）
反对。（src/components/Projects/Projects.test.jsx:18:33）

除此之外，既然所有JSX都是异步呈现的，那么我如何执行ProjectCard组件的测试呢？如果有人能帮我解决这个问题，我将不胜感激！谢谢

你有没有试着把你的findAllByRole放在你的等待中<代码>等待等待（（）=>expect（screen.getAllByRole（'listitem'）.length）.not.toBe（0））@RomanMkrtchian我刚刚尝试了你的建议，但不幸的是我收到了与上面相同的错误消息。你在测试中是否在模仿

ProjectCard

？测试过程中，

li

未在

ul

内呈现，如错误消息所示：

。

Unable to find role="listitem"

<body>
  <div>
    <section class="projects" data-testid="projects" id="projects">
      <h2 class="heading text-maire">
        projects
      </h2>
      <ul
        class="projects__list"
      />
    </section>
  </div>
</body>

  16 | test('renders project cards without error', async () => {
  17 |      render(<Projects />);
> 18 |      const listItems = await screen.findAllByRole('listitem');
     |                                     ^
  19 |      await waitFor(() => expect(listItems.length).not.toBe(0));
  20 | });
  21 |

  at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:173:27)
  at findAllByRole (node_modules/@testing-library/dom/dist/query-helpers.js:101:33)
  at Object.<anonymous> (src/components/Projects/Projects.test.jsx:18:33)