Javascript 如何使用react测试库测试此组件-这只是使用此新测试库的一个开端 我有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>
    )
}

我做了一些测试，但都不起作用。请建议我使用测试库对上述组件进行一些测试：

我的测试工作正常或失败如下：

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

从“React”导入React；
从'@testing library/react'导入{render，waitForElement}；
从“../components/nestedList”导入{nestedList}；
从“../fixtures”导入{apiData}
测试（'呈现嵌套列表组件'，异步（）=>{
const{getByText}=render（）；
等待waitForElement（（）=>{
expect（getByText（props.filteredata[0].id））.toBeTruthy（）；
})
});

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

您可能需要从测试库中导入jest dom以用于BEINTHEDOMENT

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

从“React”导入React；
从'@testing library/react'导入{render}；
从“../components/nestedList”导入{nestedList}；
从“../fixtures”导入{apiData}
测试（'呈现嵌套列表组件'，异步（）=>{
const{findByText}=render（）；
const firsListItem=await getByText（apiData[0].id）；
epxect（firstListItem）.toBeInTheDocument（）
});

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

您可能需要从测试库中导入jest dom以用于BEINTHEDOMENT

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

从“React”导入React；
从'@testing library/react'导入{render}；
从“../components/nestedList”导入{nestedList}；
从“../fixtures”导入{apiData}
测试（'呈现嵌套列表组件'，异步（）=>{
const{findByText}=render（）；
const firsListItem=await getByText（apiData[0].id）；
epxect（firstListItem）.toBeInTheDocument（）
});

您可以像呈现所有元素一样进行测试。使用@testing library中的Render渲染组件/通过传递适当的道具进行反应，并检查所有元素是否存在

这是代码沙盒- 您可以在测试选项卡中看到测试

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

从“React”导入React；
从“@testing library/react”导入{render}”；
从“/App”导入{NestedLists}；
常量过滤器数据=[
{
id:1，
标签：“列表项1”，
父id:0
},
{
id:9，
标签：“清单项目9”，
家长编号：8
},
{
id:8，
标签：“清单项目8”，
家长id:1
},
{
id:5，
标签：“清单项目5”，
家长id:1
},
{
id:6，
标签：“清单项目6”，
家长id:1
},
{
id:7，
标签：“清单项目7”，
家长id:1
},
{
id:10，
标签：“清单项目10”，
家长编号：8
},
{
id:2，
标签：“清单项目2”，
父id:0
}
];
它（“在没有崩溃的情况下呈现搜索屏幕”，（）=>{
const{getByText}=render（）；
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（）；
});

您可以像呈现所有元素一样进行测试。使用@testing library中的Render渲染组件/通过传递适当的道具进行反应，并检查所有元素是否存在

这是代码沙盒- 您可以在测试选项卡中看到测试

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

从“React”导入React；
从“@testing library/react”导入{render}”；
从“/App”导入{NestedLists}；
常量过滤器数据=[
{
id:1，
标签：“列表项1”，
父id:0
},
{
id:9，
标签：“清单项目9”，
家长编号：8
},
{
id:8，
标签：“清单项目8”，
家长id:1
},
{
id:5，
标签：“清单项目5”，
家长id:1
},
{
id:6，
标签：“清单项目6”，
家长id:1
},
{
id:7，
标签：“清单项目7”，
家长id:1
},
{
id:10，
标签：“清单项目10”，
家长编号：8
},
{
id:2，
标签：“清单项目2”，
父id:0
}
];
它（“在没有崩溃的情况下呈现搜索屏幕”，（）=>{
const{getByText}=render（）；
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（）；
});

props.filteredData[0]。id不能作为道具用于测试。困惑的正在寻找更好的建议。您可以使用apiData.FilteredatarReferenceError:未定义Filteredata。这个错误来了，我的错。它应该是apiData[0]。idprops.filteredData[0]。id不能作为道具用于测试。困惑的正在寻找更好的建议。您可以使用apiData.FilteredatarReferenceError:未定义Filteredata。这个错误来了，我的错。它应该是apiData[0]。id