React Testing Cookbook
React Testing: Running tests
In this lesson, 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.
[00:00] To set up my project to run my tests, I'm going to go into my package.json, and then inside of my scripts block, and I'm going to create a new test script. Inside of this script, I'm going to use the Mocha CLI that we've already installed, and then I need to tell it what test files to run.
[00:17] We're going to be placing our test files inside of source, and then in any folder, and they will have a .spec.js extension. You could use any extensions here to say that this is a test file. Some people use .test.js, or -test.js, or place these in their own test folder, but this is the convention we'll be using in this course.
[00:40] Finally, I'm using Babel as a compiler to compile my React code and my ECMAScript 2016-2015 code back into JavaScript that will in the browser today. I need to add on the compilers flag, so I'll say compilers, and then I need to tell it to run Babel core, and now we'll be able to use modern syntax in all of our test files.
[01:06] To make sure our test script is working, I've created a new file with a .spec.js extension. Let's write a basic test in there, and then we'll run it. First, I need to import our assertion library, so I'll import Expect. Next, I'll create a describe block, which Mocha gives us to describe our tests. This'll just be an empty test.
[01:31] Now for our test itself, we're going to use an it block, which Mocha gives us, and say that it should work. Finally, we'll use our Expect package to assert that true is going to equal true. To run our test, I'll jump over to my command line and type NPM test. We can see that our test is passing.
Yes. The code example for the lesson has this.
Thanks a lot, this is was a pain the the @$$.
Also works in package.json in this way
"react-addons-test-utils": "^0.14.5"
}, "babel": { "presets": [ "es2015", ] }
ps: how do i format code? ```language-json not working as expected
Jaga, glad this was helpful! I believe the Egghead markdown doesn't support full ``` code comments.
This bit me too. Thanks for the solution.
Hello,
Any idea how to add coverage here?
Thanks, Ionut
Hi Ionut,
Since this lesson is just using Mocha under the hood, any approach to adding test coverage reports with Mocha will work for this too; it doesn't matter if you are testing React, pure JS, or another language. Here is some information on Stack Overflow about this: http://stackoverflow.com/questions/16633246/code-coverage-with-mocha
One thing to keep in mind is that if you are using ES2015 syntax via Babel with Mocha (like we are in this lesson), you will need to have some extra config to account for it. Here is a tutorial that walks through setting up test coverage with Mocha with Babel: https://drublic.de/blog/es6-modules-using-browserify-mocha/
Hope this helps :)
Thanks Trevor.
Trevor,
I notice you put your test files in the same dirs as the files you are testing. I am curious why you didn't go with the convention of a 'test' dir, and have the corresponding dir structure of the things you are testing etc.. like a mirror image, but with '.spec' (or .test) files only? Is there anything to gain or loss either way?
Hi Dean,
It is totally up to you. I've worked it both types of codebases. It really doesn't make a difference in how your tests run - just where they are placed. It is just like how a few years ago people mostly split their projects into "scripts" (all .js files), and "styles" (all .css files) - but more and more people are organizing by feature so you have a UnreadActivityIndicator which includes your scripts, styles, etc. I prefer to also put my tests with the feature it is testing so that everything related to the component/module is in one place. But it totally works to have a root "tests" folder as well :)
I especially like to have my tests next to what they are testing because when I import the thing that is being tested, I can do:
import ThingBeingTested from './ThingBeingTested';
Instead of...
import ThingBeingTested from '../src/components/SomeParentComponent/ThingBeingTested';
Keeps everything related together so you can move a component folder wherever you want and your imports wont break.
But you can do it either way :)
Thanks for your prompt response! I do have one more question if I may. You use React.utils library -- for the component checking stuff, I am curious why you didn't go the route of jsdom? Do you feel one never has to get that granular with the child components etc? Or ?
How are you getting those suggestions as you type?
package name or anything?
Which course should we do first - it looks like you have code already going in lesson 1?
The course uses the [code from github] (https://github.com/trevordmiller/favorite-quotes)
This course seems to be missing a step at the end of lesson 1 that says "go to the github repository, copy the package.json there and npm install all the other dependencies that we haven't mentioned.
I followed lesson 1 exactly, but now at the beginning of lesson 2, my package.json is suddenly wildly different to what is being shown in the video with no explanation. It's fine for me - I know to go get the packages from github - but for a beginner this would be incredibly confusing. :(
How are you getting those suggestions as you type?
I too would like to know this.
you should mention it in your tutorial.
lesson one, this is what I get when I run the test: /home/thodges/Wordspace/unit_testing/src/tests/empty.spec.js:1 (function (exports, require, module, __filename, __dirname) { import expect from 'expect'; ^^^^^^
SyntaxError: Unexpected token import at createScript (vm.js:74:10) at Object.runInThisContext (vm.js:116:10) at Module._compile (module.js:533:28) at loader (/home/thodges/Wordspace/unit_testing/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/home/thodges/Wordspace/unit_testing/node_modules/babel-register/lib/node.js:154:7) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at /home/thodges/Wordspace/unit_testing/node_modules/mocha/lib/mocha.js:230:27 at Array.forEach (native) at Mocha.loadFiles (/home/thodges/Wordspace/unit_testing/node_modules/mocha/lib/mocha.js:227:14) at Mocha.run (/home/thodges/Wordspace/unit_testing/node_modules/mocha/lib/mocha.js:495:10) at Object.<anonymous> (/home/thodges/Wordspace/unit_testing/node_modules/mocha/bin/_mocha:469:18) at Module._compile (module.js:569:30) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Function.Module.runMain (module.js:605:10) at startup (bootstrap_node.js:158:16) at bootstrap_node.js:575:3 thodges@RV-LEN-0MAXT3:~/Wordspace/unit_testing/src$
can you help me?
It would be great if we could get an updated version of this course. Perhaps using Jest and Enzyme rather than Mocha and the addon-test-utils.
Initially, I was getting the following error:
In order to get the empty test to work, I had to create a
.babelrcfile in my project root with the following content: