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

Question

我正在尝试运行一项测试，我可以在其中验证是否正在呈现 userList 道具。截至目前，当我运行 screen.debug() 时，它显示了 [=32= 代码主体中嵌套括号内除 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)

Answer 1

看起来 UsersList 组件期望的实际 prop 是 usersList 所以你必须在你的测试中传递正确的 prop:

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);
    })
})

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

Testing nested JSX with React Testing Library

reactjs

jestjs

react-testing-library