CODEWITHSUNDEEP
reactjsjestjsenzyme
H.Hinn
H.Hinn

Reputation: 73

Is there an way to wait for event that trigger async function in Jest/Enzyme?

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

Answers (1)

Trevor Johnson
Trevor Johnson

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

Related Questions