Wait for an async element to appear when performing integration tests with enzyme.
MIT License
Wait for an async element to appear when performing integration tests with enzyme. Returns a promise which resolves with the root component you performed your search on.
NEW: There is now a fully working example using both Promises and async/await.
createWaitForElement(
enzymeSelector,
/*Optional*/ timeOut,
/*Optional*/ intervalDuration
)(componentToSearchOn)
.then(/* ... */)
.catch(/* ... */)
import React from 'react';
import { mount } from 'enzyme'
import { createWaitForElement } from 'enzyme-wait';
/**
* The component you want to test. Assume it displays
* the string "ready" after performing some async action
* which takes time.
*/
import SampleComponent from '...';
const waitForSample = createWaitForElement('#sample-ready');
const component = mount(<SampleComponent />);
it('displays ready once it is ready', ()=> {
waitForSample(component)
.then( component => expect(component.text()).to.include('ready') );
});
The same as above but using async/await instead of Promises:
it('displays ready once it is ready', async ()=> {
const componentReady = await waitForSample(component);
expect(componentReady.text()).to.include('ready');
});
If you have multiple async actions happening, just make sure to always return a Promise which resolves with the root component. This way you can create nice looking chains and avoid callback hell.
Example:
const component = mount(<SampleComponent />);
it('displays ready after multiple interactions', ()=> {
createWaitForElement('#sample-ready')(component)
.then( /* do something and return a resolved promise with the comp */ )
.then( /* do something and return a resolved promise with the comp */ )
.then( createWaitForElement('#another-component-ready') )
.then( component => expect(component.text().to.include('ready') );
});
There is now a working example inside this repo using both the Promise-approach as well as the async/await-approach.
The example uses Jest, but it should work with any test framework. In other frameworks you might need to call done() on asynchronous tests.
To play around with this example you can:
npm install && npm run dist
on the root repo (this is required to create a lib version of this package which is listed in the example's dependencies )cd example
npm install && npm start
http://localhost:9000
to see the example or run npm test
to see the tests working.