Question

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

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

我想要的结果是onChange = {[Function]}已选中= {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>;

Answer 1

RTL正常工作。 render方法仅向您提供要呈现的组件的DOM。在DOM中，不存在动作处理程序和快照状态。

直接拍摄这些值是代替测试快照的一种更好的方法。

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

1 个答案: