storybooks/react-stubber

Name: react-stubber

Owner: Storybook

Description: Deprecated - for bug fixes and maintenance only

Forked from: kadirahq/react-stubber

Created: 2017-11-15 16:08:34.0

Updated: 2018-05-18 15:55:48.0

Pushed: 2017-11-15 16:42:48.0

Homepage:

Size: 437

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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:

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

rt const CommentList = () => (
l>

ul>

entList.displayName = 'CommentList';
rt 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.

rt const Post = (post) => (
iv 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.

rt { setStubbingMode } from 'react-stubber';
tubbingMode(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).

rt { stub } from 'react-stubber';

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

Then once rendered it will looks like this.