无法触发“点击”事件 - 请提供 DOM 元素 - 单选按钮 JestJs

Question

我正在编写测试，使用 Jest 和 React 单击值“绿色”单选按钮。我遇到错误

单选按钮： <input id="multicolored" name="colours" type="radio" value="green"> id="radioButton" aria-label="Radio Button" name="radio-button-field">

无线电测试：

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import ReactDOM from 'react-dom';
import Colors from './colors';
import { BrowserRouter } from 'react-router-dom';

test('It should click on radio button', async () => {
  const div = document.createElement('div');
  const dom = render(
    <BrowserRouter>
      <Colors />
    </BrowserRouter>,
    div
  );

  var input = dom.getByLabelText('Radio Button');
  fireEvent.click(input, { target: { value: 'green' } });
});

但我面临一个错误。“无法触发“点击”事件 - 请提供 DOM 元素。”

我是否遗漏了某些内容，或者是否有其他方法可以使用 fireEvent 单击单选按钮？

Answer 1

对于单选类型，您应该使用更改而不是在 fireEvent 中单击。

fireEvent.change(input, { target: { value: 'green' } });

提示：建议使用 screen 来查找元素：

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

const radio = screen.getByLabelText('Radio Button');

DOM 测试库还导出一个屏幕对象，其中包含预先绑定到 document.body 的每个查询（使用 inside 功能）。React 测试库等包装器重新导出屏幕，以便您可以以相同的方式使用它。您可以查看测试库文档。