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

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

description（“应用程序组件”，（）=>{
它（“呈现用户列表组件”，异步（）=>{
render（）；
const ul=wait screen.getByRole（“列表”）；
期望（ul.childElementCount>0）.toBe（true）；
})
})

它看起来像是

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

description（“应用程序组件”，（）=>{
它（“呈现用户列表组件”，异步（）=>{
render（）；
const ul=wait screen.getByRole（“列表”）；
期望（ul.childElementCount>0）.toBe（true）；
})
})

我想你把

用户列表

的道具拼错了，而不是

用户列表

？是的，像这样的小错误最近让我很难受。