我正在React中使用合成器（乐器）。仪器的界面需要一些单选按钮，以便用户可以更改其工作方式（例如选择一种基本声音的波形）。作为这个个人项目的一部分，我想用Jest测试一下synth的功能，以避免点击太多以及在浏览器和我的文本编辑器之间改变上下文。
问题是Jest无法找到单选按钮，即使它们的名称在Assert中指定。这意味着，expect(screen.getAllByRole(radio).length).toBe(4);根本没有任何问题，expect(screen.getByRole(radio,{name:sine})).toBeInTheDocument();确实在控制台中抛出了一个错误。
试验项目：

import '@testing-library/jest-dom';
import {cleanup,getByTestId,render,screen, waitFor} from '@testing-library/react';
import Carrier from './carrier';
import Settings from './settings.json'

beforeEach(()=>{
  cleanup();
})

describe(`Rendering`, ()=>{

  it(`renders waveform type radio buttons`,()=>{
    render(<Carrier settings={Settings}/>);
    expect(screen.getAllByRole(`radio`).length).toBe(4);
  });

  it(`checks radio buttons label match waveform types`,()=>{
    render(<Carrier settings={Settings}/>);
    expect(screen.getByRole(`button`,{name:`sine`})).toBeInTheDocument(); 
  });
});

字符串
输出量：

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "sine"

    Here are the accessible roles:

      group:

      Name "Waveform":
      <fieldset />

      --------------------------------------------------
      radio:

      Name "":
      <input
        data-testid="sine"
        name="sine"
        type="radio"
      />

      Name "":
      <input
        name="triangle"
        type="radio"
      />

      Name "":
      <input
        name="square"
        type="radio"
      />

      Name "":
      <input
        name="sawtooth"
        type="radio"
      />

型
组件：

const Carrier = ({settings}) =>{
  return(
    <>
      <fieldset>
        <legend>Waveform</legend>
        <label htmlFor='sine'>sine</label>
        <input data-testid='sine' name='sine' type='radio'/>
        <label htmlFor='triangle'>triangle</label>
        <input name='triangle' type='radio'/>
        <label htmlFor='square'>square</label>
        <input name='square' type='radio'/>
        <label htmlFor='sawtooth'>sawtooth</label>
        <input name='sawtooth' type='radio'/>
      </fieldset>
    </>
  );
}

export default Carrier;

型
尝试次数：
1.使用button元素检查了类似的代码行，测试成功
1.在async测试中使用waitFor，等待按钮出现在DOM上

1. getByTestID工作正常，但我不喜欢这种方式，因为有很多单选按钮
   1.删除了{name:sine}，控制台告诉我文档中有多个按钮
   问题：
   1.为什么name没有出现在控制台输出中？我在网上查了一些类似的问题（很少），expect(screen.getByRole(radio,{name:sine})).toBeInTheDocument();应该没有问题
   1.我的代码中缺少了什么？