如果组件 returns 以 react-testing-library 开头的空数组如何测试组件？

Question

我正在尝试学习 react-testing-library，但我被困在了这一点上。我有一个数组 returns 一开始是一个空数组，但随后我可以在列表中添加项目。在我添加项目之前，组件在我添加项目后显示没有可用数据，它在每个项目旁边显示一些文本和删除按钮。测试将是关于单击删除按钮并通过单击打开模式。我的测试找到了删除按钮，但它抛出错误提示“Expected: 1 Received: [ ]”，因为它在组件呈现的开头总是 returns “无数据可用”。显然是因为数组 returns 一开始是空的，但我不明白。在这里我分享我的组件。

<div>
  {props.formData && props.formData.length !== 0 ? (
    props.formData.map((widget, index) => (
      <div
        id="component-item"
        className="widget-wrapper"
        key={index}
      >
        <div className="name-language">
          <p>Name: {widget.name}</p>
          <p>Language: {widget.language}</p>
        </div>
        <button
          onClick={() => toggleVisible(index)}
          type="button"
          className="delete-button"
          data-testid="component-delete"
        >
          Delete
        </button>
        {selectedItem == index ? (
          modalVisible == true ? (
            <ModalForm
              id="component-modal"
              toggleVisible={toggleVisible}
              onClick={() => handleDeleteWidget(index)}
            />
          ) : null
        ) : null}
      </div>
    ))
  ) : (
    <div>
      <p className="no-data">
        No data available
      </p>
    </div>
  )}
</div>

在下面你可以看到我为它写的测试

test("The deleting widget asks confirmation with a modal window.", () => {

 render(<WidgetsList />);

 const deleteWidget = screen.queryAllByText("Delete");

 const modalComponent = document.querySelector("#component-modal");

 expect(deleteWidget).toBe(1);
 fireEvent.click(deleteWidget);
 expect(modalComponent).toBe(1);
});

如果你能展示我所缺少的东西，我将不胜感激。

Answer 1

不确定 modalVisible 是什么。是状态还是道具？您将需要模拟这是使模态可见的某种方式。无论如何，我会创建至少两个测试，一个 formData 为空，另一个包含一些数据。您需要将一些模拟数据传递给组件道具，例如：

describe('WidgetsList', () => {
  test('no data available', () => {
    render(<WidgetsList formData={[]} />);
    expect(/No data available/).toBeInTheDocument();
  });

  test('data available', () => {
    const mockedFormDataProp = [{ name: 'whatever', language: 'whatever' }];
    render(<WidgetsList formData={mockedFormDataProp} />);

    expect(screen.getByText(/No data available/)).not.toBeInTheDocument();
    fireEvent.click(screen.getByText(/Delete/));
    // attach a data-testid prop to your modal, in case there is some text
    // add test it like screen.getByText(...)
    expect(screen.getByTestId('the-modal')).toBeTruthy();
  });
});

如果组件 returns 以 react-testing-library 开头的空数组如何测试组件？

how to test a component if the component returns empty array in the beginning with react-testing-library?

reactjs

react-testing-library