I am new to Enzyme as a testing package for my ReactJS project. I have written this test for a class component:
test.js:
import expect from 'expect';
import React from 'react';
import sinon from 'sinon'
import {mount, shallow} from 'enzyme';
import TestUtils from 'react-addons-test-utils';
import PageToBeTested from './PageToBeTested';
describe('Testing PageToBeTested via Enzyme', () => {
it('onChangeMethod is called when a field is updated', () => {
const event = {value: {"siteCode": 123}}
const wrapper = mount(<PageToBeTested />);
const handleOnChangeMethodSpy = sinon.spy(wrapper.instance(),
"onChangeMethod ");
wrapper.update(); // Force re-render
wrapper.find('SelectInput').at(0).simulate("change", event);
expect(handleOnChangeMethodSpy.calledOnce).toEqual(true);
});
});
I get the following message:
Testing PageToBeTested via Enzyme
onChangeMethod is called when a field is updated:
Error: Expected false to equal true
+ expected - actual
-false
+true
Here is how my PageToBeTested look like:
// Shortened for simplicity
onChangeMethod(event) {
const region = event.value;
this.setState({
region: region
});
methodA(region).then(response => {
this.setState({
someList: methodB(response.data.sites)
});
});
}
return (
<Container fluid>
<Row>
<ConnectedComponent
onChangeMethod={this.onChangeMethod} />
</Row>
{ChildComponent}
</Container>
);
I followed this stackoverflow answer here and i expected the onChangeMethod to be called but from the error it seems like it is not being stimulated at all.
The 'SelectInput' is a child component of the 'ConnectedComponent'.
May I know what is happening under the hood in this case?
Thanks.