react-redux-test-utils

> Utils for testing react-redux applications using enzyme and jest snapshots


Why

1. It separates between unit-testing and integration-testing and gives you tools to write both.
2. It reduces the boilerplate.
3. It uses a data-driven approach for unit-testing so instead of writing test logic, you define objects that describe your tests.
4. It is very fast and easy to write tests.
5. It comes with enzyme and uses snapshots testing.

Installation

``sh


with npm

npm install --save-dev react-redux-test-utils

with yarn

yarn add -D react-redux-test-utils
`

Usage

react-redux-test-utils allow you to write unit-testing that look like this:

`js
/ UserProfile.test.js /
import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
import UserProfile from '../UserProfile';

const fixtures = {
'should render UserProfile': {
user: 'some-user',
},
'should render UserProfile with avatar': {
user: 'some-user',
showAvatar: true,
},
'should render UserProfile with posts and photos': {
user: 'some-user',
showPosts: true,
showPhotos: true,
},
};

describe('UserProfile - component', () =>
testComponentSnapshotsWithFixtures(UserProfile, fixtures));
`

It also provide the IntegrationTestHelper that helps with writing integration-testing:

`js
/ __tests__/integration.test.js /
import React from 'react';
import { IntegrationTestHelper } from 'react-redux-test-utils';

import UserProfile, { reducers } from '../index';

describe('UserProfile - Integration Test', () => {
it('should flow', () => {
const integrationTestHelper = new IntegrationTestHelper(reducers);

const component = integrationTestHelper.mount(

);

// The user-avatar should not be shown
expect(component.exists('UserAvatar')).toEqual(false);
integrationTestHelper.takeStoreSnapshot('initial state');

// trigger checkbox change
component
.find('input#show-avatar-toggler')
.simulate('change', { target: { checked: true } });

// The user-avatar should be shown now
expect(component.exists('UserAvatar')).toEqual(true);
integrationTestHelper.takeStoreAndLastActionSnapshot(
'Update to show the user-avatar'
);
});
});
`

Documentations

1. Manage your folder structure.
2. Unit-testing components.
3. Unit-testing redux actions.
4. Unit-testing redux reducers.
5. Unit-testing redux selectors.
6. Integration-testing.

Related

1. generator-react-domain will help you to generate react components with domain-driven file structuring and with tests file that uses the react-redux-test-utils`.

License

MIT © Avi Sharvit