CODEWITHSUNDEEP
reactjstestingjestjs
Sherlock
Sherlock

Reputation: 227

props are not receiving from test file to class components in JEST

File-

import React from "react";
import PropTypes from "prop-types";

import * as css from "@/utils/css";

class CheckFile extends React.Component {
static propTypes = {
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    timeout: PropTypes.number
};
state = {
    active: false
};

componentDidUpdate(oldProps) {
    //not receiving props
}

componentWillUnmount() {
    window.clearTimeout(this.timeoutEl);
}

render() {

    return (
        <div>
        </div>
    );
   }
}

export default CheckFile;

Test File:

import React from "react";
import renderer from "react-test-renderer";
import { render } from "@testing-library/react";
import CheckFile from "../index";

describe("Test for PullToRefresh", () => {
 it("check for snapshot", () => {
    const Comp = () => <CheckFile />;
    const props1 = { id: "test-id1", timeout: 1000, text: "testing snackbar1" };
    const component = renderer.create(<Comp {...props1} />);
    const { rerender } = render(<Comp />);
    const props2 = {
        id: "test-id2",
        timeout: 1000,
        text: "testing snackbar1"
    };
    rerender(<Comp {...props2} />);
    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
 });

});

When I send Props from test file it is not received by class component.Showing undefined . When I send Props from test file it is not received by class component.Showing undefined . When I send Props from test file it is not received by class component.Showing undefined .

Upvotes: 1

Views: 454

Answers (1)

Drew Reese
Drew Reese

Reputation: 203267

I don't understand why you are trying to test CheckFile but then render it in a locally declared component and then don't pass any props through to it.

describe("Test for PullToRefresh", () => {
 it("check for snapshot", () => {
    const Comp = () => <CheckFile />; // <-- no props passed here!!

    const props1 = { id: "test-id1", timeout: 1000, text: "testing snackbar1" };
    const component = renderer.create(<Comp {...props1} />);
    const { rerender } = render(<Comp />);
    const props2 = {
        id: "test-id2",
        timeout: 1000,
        text: "testing snackbar1"
    };
    rerender(<Comp {...props2} />);
    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });
});

Either proxy the props through to CheckFile:

const Comp = (props) => <CheckFile {...props} />;

Or just use CheckFile directly in test:

describe("Test for PullToRefresh", () => {
 it("check for snapshot", () => {
    const props1 = { id: "test-id1", timeout: 1000, text: "testing snackbar1" };

    const component = renderer.create(<CheckFile {...props1} />);
    const { rerender } = render(<CheckFile />);

    const props2 = {
        id: "test-id2",
        timeout: 1000,
        text: "testing snackbar1"
    };
    rerender(<CheckFile {...props2} />);

    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });
});

Upvotes: 1

Related Questions