Async helpers for testing React components with Enzyme.
npm install enzyme-async-helpers
yarn add --dev enzyme-async-helpers
Usage
I recommend checking out the tests to see more examples than the ones below.
The lib exposes the following methods:$3
Signature: Wait for an element to appear. You can use any valid Enzyme selector (a component, CSS selector, etc).
javascript
import { waitForElement } from 'enzyme-async-helpers';
...it('should wait for MyComponent to appear', async () => {
const wrapper = mount(
await waitForElement(wrapper, MyComponent);
expect(wrapper.find(MyComponent).length).toBe(1);
});
` $3
Signature: (wrapper: EnzymeWrapper, stateValidationFn: (state: Object) => boolean, config?: Config) => PromiseWait for your component's state to update to something.
javascript
import { waitForState } from 'enzyme-async-helpers';
...it('should wait for loading to stop', async () => {
const wrapper = mount(
await waitForState(wrapper, state => state.loading === false);
expect(wrapper.instance().state.loading).toBe(false);
});
`$3
Signature: Wait for your component's props to update to something.
javascript
import { waitForProps } from 'enzyme-async-helpers';
...it('should wait for someProp to be valid', async () => {
const wrapper = mount(
const componentWrapper = wrapper.find(SomeComponent);
await waitForProps(componentWrapper, props => props.someProp === 'test');
expect(componentWrapper.instance().props.someProp).toBe('test');
});
` $3
All the methods listed above take a third config argument of the following shape:
`javascript
type Config = {
interval: number, // Default: 50, how often to check for validity
timeout: number, // Default: 2000 (2 seconds), how long to wait before timing out
logStructureOnTimeout?: boolean, // Default: true, logs the wrapper's rendered structure when the wait times out. An attempt to help out in finding what's wrong.
logStructureOnSuccess?: boolean // Default: false, logs the wrapper's rendered structure on success.
}
``