javascript - 如何使用 React 测试库测试此组件 - 只是这个新测试库的初学者

Question

我有两个组件正在学习使用react-testing-library进行测试，但我陷入了中间。

我的组件是 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>
    )
}

filteredData 属性是一个具有以下值的数组::

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

您可能不需要对如此简单的组件进行测试，但如果您仍然想添加测试，可以执行如下操作。

您可能需要从测试库导入 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()
});