如何在 react-testing-library 中的单选按钮上触发更改事件? [英] How do I trigger a change event on radio buttons in react-testing-library?

问题描述

我正在转移到 react-testing-library，不知道如何触发此事件并获取更改结果.

我已经尝试使用 fireEvent 函数来触发更改，然后尝试了 rerender 函数，但我似乎无法让它工作.

App.js

import React, { useState } from "react";从./logo.svg"导入标志；导入./App.css"；常量选项 = {做事:'做事'，DoOtherThing: 'DoOtherThing',};功能应用(){const [action, setAction] = useState(options.DoTheThing);返回 (<div className="应用程序"><header className="App-header"><表格><字段集><标签><输入类型=收音机"名称=radio1"值={options.DoTheThing}选中={action === options.DoTheThing}onChange={event =>setAction(event.target.value)}/>第一的<标签><输入类型=收音机"名称=radio1"值={options.DoOtherThing}选中={action === options.DoOtherThing}onChange={event =>setAction(event.target.value)}/>第二</fieldset></表单></标题>

);}导出默认应用程序；

App.test.js

从'react'导入React；从'react-testing-library'导入{渲染，清理，火事件}；从'./App'导入应用程序；afterEach(清理)；it('应该改变值', () => {const {getByLabelText, rerender } = render();const second = getByLabelText(/Second/);fireEvent.change(second);rerender();期望(document.forms[0].elements.radio1.value).toEqual("DoOtherThing");});

解决方案

首先，您不必调用 rerender.仅当您希望组件接收不同的 props 时才使用 rerender.请参阅链接.

每当您调用 fireEvent 时，组件都会像在普通应用中一样呈现.

触发 change 事件是正确的，但您必须通过事件数据传递第二个参数.

这个例子有效:

从react"导入React；从react-testing-library"导入 { render, fireEvent };测试(收音机"，()=> {const { getByLabelText } = 渲染(<表格><标签>首先 <标签>第二个 </表单>);const radio = getByLabelText('First')fireEvent.change(radio, { target: { value: "second" } });期望(radio.value).toBe('second')});

I'm in the process of moving over to react-testing-library, and have no idea how to trigger this event and get the results of the changes.

I've tried using the fireEvent function to trigger the change, and then tried the rerender function, but I can't seem to get it to work.

App.js

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

const options = {
  DoTheThing: 'DoTheThing',
  DoOtherThing: 'DoOtherThing',
};

function App() {
  const [action, setAction] = useState(options.DoTheThing);

  return (
    <div className="App">
      <header className="App-header">
        <form>
          <fieldset>
            <label>
              <input
                type="radio"
                name="radio1"
                value={options.DoTheThing}
                checked={action === options.DoTheThing}
                onChange={event => setAction(event.target.value)}
              />
              First
            </label>

            <label>
              <input
                type="radio"
                name="radio1"
                value={options.DoOtherThing}
                checked={action === options.DoOtherThing}
                onChange={event => setAction(event.target.value)}
              />
              Second
            </label>
          </fieldset>
        </form>
      </header>
    </div>
  );
}

export default App;

App.test.js

import React from 'react';
import { render, cleanup, fireEvent } from 'react-testing-library';
import App from './App';

afterEach(cleanup);

it('should change the value ', () => {
  const {getByLabelText, rerender } = render(<App/>);
  const second = getByLabelText(/Second/);

  fireEvent.change(second);
  rerender(<App/>);

  expect(document.forms[0].elements.radio1.value).toEqual("DoOtherThing");

});

解决方案

First, you don't have to call rerender. You use rerender only when you want the component to receive different props. See link.

Whenever you call fireEvent the component will render like it would in your normal app.

It's correct to fire a change event, but you must pass a second parameter with the event data.

This example works:

import React from "react";
import { render, fireEvent } from "react-testing-library";

test("radio", () => {
  const { getByLabelText } = render(
    <form>
      <label>
         First <input type="radio" name="radio1" value="first" />
      </label>
      <label>
        Second <input type="radio" name="radio1" value="second" />
      </label>
    </form>
  );

  const radio = getByLabelText('First')
  fireEvent.change(radio, { target: { value: "second" } });
  expect(radio.value).toBe('second')
});

这篇关于如何在 react-testing-library 中的单选按钮上触发更改事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！