Now, we are ready to add the testing facilities that we would like to use for this app. As before, the addition of these utilities has been covered in detail in a previous chapter. So, we will only be providing the commands to execute and the versions of the packages to install.
Execute the following commands to install the libraries we are going to use:
>npm install [email protected]
>npm install [email protected]
>npm install [email protected]
>npm install [email protected]
There are also a few other libraries we will be using as part of our Redux workflow:
>npm install [email protected]
>npm install [email protected]
>npm install [email protected]
>npm install [email protected]
>npm install [email protected]
Including the version in the install, the command will ensure that you are using the same version of the libraries that we are and will reduce the number of potential issues.
To use the libraries we have just installed, we will also need to install an extra preset for babel:
>npm install [email protected]
Update your babel config in package.json to remove react-app and include react and es2015.
"babel": {
"presets": [
"react",
"es2015"
]
},
As described in Chapter 7, Setting up the JavaScript Environment, delete the test configuration section from package.json. Then, update the test script to:
"test": "mocha --require ./scripts/test.js --compilers babel-core/register ./src/**/*.spec.js"
And add a test watch script:
"test:watch": "npm test -- -w"
We are now ready to update the test execution file test.js in the scripts folder so it's compatible with Mocha. Change all the contents of the file to:
'use strict';
import jsdom from 'jsdom';
global.document = jsdom.jsdom('<html><body></body></html>');
global.window = document.defaultView;
global.navigator = window.navigator;
function noop() {
return {};
}
// prevent mocha tests from breaking when trying to require a css file
require.extensions['.css'] = noop;
require.extensions['.svg'] = noop;
The last step before we can use our new testing libraries is to update the App.test.js file to match the conventions used with Mocha and Chai. So, change the filename to App.spec.js and update the contents to match the code shown here:
import React from 'react';
import ReactDOM from 'react-dom';
import { expect } from 'chai';
import App from './App';
describe('(Component) App', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
});
Now, as before, execute the test script and start the application to make sure nothing broke during our transformation to Mocha.
>npm test
>npm run test:watch
>npm start
All three of those commands should work. If you have an issue, check all the steps we have just discussed and look to Chapter 7, Setting Up a JavaScript Environment, for a more detailed explanation.