Testing nested JSX with React Testing Library

Question

I am trying to run a test where I can validate that a userList prop is being rendered. As of now when I run screen.debug(), it shows all the HTML except the HTML inside the nested brackets in the body of the code within the return area. Below is my test and the component (UserList) that is using it.

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

With the following error:

    ✕ 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)

I think you misspelled the props for userList instead of usersList? — kmhigashioka
– kmhigashioka, Commented Mar 3, 2021 at 5:36
yep, little typos like that have been getting me bad lately. — brff19
– brff19, Commented Mar 3, 2021 at 12:10

Irvin Sandoval · Accepted Answer · 2021-03-03 05:55:36Z

2

It looks like the actual prop that UsersList component expects is usersList so you have to pass the right prop in your test:

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

answered Mar 3, 2021 at 5:55

Irvin Sandoval

7517 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Testing nested JSX with React Testing Library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related