After you have ejected the React app, before you make any further modifications, you should make sure everything still works. Execute the following command before making any further modifications:
>npm start
Now check that a browser launched and that the application is running correctly. You will have to Ctrl + C to exit the running process:
>npm run build
After this command, check that a build folder was created at the root of your project and that there were no errors displayed in the console:
>npm test
Even though you are about to change the test configuration, you will be using some of the libraries that were provided by Create React App. You want to make sure that those prerequisites transitioned properly when you ejected. As with npm start, you will have to Ctrl + C to exit this process.
Assuming all of the commands executed without issues, you can now start the process of switching the test environment over to Mocha. Execute the following command to ensure the installation of the necessary dependencies:
>npm install mocha chai sinon enzyme
Open package.json and update the following lines:
"babel": {
"presets": [
"react-app"
]
},
Change the preceding code to:
"babel": {
"presets": [
"react",
"es2015"
]
},
You will also need to install the BabelJS preset for ES2015:
>npm install babel-preset-es2015
Next, find and delete the jest setting in package.json. You are now ready to change the test script to execute Mocha instead of Jest. Find NPM scripts and update the test script as follows:
"test": "node scripts/test.js --env=jsdom"
Change the preceding code to:
"test": "mocha --require babel-core/register ./scripts/test.js --require babel-core/register ./src/**/*.spec.js"
The change you just made will cause Mocha to execute all of your tests. It will only execute them once, though. You want a way to have your tests running continuously while you work, so you need to add an additional script. Add a comma to the end of the line you just modified and then add the following script just beneath test:
"test:watch": "npm test -- -w"
Now, you need to update the test.js file provided when you ejected. Open <project root>/scripts/test.js and replace all the code inside with the following:
'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;
This file just sets up the base environment for your tests to execute inside. Make note of the noop function and usage. Currently, you are ignoring the css and svg extensions that are required by your production code when you are testing. In the course of testing, if you run into issues while requiring a different extension, you might have to come back to this file and add the troublesome extension to the list.
You are almost done; you only have one more modification to make before you are officially switched over to Mocha. Find the file App.test.js in your src directory, and change its name to App.spec.js, then update the contents to the following:
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);
});
});
All you have really done here is import Chai and add a describe block. The rest of this test has remained unchanged and is the default test provided with Create React App.