react-container-component
React containers components for easy unit testing
Why should I use this?
- It enforces good design patterns:
- It makes unit testing your container components easier by facilitating test doubles
- It makes the unit tests of your containers run faster because besides "mocking" the container's dependencies, it doesn't render the container's child components (and children of the children, and so on) even if you mount it.
How to install
npm install react-container-component --save
How to use it
1 . Your container components should extend react-container-component Container instead of React Component:
import { Container } from 'react-container-component';
class PhotosContainer extends Container {
2 . Your presentational component should specify all the properties it needs by setting its propTypes
(well you should do it either you use react-container-component Container or not, propTypes are a good practice :). Example:
const Photos = (props) => <h1>He have {props.photos.length} photos</h1>
//The container will automatically pass the following props to the presentational component
Photos.propTypes = {
photos: React.PropTypes.string
}
3 . The constructor of your container should call this.setComponent(Photos), passing the presentational component we want to render. Example:
class PhotosContainer extends Container {
constructor() {
super();
this.setComponent(Photos);
}
componentDidMount() {
this.props.getPhotos()
}
}
export default connect(
state => { photos: state.photos },
{ getPhotos: actions.getPhotos }
)(PhotosContainer)
See the react-redux example
4 . No render method
Rendering the 'view' is not the concern of the container, that is the concern of the presentational component. Therefore the only thing you should write in the render method of the container is i) what component you want to render and ii) which props you want to pass down. And that is already done by the react-container-component Container class.
5 . Write a test for your container
import React from 'react';
import { createStore } from 'redux';
import { createFakeComponent, Context } from 'react-container-component';
import { expect } from 'chai';
import { mount } from 'enzyme';
import PhotosContainer from '../../../src/containers/PhotosContainer';
import sinon from 'sinon';
import TestUtils from "react-addons-test-utils";
describe('Photos container', () => {
it(`should fetch photos and pass them down to the child component`, () => {
const props = {};
const FakePhotos = createFakeComponent(test);
const photos = [{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "http://placehold.it/600/92c952",
"thumbnailUrl": "http://placehold.it/150/30ac17",
}];
const store = createStore(()=>{});
sinon.stub(store, 'getState').returns({ photos });
//Example using Enzyme
const container = mount(
<PhotosContainer
component={FakePhotos}
/>,
{ context: { store: store }}
);
//Example using TestUtils and the generic Context component
TestUtils.renderIntoDocument(
<Context store={store}>
<PhotosContainer
component={FakePhotos}
/>
</Context>
);
expect(props.photos).to.be.deep.equal(photos);
})
})
Examples
Check this folder /examples
Resources
- Post (React Dependency Injection, write unit tests easily with react-container-component)
- Ping @alex_lobera on Twitter