React - Component testing + End-to-End testing

Introduction

There are many test frameworks for testing React app. 

Facebook introduced their own Jest framework which helps you run test cases against the React components and also mock some of the flow. 

With lot of JavaScript developers in the community also having their due soft corner towards Mocha as their test runner. Lets see the things that are good and can be the right tool for the environment. 

This post is basically trying to give more overview about how we can test a react app and ensure to automate the same.

Tools for testing components

The most favored tools include the Jest and Mocha. There are also plenty of other tools like Jasmine. Now these are all your test runner frameworks which use plenty of other libraries to get their work done, like Chai, Karma, PhantomJS or JSDom.

Checking this webpage tells more about the community ​usage:

Talking briefly about Jest and Mocha (which requires other library support to run the test cases). Jasmine is almost similar in ways of Mocha and in the world of React, Mocha is widely accepted.

Jest

• Add-on for react by Facebook.
• By default mocks which can also be overridden, ex: jest.unmock('react-relay') JSDom: Jest ships with JSdom which simulates a DOM environment as if you were in the browser.
• Jest, is still evolving along with the rest of the React ecosystem.
• Complaints about slow execution of the test’s.
• Jest provides many tools to simulate the click events and to test the mount of components, example:

  //<button ref="button">...</button>
  var​ node​ = this.refs.button;
  ReactTestUtils.Simulate.click(node);
  

Mocha

• Framework works best with other libraries like Karma & Enzyme
• Enzyme, created by Airbnb, is, claimed as “a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components output."
• Uses PanthomJS which is like JSDom, but instead of virtual dom (JSDom), it actually runs on a headless browser.
• Setting up all these libraries is going to take some effort, but is usually smooth once we get a hang of it.
• Enzyme with Mocha provides support to test the component behavior, example:

  it​('simulates click events', () =>​ {
     const​ onButtonClick​ = ​spy();
     const​ wrapper = ​mount(<Foo onButtonClick={​ onButtonClick​ } />);
     wrapper.find('button').simulate('click');
     expect(onButtonClick.calledOnce).to.equal(true);
  });
  

Tools for testing e2e testing

Now considering on the fact of end to end testing. There are plenty of tools which can help us write end to end testing for react apps. React single page applications to be able to get tested, we have several e2e testing tools, like, the well known Selenium.

Now, considering that Selenium has lot to digest, there are also tools like Nightwatch.js, Webdriver.io, Protractor (specialized for AngluarJS apps) & Chimp.io.

Nightwatch.js

• It is an easy to use Node.js based End-to-End (E2E) testing solution for browser based apps and websites.
• It uses the powerful Selenium WebDriver API to perform commands and assertions on DOM elements.
• Selenium Server is a Java application which Nightwatch uses to connect to the various browsers. It runs separately on the machine with the browser you want to test.
• Unlike WebdriverIO, which lets you use various test frameworks and assertion libraries (e.g. Jasmine, Cucumber, Mocha + Chai), Nightwatch comes with ​ its own BDD-style interface for performing assertions ​ , based on Chai.
• Use CSS, or ID selectors and is pretty neat to use and run the test cases.
• The iterator allows you retries, you will often be able to find where your script is failing. This may allow you to more quickly find the defect instead of focusing on why your script is failing. Example:

  var ​ server = require(​ '../server.js'​ );
  module.exports = {
      tags: [​ 'demo'​ ] ​ ,
      'Demo test'​: ​function (client) {
                     client
                          .url(​ 'http://localhost:8080'​ )
                          .pause(​ 1000​ );
                     // Check that elements exist.
                     client.expect.element(​ 'body'​ ).to.be.present.before(​ 1000​ );
                     // Check that elements have correct values and types.
                     client.expect.element​ ( ​ '#text'​ ).to.have.value.equal(​ ''​ );
                     // Set text and click button.
                     client.setValue(​ ‘#text', 'foobar'​ ').pause(500);
                     client.click(​ '#calc'​ ).pause(500); .....
  

Webdriver.io

• WebdriverIO lets you use your favorite testing framework (Jasmine, Mocha, Cucumber) and assertion library (Chai for Mocha)
• WebdriverIO has a plugin called WebdriverCSS that allows you to do cross visual platform/browser tests.
• There is no iterator, there is less ability to recover from failures during a test execution, this means failures are more definitive. Because this is purely async, you may have headaches tracing the exact origin of the failure. Example:

  var​ webdriverio = ​ require​('webdriverio'​);
  var​ options = { desiredCapabilities: { browserName: ​ 'chrome'​ } };
  var​ client = webdriverio.remote(options);
  client
     .init()
     .url(​ 'https://duckduckgo.com/'​ )
     .setValue(​ '#search_form_input_homepage'​ , ​ 'WebdriverIO'​ )
     .click(​ '#search_button_homepage'​ )
     .getTitle().then(​ function​ (title) {
        console​ .log(​ 'Title is: '​ + title);
      })
     .end();

Conclusion

With the a wide variety of tools available online, for component level testing we can use Mocha + Chai + Enzyme. Those are actively developed and are in constant support. For an e2e testing, the webdrive.io, the library still evolving, we can use our choice of libraries while using webdrive.io. Nightwatch is great and also is easy to use and also has good debugging mechanism and hence we see that Nightwatch is good for the e2e testing.