Jest Return 未定义快照

Question

我正在写我的第一个玩笑测试文件，遇到了一些疑问和错误。

我创建了一个 headers.test.js 作为我的测试文件。我运行命令并在终端中获得了传递的输出。快照文件已生成。但在里面我得到了

exports[`renders correctly 1`] = `undefined`;

我的header.test.js是这样的

import React from "react";
import Header from "./Header";
import { shallow } from "enzyme";

const headerText = "RK BoilerPlate";

it ("renders correctly", () => {
    const wrapper = shallow(
        <Header headerText={headerText} />
    );

    expect(wrapper).toMatchSnapshot();
});

Header.js // 组件

import React from "react"; // eslint-disable-line no-unused-vars
import "bootstrap/dist/css/bootstrap.min.css";
import "./header.css";

const Header = (props) => ({
    handleAuthor() {
        props.history.push("/About");
    },
    render(){
        return (
            <div className="header">
                <h1 onClick={this.handleAuthor.bind(this)}>
                    {this.props.headerText}
                </h1>
            </div>
        );
    } 
});

export default Header;

我不知道为什么它在快照中返回未定义。

谢谢

Answer 1

也许您可以尝试将 Header 组件重构为

import React from "react"; // eslint-disable-line no-unused-vars
import "bootstrap/dist/css/bootstrap.min.css";
import "./header.css";

const Header = (props) => (
  <div className="header">
    <h1 onClick = {() => props.history.push("/About")}>
      {this.props.headerText}
    </h1>
  </div>
);

export default Header;

此外，向组件添加 prop-types 检查可能会更好

Jest Return 未定义快照

Jest Return undefined snapshot

reactjs

jestjs

enzyme

babel-jest