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支票

开玩笑返回未定义的快照

1 个答案: