在 React 测试库中发现多个元素错误

Question

我在查询时遇到问题，我正在尝试获取两个无线电输入，其中之一没有任何问题，但另一个反应测试库引发了错误：It Found multiple elements with the role "radio" and name /to/i:

查询

test('Render form with default items', () => {
  const handleUpdateValue = jest.fn();
  const handleNextStep = jest.fn();
  render(
    <Form
      handleNextStep={handleNextStep}
      updateValue={handleUpdateValue}
      transferFundsValues={{}}
    />
  );

  const amountInput = screen.getByLabelText(/amount/i);
  const fromRadio = screen.getByLabelText(/from/i);
  const toRadio = screen.getByLabelText(/to/i);
  const messageInput = screen.getByLabelText(/message/i);

  const continueButton = screen.getByRole('button', { name: /continue/i });
  const cancelButton = screen.getByRole('button', { name: /cancel/i });

  // If no value has been entered to the inputs, the continue button must be
  // disabled
  expect(continueButton).toBeDisabled();
});

html结构

<label for="transferFunds_from" class="ant-form-item-required" title="From">From</label>
<input id="transferFunds_from" type="radio" class="ant-radio-button-input" value="">

<label for="transferFunds_to" class="ant-form-item-required" title="To">To</label>
<input id="transferFunds_to" type="radio" class="ant-radio-button-input" value="">

RTL 引发的错误

 TestingLibraryElementError: Found multiple elements with the role "radio" and name `/to/i`

    Here are the matching elements:

    <input
      class="ant-radio-button-input"
      id="transferFunds_from"
      type="radio"
      value=""
    />

    <input
      class="ant-radio-button-input"
      id="transferFunds_to"
      type="radio"
      value=""
    />

我不知道我是否在 HTML 结构中做错了什么，或者是否是 React 测试库错误。

Answer 1

只是一个快速提示，如果您有多个匹配元素，您可以像这样查询：

HTML：

<a href="/my-element">My element</a>
<a href="/my-element">My element</a>

测试：

test('renders my element', () => {
  let link = screen.getAllByText('My element')[0] as HTMLAnchorElement;
  expect(link.href).toContain('/my-element');
});

Answer 2

对我来说造成这种情况的原因只是测试文件中存在另一个 render() ，而该 render() 不在 it() 内......因此该组件被渲染了两次。

菜鸟错误:-)

Answer 3

如果您有多个匹配元素，请尝试这个

<Typography component={"span"}>
  Some text
</Typography>

getAllByText如果超过 1 个匹配则返回数组

查询类型 请查看文档汇总表

it('It will display Some text', () => {
    const subTitle = screen.getAllByText(/Some text/i);
    expect(subTitle[0]).toBeInTheDocument();
})

Answer 4

我写了类似的期望，对我来说效果很好。也许您当前的版本有问题@testing-library/react。尝试10.4.9

我使用的代码

import React from 'react'
import { render, screen } from '@testing-library/react'

function Form() {
  return (
    <div>
      <label
        htmlFor="transferFunds_from"
        className="ant-form-item-required"
        title="From"
      >
        From
      </label>
      <input
        id="transferFunds_from"
        type="radio"
        className="ant-radio-button-input"
        value=""
      />

      <label
        htmlFor="transferFunds_to"
        className="ant-form-item-required"
        title="To"
      >
        To
      </label>
      <input
        id="transferFunds_to"
        type="radio"
        className="ant-radio-button-input"
        value=""
      />
    </div>
  )
}

test('Render form with default items', () => {
  render(<Form />)

  const fromRadio = screen.getByLabelText(/from/i)
  const toRadio = screen.getByLabelText(/to/i)

  expect(fromRadio).toBeVisible()
  expect(toRadio).toBeVisible()
})