如何使用 react 测试库测试这个组件 - 只是这个新测试库的入门

Question

I have 2 components that i am learning to test with react-testing-library but i am stuck in the middle.

My components is NestedLists.js

import React from 'react'

export const NestedLists = ({filteredData}) => {
    return (
        <ul>
            {filteredData && filteredData.map((m,i) => {
                return (
                <li key={i}>
                 {m.id}
                 {m.children && <NestedLists filteredData={m.children} />}
                </li>
        );
      })}
        </ul>
    )
}

and filteredData props is an array with the following values ::

export const filteredData = [{
    "id": 1,
    "label": "List item 1",
    "parent_id": 0
  },
  {
    "id": 9,
    "label": "List item 9",
    "parent_id": 8
  },
  {
    "id": 8,
    "label": "List item 8",
    "parent_id": 1
  },
  {
    "id": 5,
    "label": "List item 5",
    "parent_id": 1
  },
  {
    "id": 6,
    "label": "List item 6",
    "parent_id": 1
  },
  {
    "id": 7,
    "label": "List item 7",
    "parent_id": 1
  },
  {
    "id": 10,
    "label": "List item 10",
    "parent_id": 8
  },
  {
    "id": 2,
    "label": "List item 2",
    "parent_id": 0
  }
]

I have done some tests but those are not working. Kindly suggests some of the tests that i can do on the above component with testing library::

My tests that are npt working or failing is below:

NestedLists.test.js

import React from 'react';
import { render, waitForElement } from '@testing-library/react';
import {NestedLists} from '../components/NestedLists';
import {apiData} from '../fixtures'


test('renders NestedLists components', async () => {
  const { getByText } = render(<NestedLists filteredData = {apiData} />);
  await waitForElement(() => {
      expect(getByText(props.filteredData[0].id)).toBeTruthy();
  })
});

Answer 1

You probably don't need test for such simple component but if you still want to add test you can do something like below.

You might need to import jest-dom from testing library to use toBeInTheDocument

import React from 'react';
import { render} from '@testing-library/react';
import {NestedLists} from '../components/NestedLists';
import {apiData} from '../fixtures'


test('renders NestedLists components', async () => {
  const { findByText} = render(<NestedLists filteredData = {apiData} />);
  const firsListItem = await getByText(apiData[0].id);
  epxect(firstListItem).toBeInTheDocument()
});

Answer 2

You can test like all elements are rendered. Render the component using render from @testing-library/react by passing proper props and check all elements are present

Here is the codesandbox - https://codesandbox.io/s/sad-merkle-lpnrw You can see test in test tab

import React from "react";
import { render } from "@testing-library/react";
import { NestedLists } from "./App";

const filteredData = [
  {
    id: 1,
    label: "List item 1",
    parent_id: 0
  },
  {
    id: 9,
    label: "List item 9",
    parent_id: 8
  },
  {
    id: 8,
    label: "List item 8",
    parent_id: 1
  },
  {
    id: 5,
    label: "List item 5",
    parent_id: 1
  },
  {
    id: 6,
    label: "List item 6",
    parent_id: 1
  },
  {
    id: 7,
    label: "List item 7",
    parent_id: 1
  },
  {
    id: 10,
    label: "List item 10",
    parent_id: 8
  },
  {
    id: 2,
    label: "List item 2",
    parent_id: 0
  }
];

it("renders search screen without crash", () => {
  const { getByText } = render(<NestedLists filteredData={filteredData} />);
  expect(getByText("1")).toBeDefined();
  expect(getByText("9")).toBeDefined();
  expect(getByText("8")).toBeDefined();
  expect(getByText("5")).toBeDefined();
  expect(getByText("6")).toBeDefined();
  expect(getByText("7")).toBeDefined();
  expect(getByText("10")).toBeDefined();
  expect(getByText("2")).toBeDefined();
});