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

ocebsuys 于 2023-06-27 发布在 Jest

关注(0)|答案(5)|浏览(147)

我有一个查询的问题，我试图得到两个无线电输入，其中一个没有任何问题，但另一个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测试库的错误。

jestjs

来源：https://stackoverflow.com/questions/68943625/found-multiple-elements-error-in-react-testing-library

5条答案

按热度按时间

y0u0uwnf1#

只是一个快速提示，如果你有多个匹配的元素，你可以这样查询：
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');
});

赞(0）回复(0）举报 2023-06-27

pinkon5k2#

对我来说，造成这种情况的原因只是在测试文件中有另一个render（），而不是在it（）中。所以这个组件被渲染了两次。
新手错误：-）

赞(0）回复(0）举报 2023-06-27

k0pti3hp3#

如果你有多个匹配的元素，试试这个

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

getAllByText如果大于1匹配它`将返回数组
查询类型请查看文档Summary Table

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

赞(0）回复(0）举报 2023-06-27

ktca8awb4#

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

赞(0）回复(0）举报 2023-06-27

xam8gpfp5#

您可以使用string而不是regex来修复它：

const toRadio = screen.getByLabelText("to");

Jest中的两个字符名称存在一些问题。

赞(0）回复(0）举报 2023-06-27

我来回答

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

查询

Html结构

RTL抛出错误

5条答案

相关问题

热门标签

最新问答