等待Promise.all在开玩笑的测试

Question

In Comp component, I have a Promise.all that runs when the component is rendered. I'm trying to test that OnItemsUpdate() is getting called once the Promise.all has resolved.

const Comp = ({OnItemsUpdate}) => {
    Promise.all(items.map((item) => {
        return datasource.UpdateItem(item);
    })).then(() => {
        return OnItemsUpdate();
    });

    // not including rest of the component for brevity's sake
}

it("Calls OnItemsUpdate when promises resolve", async () => {
    const props = {
        OnItemsUpdate: jest.fn();
    }

    expect(props.OnItemsUpdate).tohavebeencalledtimes(0);

    const control = mount(<Comp {...props} />);
    await datasource.UpdateItem

    expect(props.OnItemsUpdate).tohavebeencalledtimes(1); // doesn't get called

})

Awaiting OnItemsUpdate isn't working as expect(props.OnItemsUpdate).tohavebeencalledtimes(1) still returns 0.

Answer 1

You can fix this by using something like setImmediate to delay your assertions until after the callbacks in PromiseJobs have a chance to run.

index.ts :

import React from 'react';

export const Comp = ({ OnItemsUpdate, items, datasource }) => {
  Promise.all(
    items.map(item => {
      return datasource.UpdateItem(item);
    })
  ).then(() => {
    return OnItemsUpdate();
  });

  // not including rest of the component for brevity's sake
  return <div>test</div>;
};

Unit test:

import React from 'react';
import { Comp } from './';
import { mount } from 'enzyme';

describe('Comp', () => {
  it('t1', done => {
    const props = {
      OnItemsUpdate: jest.fn(),
      items: [1, 2],
      datasource: {
        UpdateItem: jest.fn().mockResolvedValue('whatever')
      }
    };
    expect(props.OnItemsUpdate).toBeCalledTimes(0);
    const wrapper = mount(<Comp {...props}></Comp>);
    expect(props.datasource.UpdateItem).toBeCalledTimes(props.items.length);
    expect(wrapper.html()).toMatchSnapshot();
    setImmediate(() => {
      expect(props.OnItemsUpdate).toBeCalledTimes(1);
      done();
    });
  });
});

Test result with 100% coverage:

 PASS  src/stackoverflow/57248527/index.spec.tsx
  Comp
    ✓ t1 (63ms)

 › 1 snapshot written.
-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        5.322s

Snapshot:

// Jest Snapshot v1

exports[`Comp t1 1`] = `"<div>test</div>"`;

Here is the completed demo: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/57248527