react-testing-library 没有呈现正确的快照答案

【问题标题】：react-testing-library not rendering correct snapshotsreact-testing-library 没有呈现正确的快照
【发布时间】：2019-06-17 18:18:23
【问题描述】：

我正在尝试针对快照测试组件。组件渲染一个带有 onChange 事件的复选框，并且它的选中状态链接到设置为 true 的组件状态。

当快照被渲染时，它根本不显示 onChange 并且检查显示为一个空字符串。

我想要的结果是 onChange={[Function]} checked={true}。

我已经使用 react-test-renderer 和 Enzyme 进行了测试，并且都正确输出了快照。

组件文件

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

function App() {
    const [count, setCount] = useState(true);

    return (
        <div className="App">
            <input type="checkbox" checked={count} onChange={() => {}} />
        </div>
    );
}

export default App;

测试文件

import React from "react";
import App from "./App";
import { render } from "@testing-library/react";

it("renders", () => {
    const { asFragment } = render(<App />);

    expect(asFragment()).toMatchSnapshot();
});

快照文件

exports[renders 1] =
<DocumentFragment>
  <div
    class="App"
  >
    <input
      checked=""
      type="checkbox"
    />
  </div>
</DocumentFragment>;

预期快照：

exports[renders 1] = 
<DocumentFragment>
  <div
    class="App"
  >
    <input
      checked={true}
      type="checkbox"
      onChange={[Function]}
    />
  </div>
</DocumentFragment>;

【问题讨论】：

标签： reactjs react-testing-library

【解决方案1】：

RTL 正在按预期工作。 render 方法只返回正在渲染的组件的 DOM。在 DOM 中，操作处理程序和快照状态不存在。

测试组件的更好方法是直接检查这些值，而不是快照。

【讨论】：