12

I'm trying to write a test for a React component that needs to complete an asynchronous action in its componentWillMount method. componentWillMount calls a function, passed as a prop, which returns a promise, and I mock this function in my test.

This works fine, but if a test fails in a call to setImmediate or process.nextTick, the exception isn't handled by Jest and it exits prematurely. Below, you can see I even try to catch this exception, to no avail.

How can I use something like setImmediate or nextTick with Jest? The accepted answer to this question is what I'm trying to implement unsuccessfully: React Enzyme - Test `componentDidMount` Async Call.

it('should render with container class after getting payload', (done) => {
  let resolveGetPayload;
  let getPayload = function() {
    return new Promise(function (resolve, reject) {
      resolveGetPayload = resolve;
    });
  }
  const enzymeWrapper = mount(<MyComponent getPayload={getPayload} />);

  resolveGetPayload({
    fullname: 'Alex Paterson'
  });

  try {
    // setImmediate(() => {
    process.nextTick(() => {
      expect(enzymeWrapper.hasClass('container')).not.toBe(true); // Should and does fail
      done();
    });
  } catch (e) {
    console.log(e); // Never makes it here
    done(e);
  }
});

Jest v18.1.0

Node v6.9.1

6
  • have you read the docs about testing async stuff (facebook.github.io/jest/docs/tutorial-async.html#content)? Jan 23, 2017 at 9:14
  • Yep, I'm not testing an asynchronous function, I'm testing a component that needs to wait for a promise. Jan 23, 2017 at 10:17
  • But you create a promise, and even you resolve it in the test it will have no effect in the test run, you need at least return the promise from the test. Jan 23, 2017 at 12:04
  • But you create a promise, and even you resolve it in the test it will have no effect in the test run, you need at least return the promise from the test. Jan 23, 2017 at 12:04
  • Did you managed to solve this issue @AlexPaterson? I faced to same problem and the only thing that seems to work is to wrap the expect into try catch...comes out a bit ugly for my taste. Also this might be related; github.com/facebook/jest/issues/2059
    – Heikki
    Sep 12, 2017 at 12:24

6 Answers 6

11

Another potentially cleaner solution, using async/await and leveraging the ability of jest/mocha to detect a returned promise:

// async test utility function
function currentEventLoopEnd() {
  return new Promise(resolve => setImmediate(resolve));
}

it('should render with container class after getting payload', async () => {
  
  // mock the API call in a controllable way,
  // starts out unresolved
  let resolveGetPayload; // <- call this to resolve the API call
  let getPayload = function() {
    return new Promise(function (resolve, reject) {
      resolveGetPayload = resolve;
    });
  }
  
  // instanciate the component under state with the mock
  const enzymeWrapper = mount(<MyComponent getPayload={getPayload} />);
  expect(enzymeWrapper.hasClass('container')).not.toBe(true);

  resolveGetPayload({
    fullname: 'Alex Paterson'
  });

  await currentEventLoopEnd(); // <-- clean and clear !

  expect(enzymeWrapper.hasClass('container')).toBe(true);
});
4

Overcome that issue in the next way atm (also it solves the issue with Enzyme and async call in componentDidMount and async setState):

it('should render proper number of messages based on itemsPerPortion', (done) => {
  const component = shallow(<PublishedMessages itemsPerPortion={2} messagesStore={mockMessagesStore()} />);

  setImmediate(() => { // <-- that solves async setState in componentDidMount
    component.update();

    try { // <-- that solves Jest crash
      expect(component.find('.item').length).toBe(2);
    } catch (e) {
      return fail(e);
    }

    done();
  });
});

(Enzyme 3.2.0, Jest 21.1.6)

UPDATE

Just figured out another, better (but still strange) solution on that using async/await (and it still solving async componentDidMount and async setState):

it('should render proper number of messages based on itemsPerPortion', async () => {
  // Magic below is in "await", looks as that allows componentDidMount and async setState to complete
  const component = await shallow(<PublishedMessages itemsPerPortion={2} messagesStore={mockMessagesStore()} />);

  component.update(); // still needed
  expect(component.find('.item').length).toBe(2);
});

Also other async-related actions should be prefixed with await as well like

await component.find('.spec-more-btn').simulate('click');
1
  • I went with the updated code using await wrapper.update() as well. I noticed some tests required the await for the update and some didn't, even though I was testing the same component for similar things.
    – cmfolio
    Sep 7, 2019 at 19:39
3

Wrapping the callback block passed to process.nextTick or setImmediate in a try/catch works, as others have shown, but this is verbose and distracting.

A cleaner approach is to flush promises using the brief line await new Promise(setImmediate); inside an async test callback. Here's a working example of using this to let an HTTP request in a useEffect (equally useful for componentDidMount) resolve and trigger a re-render before running assertions:

Component (LatestGist.js):

import axios from "axios";
import React, {useState, useEffect} from "react";

export default () => {
  const [gists, setGists] = useState([]);

  const getGists = async () => {
    const res = await axios.get("https://api.github.com/gists");
    setGists(res.data);
  };    
  useEffect(() => {
    getGists();
  }, []);

  return (
    <>
      {gists.length
        ? <div data-test="test-latest-gist">
            the latest gist was made on {gists[0].created_at} 
            by {gists[0].owner.login}
          </div>
        : <div>loading...</div>}
    </>
  );
};

Test (LatestGist.test.js):

import React from "react";
import {act} from "react-dom/test-utils";
import Enzyme, {mount} from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({adapter: new Adapter()});
import mockAxios from "axios";
import LatestGist from "../src/components/LatestGist";

jest.mock("axios");

describe("LatestGist", () => {
  beforeEach(() => jest.resetAllMocks());
  
  it("should load the latest gist", async () => {
    mockAxios.get.mockImplementationOnce(() => 
      Promise.resolve({ 
        data: [
          {
            owner: {login: "test name"},
            created_at: "some date"
          }
        ],
        status: 200
      })
    );

    const wrapper = mount(<LatestGist />);
    let gist = wrapper
      .find('[data-test="test-latest-gist"]')
      .hostNodes()
    ;
    expect(gist.exists()).toBe(false);

    await act(() => new Promise(setImmediate));
    wrapper.update();

    expect(mockAxios.get).toHaveBeenCalledTimes(1);
    gist = wrapper
      .find('[data-test="test-latest-gist"]')
      .hostNodes()
    ;
    expect(gist.exists()).toBe(true);
    expect(gist.text()).toContain("test name");
    expect(gist.text()).toContain("some date");
  });
});

Forcing a failed assertion with a line like expect(gist.text()).toContain("foobar"); doesn't cause the suite to crash:

● LatestGist › should load the latest gist

expect(string).toContain(value)

  Expected string:
    "the latest gist was made on some date by test name"
  To contain value:
    "foobar"

    at Object.it (src/LatestGist.test.js:30:25)

Here are my dependencies:

{
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "enzyme": "3.9.0",
    "enzyme-adapter-react-16": "1.12.1",
    "jest": "24.7.1",
    "jest-environment-jsdom": "24.7.1"
  }
}
2

Some things to note;

  • process.nextTick is async, so the try/catch won't be able to capture that.
  • Promise will also resolve/reject async even if the code you run in the Promise is sync.

Give this a try

it('should render with container class after getting payload', (done) => {
    const getPayload = Promise.resolve({
        fullname: 'Alex Paterson'
    });
    const enzymeWrapper = mount(<MyComponent getPayload={getPayload} />);

    process.nextTick(() => {
        try {
            expect(enzymeWrapper.hasClass('container')).not.toBe(true);
        } catch (e) {
            return done(e);
        }
        done();
    });
});
3
1

Following on from Vladimir's answer + edit, here's an alternative that worked for me. Rather than await the mount, await the wrapper.update():

it('...', async () => {

  let initialValue;
  let mountedValue;

  const wrapper = shallow(<Component {...props} />);
  initialValue = wrapper.state().value;

  await wrapper.update(); // componentDidMount containing async function fires
  mountedValue = wrapper.state().value;

  expect(mountedValue).not.toBe(initialValue);
});
0

-- Posting as an answer for one cannot format code blocks in comments. --

Building upon Vladimir's answer, note that using async/await works in a beforeEach as well:

var wrapper

beforeEach(async () => {
  // Let's say Foobar's componentDidMount triggers async API call(s)
  // resolved in a single Promise (use Promise.all for multiple calls).
  wrapper = await shallow(<Foobar />)
})

it('does something', () => {
  // no need to use an async test anymore!
  expect(wrapper.state().asynchronouslyLoadedData).toEqual(…)
})
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.