Deprecated - for bug fixes and maintenance only
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 2 commits ahead of kadirahq:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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


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 = () => (

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}>
    <hr />
    <CommentListContainer postId={} />

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

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.