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

【问题标题】：Found multiple elements error in React Testing Library在 React 测试库中发现多个元素错误
【发布时间】：2021-10-26 19:34:55
【问题描述】：

我在查询时遇到问题，我正在尝试获取两个无线电输入，其中一个没有任何问题，但另一个 React 测试库抛出错误：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 测试库错误。

【问题讨论】：

这些是完整的测试吗？我认为我们可能需要更多的上下文。通常，如果您尝试 getByRole 并且有多个元素，您会收到该错误，但我没有看到任何地方都调用了该错误
@JonathanS。我用完整的测试更新了我的问题...
你找到解决办法了吗？

标签： javascript reactjs jestjs react-testing-library

【解决方案1】：

我写了类似的期望，对我来说效果很好。您当前的@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()
})

【讨论】：

我正在使用@testing-library/react: ^11.2.3。所以我需要降级到10.4.9？

【解决方案2】：

只是一个小提示，如果你有多个匹配的元素，你可以这样查询：

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

【讨论】：