This repositiory is deprecated and will not be maintained. It will soon be archived.
Enzyme Context is a pluggable library which simplifies the process of testing components that rely on react context.
test-utils/enzyme.ts
import { createMount, createShallow } from 'enzyme-context';
import { reduxContext } from 'enzyme-context-redux';
import { routerContext } from 'enzyme-context-react-router-4';
import { createStore } from 'redux';
import reducer from './reducer'; // this is _your_ app's main reducer
const plugins = {
store: reduxContext({
createStore: () => createStore(reducer),
}),
history: routerContext(),
};
export const mount = createMount(plugins);
export const shallow = createShallow(plugins);MyComponent.spec.tsx
import { mount } from '../test-utils/enzyme'; // import from the module defined above
import MyComponent from './MyComponent';
// this example uses jest, but that isn't required!
describe('MyComponent', () => {
let component;
let store;
let history;
beforeEach(() => {
// mount() returns an object with the mounted EnzymeWrapper component and each of the specified plugins.
// In this example, it returns:
// - component: the mounted EnzymeWrapper
// - store: provided by the reduxContext plugin, a redux store
// - history: provided by the routerContext plugin, a history object for URL manipulation
({ component, store, history } = mount(<MyComponent />));
});
it('responds to redux state changes', () => {
store.dispatch({ type: 'SOME_ACTION' });
component.update();
expect(component.text()).toBe('...');
});
it('responds to location changes', () => {
history.push('/my/new/url');
component.update();
expect(component.text()).toBe('...');
});
});Enzyme Context maintains a few official plugins for some popular react libraries: