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

Question

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 .

Answer 1

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();
});
});