Unable to stimulate change event in child component React redux jest - reactjs

Question

I am new to react redux and I am trying to unit test FormContainer component. But I am unable to simulate change event on Form component using enzyme or jest. In wrapper.instance() I am receiving null but I dont' think that should. If not then what is correct way of testing FormContainer.js file, because when I ran test coverage it showed me that change function was uncovered.
FormContainer.js
import React, { Component } from "react";
import { connect } from "react-redux";
import Form from "../components/Form";
import { isNumeric } from "../utils";
class FormContainer extends Component {
constructor(props) {
super(props);
this.state = {
number: "",
error: false
};
}
// componentWillReceiveProps(nextProps) {
// console.log(nextProps, this.props, "main component");
// }
change = event => {
let value = event.target.value;
if (isNumeric(value) && value < 1001 && value >= 0) {
if (value === "0") {
this.setState({
...this.state,
error: true
});
return;
} else {
this.setState({
...this.state,
[event.target.name]: value,
error: false
});
}
} else {
this.setState({ ...this.state, error: true });
}
};
render() {
return (
<Form change={this.change} value={this.state} error={this.state.error} />
);
}
}
const mapStateToProps = state => {
return { ...state };
};
export default connect(mapStateToProps)(FormContainer);
FormContainer.test.js
import React from 'react';
import configureStore from "redux-mock-store";
import { shallow,mount } from 'enzyme';
import FormContainer from '../../containers/FormContainer';
import { findByAttr } from '../../utils';
import Form from '../../components/Form';
describe("Testing Form container", () => {
let wrapper;
let store;
beforeEach(() => {
const initialState = {}
const mockStore = configureStore();
store = mockStore(initialState);
wrapper = shallow(<FormContainer store={store} />);
});
it("Should render without error ", () => {
expect(wrapper.exists()).toBe(true);
});
it("Simulate change", () => {
let component = wrapper.find(Form);
const mockChange = jest.fn();
wrapper.instance().change = mockChange;
});
});
Testing Form container › Simulate change
TypeError: Cannot set property 'change' of null
22 | let component = wrapper.find(Form);
23 | const mockChange = jest.fn();
> 24 | wrapper.instance().change = mockChange;
| ^
25 | });
26 | });
at Object.<anonymous> (src/__test__/containers/FormContainer.test.js:24:9)

Answer 1

Dont need to import import Form from '../../components/Form'; since we are only testing FormContainer component, so remove it.
and there is no event listener called change, Use onChange instead.
<Form onChange={this.change} value={this.state} error={this.state.error} />
Try changing this spec:
it("Simulate change", () => {
let component = wrapper.find(Form);
const mockChange = jest.fn();
wrapper.instance().change = mockChange;
});
To:
it("Simulate change", () => {
(wrapper.find(Form).first()).simulate('change');
expect(wrapper.instance().change.mock.calls.length).toBe(1);
});