如何使用反应测试库测试这个组件 - 只是这个新测试库的初学者答案

【问题标题】：How to test this component with react testing library - just a starter with this new testing library如何使用反应测试库测试这个组件 - 只是这个新测试库的初学者
【发布时间】：2020-05-04 13:25:12
【问题描述】：

我有 2 个组件正在学习使用 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 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();
  })
});

【问题讨论】：

标签： javascript reactjs react-testing-library

【解决方案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()
});

【讨论】：

props.filteredData[0].id 不能在测试中用作道具。使困惑。寻找更好的建议。
你可以使用 apiData.filteredData
ReferenceError: filteredData is not defined 。即将出现此错误。
我的错。它应该是 apiData[0].id

【解决方案2】：

您可以像渲染所有元素一样进行测试。使用来自@testing-library/react 的渲染通过传递适当的道具来渲染组件并检查所有元素是否存在

这里是密码箱 - 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();
});

【讨论】：