Simple but useful stubbing solution React
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.scripts Initial commit. Jun 30, 2016
.storybook Fix imports. Jun 30, 2016
docs Add README.md Jun 30, 2016
src Fix imports. Jun 30, 2016
.babelrc Initial commit. Jun 30, 2016
.eslintrc Initial commit. Jun 30, 2016
.gitignore Initial commit. Jun 30, 2016
.npmignore Initial commit. Jun 30, 2016
CHANGELOG.md Add CHANGELOG.md Jun 30, 2016
CONTRIBUTING.md Initial commit. Jun 30, 2016
LICENSE Initial commit. Jun 30, 2016
README.md Update README.md Jun 30, 2016
package.json 1.0.0 Jun 30, 2016

README.md

React Stubber

A simple but useful stubbing solution for React. This will work with any container library whether it's Redux, React Komposer or with any React Component.


Read this article for an introduction: Stubbing React Containers for Testing

Usage

First of all, we need to wrap React classes we need to stub with the mayBeStubbed function. See:

import React from 'react';
// compose if our container building library.
import compose from './compose';
import { mayBeStubbed } from 'react-stubber';

export const CommentList = () => (
  <ul>

  </ul>
);
CommentList.displayName = 'CommentList';
export const CommentListContainer = mayBeStubbed(compose(CommentList));

Then we can use the CommentListContainer anywhere we need.

So, let's use the above CommentListContainer inside another Component called Post.

export const Post = (post) => (
  <div style={style}>
    <h1>{post.title}</h1>
    <p>{post.text}</p>
    <hr />
    <h3>Comments</h3>
    <CommentListContainer postId={post.id} />
  </div>
);

In order to do isolated testing, first make sure we are in the stubbing mode.

We need to do this, before importing any React component. This is something you could do when doing the test setup or in the React Storybook config file.

import { setStubbingMode } from 'react-stubber';
setStubbingMode(true);

Then when we render Post we will get something like this:

We can also stub this component with a custom component we like. This is how we do that. You need to do this before using the Post component.
(The test file or storybook story file is a good place for this).

import { stub } from 'react-stubber';

stub(CommentListContainer3, (props) => (
  <div>Comments for postId: {props.postId}</div>
));

Then once rendered it will looks like this.