Как протестировать этот компонент с помощью библиотеки реагирующего тестирования - только начало с этой новой библиотекой тестирования

Question

У меня есть 2 компонента, которые я учусь тестировать с помощью библиотеки реагирования-тестирования, но я застрял в середине.

Мои компоненты - 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>
    )
}

и FilterData Props - это массив со следующими значениями:

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
  }
]

Я провел несколько тестов, но они не работают. Пожалуйста, предложите некоторые из тестов, которые я могу выполнить на вышеуказанном компоненте с помощью библиотеки тестирования: *

Мои тесты, которые npt работают или не работают, приведены ниже:

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

Вы можете проверить, как все элементы отображаются. Выполните рендеринг компонента с помощью рендера из @ testing-library / реакции, передав соответствующие реквизиты и проверив наличие всех элементов

Вот код и окно - https://codesandbox.io/s/sad-merkle-lpnrw Вы можете увидеть тест на вкладке теста

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

Answer 2

Возможно, вам не нужен тест для такого простого компонента, но если вы все еще хотите добавить тест, вы можете сделать что-то вроде ниже.

Возможно, вам придется импортировать jest-dom из библиотеки тестирования, чтобы использовать 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()
});