This is the child article of ReactTestUtils - Tutorial. In this article, I will explain how to write test cases for React-Redux apps.

Redux apps maintains common state for all components, so one component state might be depend on action in other component. So you should better test whole application with Provider and Store than testing each and every component.


Lets take a Todo example.  You can find source of this example here

Testing Flow

  1. Enter test 'Sample task' in input field
  2. Click enter
  3. Check Todo Item is added or not
  4. Click on check box of that Todo Item
  5. Check whether todo task is completed or not


Create store using reducers. Render the App component with Provider and store. This is basic setup to test Redux applications.
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect';
import reducer from '../reducers'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from '../containers/App'

const store = createStore(reducer)

describe('root', function () {

  it('renders without problems', function () {
    var root = TestUtils.renderIntoDocument(<Provider store={store}>
      <App />


Test Flow

The above described test flow can be found below. 
it('Todo lifecycle test', function () {
    var root = TestUtils.renderIntoDocument(<Provider store={store}>
    var compArr = TestUtils.findRenderedComponentWithType(root, TodoTextInput);

    // change input text value
    var inputElm = TestUtils.findRenderedDOMComponentWithTag(compArr, 'input');
    inputElm.value = 'some task';

    // press enter
    TestUtils.Simulate.keyDown(inputElm, {which : 13});

    // find ToDo Items and verify the value
    var todoItems = TestUtils.scryRenderedComponentsWithType(root, TodoItem);
    expect(todoItems[0].props.todo.text).toEqual('some task');

    // check the todo item
    var checkbox = TestUtils.findRenderedDOMComponentWithTag(todoItems[0], 'input');
    checkbox.checked = true;

    // check todo completion


  1. Another Tab which google play doesn't have is Social Timeline. On the off chance that You are separate in with any of your social record, aptoide tracks all the early exhibited applications on your contraption and gives you a data of the applications which your embellishments have been utilizing. kingoroot

  2. This comment has been removed by the author.

  3. Wow, thank you for the tutorial. It's perfect for such newbies as I am. I thought it will take hours for me to understand all this. But you helped me so much. Now I have enough time to write all the topic samples that should be done before Christmas vacations.

  4. Very nice post. I simply stumbled upon your blog and wanted to say that I’ve really enjoyed browsing your blog posts. Need a logo just click below:
    custom logo design services



Popular Posts