react-testing-library未呈现正确的快照

Question

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

渲染快照时，它根本不会显示onChange，而选中的将显示为空字符串。

我想要的结果是函数{onChange=}真{checked=}。

我已经使用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>;

Answer 1

RTL工作正常。render方法只返回正在呈现的组件的DOM。在DOM中，不存在操作处理程序和快照状态。

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