React Application Unit Testing

Question

I am currently testing a React app using Selenium for Functional Testing. Selenium is used to launch the app on the browser, and simulate user actions and keep asserting/verifying at each step.

However it gets very tedious to debug these tests as the UI automation is heavy as it has to actually launch the browser , wait for pages to load (which at times is a pain given the unstable environments).

I read about some frameworks like chai which are very lightweight and very fast since I do not have to wait for the pages to load.

On similar lines , can anyone suggest me ways to do the complete functional testing of this application where I can bypass the UI actions (as done by Selenium) , for eg. instead of making selenium to go around clicking and simulation user actions on the UI, is there any way we can load a react component and try to simulate certain user actions through the code and then do the functional verification from the DB and also have data providers for my test . For eg - I have a set of data to be passed to my test function , and this test will run for all the set of data and keep asserting respectively.

Will something like unit testing/white box testing work ? Will testing frameworks like chai help me with this requirement ?

Do suggest me any other approach if you know.

score 5 · Accepted Answer · answered Mar 15 '17 at 05:45

Ok, so this is the testing stack I have used on my projects.

Karma is an example of a test runner

Mocha is an example of a testing framework

Chai is an example of an assertion library

Sinon is an example of a testing plugin

Enzyme is an example for element selection. (Similar to Jquery)

Karma: Test Runner

Karma is a type of test runner which creates a fake server, and then spins up tests in various browsers using data derived from that fake server. Karma is only a test runner, and requires a testing framework such as Mocha to plug into it in order to actually run tests.

I used webpack + karma.conf.js file. to setup the Karma ecosystem. You can setup a command to watch the test cases run in parellel while coding.

Mocha: Testing Framework

The following file uses Mocha as a testing framework, and Chai as an assertion library:

describe('the todo.App', function() {
  context('the todo object', function(){

    it('should have all the necessary methods', function(){
      var msg = "method should exist";
      expect(todo.util.trimTodoName, msg).to.exist;
      expect(todo.util.isValidTodoName, msg).to.exist;
      expect(todo.util.getUniqueId, msg).to.exist;
    });
  });
});

Distinguish Between Mocha and Chai

We can distinguish between framework (Mocha) methods and assertion library (Chai) methods by looking at the contents of the it block. Methods outside the it block are generally derived from the testing framework. Everything within the it block is code coming from the assertion library. beforeEach, describe, context, it, are all methods extending from Mocha. expect, equal, and exist, are all methods extending from Chai.

afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
    $window.localStorage.removeItem('com.shortly');
});

it('should have a signup method', function() {
    expect($scope.signup).to.be.a('function');
});

All the methods concerned with the testing framework are occurring outside the it block, and all methods concerned with the assertion library are occurring inside the it block. Therefore we can conclude that anything occurring inside the it block is indeed occurring on a lower level of abstraction than the testing framework.

Or in terms of our classification schema, everything occurring inside the it blocks is either part of an assertion library or a part of a testing plugin. The notion that anything inside the it block is occurring on a lower level of abstraction than the testing framework is only a heuristic, that is- it is merely a rule of thumb.

Sinon: Testing Plugin

Sinon is a plugin which hooks into Chai and gives us the ability to perform a more diverse set of tests. Through the Sinon plugin we can create mocks, stubs, and fake servers:

describe('API integration', function(){
  var server, setupStub, JSONresponse;

  beforeEach(function() {
    setupStub = sinon.stub(todo, 'setup');
    server = sinon.fakeServer.create();
  });

  it('todo.setup receives an array of todos when todo.init is called', function () {
  });

  afterEach(function() {
    server.restore();
    setupStub.restore();
  });
});

Sinon has a bunch of cool features that allow you to really get into the nooks and crannies of your source code and see what is really going on under the hood.

You could use the spy function for event handlers as well

Think this should provide a direction. Source

Is it possible for me to use Protractor to launch the browser and then use some unit testing concepts to do the UI part automation? So instead of waiting for Protractor to go around clicking /filling data/ selecting checkboxes etc etc, can I just perform these tasks by loading these react components something like this- http://stackoverflow.com/questions/40091000/simulate-click-event-on-react-element — Gloria Rampur, Mar 15 '17 at 06:16
@GloriaRampur Am not sure about Protractor. But you could PhantomJs for a headless browser and run the test cases in the terminal itself. Something like this - https://gist.github.com/swapnil-webonise/81582e2c5d678268afc0#file-karma-conf-js — Nevin Madhukar K, Mar 15 '17 at 06:20
@GloriaRampur On a second read, I didn't quite understand what you meant by the above comment. How do you expect to pass ref's within a test case? — Nevin Madhukar K, Mar 15 '17 at 06:23

React Application Unit Testing

1 Answers1