CODEWITHSUNDEEP
reactjsjestjsenzymebabel-jest
Krishna
Krishna

Reputation: 1362

Jest Return undefined snapshot

I am writing my first jest testing file and got some doubts and errors.

I have created a headers.test.js as my test file. I ran the command and got the output in terminal as passed. The snapshots file has been generated. But inside that I am getting as

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

My header.test.js is like this

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 // Component

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;

I don't know why its returning undefined in the snapshot.

Thanks

Upvotes: 1

Views: 1949

Answers (1)

Jee Mok
Jee Mok

Reputation: 6556

Maybe you can try to refactor your Header component to

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;

Also it might be good to add a prop-types check to the component

Upvotes: 1

Related Questions