时间戳

首页 > 解决方案 > 使用 React 测试库测试嵌套的 JSX

reactjs - 使用 React 测试库测试嵌套的 JSX

问题描述

我正在尝试运行一个测试，我可以在其中验证正在呈现 userList 道具。截至目前，当我运行 screen.debug() 时，它会显示除返回区域内代码主体中嵌套括号内的 HTML 之外的所有 HTML。下面是我的测试和使用它的组件（UserList）。

describe("The App component", () => {
  it("renders a UserList component",  async () => {
    render(<UsersList userList={[{id: 0, title: "asdf"}, {id: 1, title: "zxcv"}]}/>);
    const ul = await screen.getByRole("list");
    expect(ul.childElementCount > 0).toBe(true);
  })
})

import * as React from "react";

const UsersList = (props: any) => {
  return (
    <>
      <ul>
        {
          props.usersList ? props.usersList.map((user: any) => {
              return (
                <li key={user.id}>{user.title}</li>
              )
            })
            : null
        }
      </ul>
    </>
  )
}

export default UsersList

出现以下错误：

    ✕ renders a UserList component (9 ms)

  ● The App component › renders a UserList component

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      28 |     render(<UsersList userList={[{id: 0, title: "asdf"}, {id: 1, title: "zxcv"}]}/>);
      29 |     const ul = await screen.getByRole("list");
    > 30 |     expect(ul.childElementCount > 0).toBe(true);
         |                                      ^
      31 |   })
      32 | })

      at Object.<anonymous> (src/tests/App.test.tsx:30:38)

标签： reactjsjestjsreact-testing-library

解决方案

看起来UsersList组件期望的实际道具是，usersList因此您必须在测试中传递正确的道具：

describe("The App component", () => {
    it("renders a UserList component",  async () => {
        render(<UsersList usersList={[{id: 0, title: "asdf"}, {id: 1, title: "zxcv"}]}/>);
        const ul = await screen.getByRole("list");
        expect(ul.childElementCount > 0).toBe(true);
    })
})

推荐阅读