Reputation: 73
I have a Wizard contains steps, each step has its own validation (sync/async).
for example:
<Wizard>
<Form1 />
<Form2 />
<Form3 />
</ Wizard>
Each form contains onContinue
method which validates the form inputs.
onContinue = async () => {
let step = this.steps[this.state.step];
let validation = await step.validate();
// check for error and change step number.
this.changeStep(this.state.step + 1, validation);
};
Now I'm trying to test the behavior of the Wizard, by making sure, when clicking onContinue, the step number Increased by 1.
it('should set the state property "step" to 1 after successfully clicking the continue button', () => {
const props = {
id: 'testId',
children: noErrorChildren
};
const wizard= mount(<Wizard {...props} />);
tree.find('onContinue-button').simulate('click');
expect(wizard.state().step).toEqual(1);
});
After running the test, this error shows up:
Error: expect(received).toEqual(expected)
Expected value to equal:
1
Received:
0
Expected :1
Actual :0
the step
variable is not increased to 1 as expected.
Thanks.
Upvotes: 4
Views: 3861
Reputation: 936
The reason why the step
variable is not increased as expected is because onContinue
is an async
function, and your test file did not attempt to wait for a response. Since it is async, and you treated it as a normal function the code continued to execute without waiting for the result.
Try doing this and see if it helps,
In your it
block you can specify the anonymous function as async, like so:
it('should do some stuff...', async () => {
and then before the tree.find
method, add the await
keyword
await tree.find('onContinue-button').simulate('click');
Upvotes: 5