如何使用 react-testing-library 测试 DOM 节点的外观答案

【问题标题】：How do I test for the appearance of a DOM node using react-testing-library如何使用 react-testing-library 测试 DOM 节点的外观
【发布时间】：2019-02-16 00:36:31
【问题描述】：

我正在转移到 react-testing-library，并且无法断言文本在某些状态下会发生变化。我要测试的是“选择第二个选项”文本或节点的外观。但这只是失败了，因为节点没有改变。虽然它在浏览器中工作。

我查看了docs，但由于某种原因，使用wait 或waitForElement 对我不起作用。

App.js

import React, { useState } from "react";

const options = {
  First: "First",
  Second: "Second"
};

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

  return (
    <form>
      <label>
        <input
          type="radio"
          name="radio1"
          value={options.First}
          checked={action === options.First}
          onChange={event => setAction(event.target.value)}
        />
        First
      </label>

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

      {action === options.First ? (
        <div>First option selected</div>
      ) : action === options.Second ? (
        <div>Second option selected</div>
      ) : null}

    </form>
  );
}

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('radio button', async () => {
  const {getByLabelText, getByText } = render(<App/>);
  const first = getByLabelText("First");

  fireEvent.change(first, { target: { value: "Second" }});

  expect(first.value).toEqual("Second");
  expect(getByText("Second option selected").textContent).toEqual("Second option selected") ;

});

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

这个测试有效：

it("radio button", () => {
  const { getByLabelText, getByText } = render(<App />);

  fireEvent.click(getByLabelText("Second"));

  /* This will fail
     expect(getByLabelText("First").value).toEqual("Second");
  */
  expect(getByText("Second option selected")).toBeInTheDocument();
});

我认为 jsdom 中存在一些奇怪的行为，出于某种原因，仅当 click 发生时才会触发“onChange”事件。同时，它不会更新 DOM 中的 value，除非发生 change 事件。

我的建议是不要检查您的无线电输入的value。最后，您的测试应该只关心用户看到了什么。

【讨论】：