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.

Example

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

Setup 

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 />
    </Provider>);
    expect(root).toExist();
  });

});

Test Flow

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

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

    // 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;
    TestUtils.Simulate.change(checkbox);

    // check todo completion
    expect(todoItems[0].props.todo.completed).toEqual(true);
});

7 comments:

  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

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  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.

    ReplyDelete
  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

    ReplyDelete
  5. Slots Casino Games - DRMCD
    slots casino 충주 출장안마 games · slots 광명 출장샵 casino · slots casino · slots casino · slots casino · slots casino · slots casino · 김천 출장샵 slots casino 강릉 출장안마 · slots casino · slots casino · slots casino 인천광역 출장샵 · slots casino ·

    ReplyDelete
  6. Read our honest broker review of Top Forex Brokers In Malaysia , one of the best online trading companies. Find out about the advantages of using a broker like Malaysia, and learn more about the stock market and the best ways to invest in it. Read more here.

    ReplyDelete

Blogroll

Popular Posts