https://github.com/zth/enzyme-async-helpers

Async helpers for testing React components with Enzyme.
https://github.com/zth/enzyme-async-helpers

async async-await enzyme enzyme-testing javascript react tdd testing

Last synced: 11 days ago
JSON representation

Async helpers for testing React components with Enzyme.

• Host: GitHub
• URL: https://github.com/zth/enzyme-async-helpers
• Owner: zth
• License: mit
• Created: 2017-12-12T20:18:30.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-22T18:38:35.000Z (over 6 years ago)
• Last Synced: 2024-08-10T09:13:20.864Z (3 months ago)
• Topics: async, async-await, enzyme, enzyme-testing, javascript, react, tdd, testing
• Language: JavaScript
• Size: 56.6 KB
• Stars: 16
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# enzyme-async-helpers

A library to aid in testing async React components and methods using Enzyme.

## Installation

This library was built with React 16 and Enzyme 3 in mind. It *might* work on lower versions

as well, but the lib is developed for and tested on those versions.

```

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:

### waitForElement

*Signature*: `(wrapper: EnzymeWrapper, elementSelector: EnzymeSelector, config?: Config) => Promise`

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);

});

``` 

### waitForState

*Signature*: `(wrapper: EnzymeWrapper, stateValidationFn: (state: Object) => boolean, config?: Config) => Promise`

Wait 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);

});

```

### waitForProps

*Signature*: `(wrapper: EnzymeWrapper, propsValidationFn: (props: Object) => boolean, config?: Config) => Promise`

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(); // Wrapper renders SomeComponent and passes in props

    const componentWrapper = wrapper.find(SomeComponent);

    

    await waitForProps(componentWrapper, props => props.someProp === 'test');

    expect(componentWrapper.instance().props.someProp).toBe('test');

});

```  

### config

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.

}

```