[React Testing] Setting up dependencies && Running tests

To write tests for our React code, we need to first install some libraries for running tests and writing assertions. In this lesson we walk through setting up Mocha as our test runner and expect as our assertion library. We will also set up some React and JSX specific test tools (React Test Utils) to make writing our tests easier.

NOTE: There are many alternatives to Mocha, expect, and the other test tools we use in this course. Although we use these specific tools and libraries, the testing principles apply to all other tools.

 

package.json:

{
  "name": "react-testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "expect": "1.13.4",
    "mocha": "2.3.4",
    "react-addons-test-utils": "0.14.5"
  },
  "dependencies": {
    "react": "0.14.5",
    "react-dom": "0.14.5"
  }
}

 

 

we walk through how to setup our tests and run them. We write a quick empty first test and assertion, so we can run the tests. Using Mocha, we can do this manually each time with the Mocha CLI. We can also automate this using task runner features from tools like Grunt, Gulp, Webpack, or npm scripts. In this course, we will use the common npm test script setup to run our tests. We will also use the Babel compiler to write our tests with modern JavaScript syntax.

import expect from 'expect';

describe('empty', ()=>{

    it('should work', ()=>{
        expect(true ).toEqual(true);
    });
});

 

packjson.js: Install babel also

{
  "name": "react-testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha ./src/**/*.spec.js --compilers js:babel-core/register",
    "test:watch": "npm test -- --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "6.1.4",
    "babel-loader": "6.1.0",
    "babel-preset-es2015": "6.1.4",
    "babel-preset-react": "6.1.4",
    "babel-preset-stage-2": "6.1.2",
    "expect": "1.12.2",
    "mocha": "2.3.3",
    "react-addons-test-utils": "0.14.3",
  },
  "dependencies": {
    "react": "0.14.3",
    "react-dom": "0.14.3"
  }
}

 

.babelrc

{
  "presets": ["react", "stage-2", "es2015"]
}