React Testing: Running tests

Trevor Miller
InstructorTrevor Miller

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

Jason Soares
Jason Soares
~ 6 years ago

Initially, I was getting the following error:

(function (exports, require, module, __filename, __dirname) { import expect from 'expect';

In order to get the empty test to work, I had to create a .babelrc file in my project root with the following content:

{
    "presets": ["es2015"]
}
Trevor Miller
Trevor Millerinstructor
~ 6 years ago

Yes. The code example for the lesson has this.

Jaga Santagostino
Jaga Santagostino
~ 6 years ago

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

Trevor Miller
Trevor Millerinstructor
~ 6 years ago

Jaga, glad this was helpful! I believe the Egghead markdown doesn't support full ``` code comments.

Joe Martinez
Joe Martinez
~ 6 years ago

This bit me too. Thanks for the solution.

Ionut Cirja
Ionut Cirja
~ 6 years ago

Hello,

Any idea how to add coverage here?

Thanks, Ionut

Trevor Miller
Trevor Millerinstructor
~ 6 years ago

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 :)

Ionut Cirja
Ionut Cirja
~ 6 years ago

Thanks Trevor.

Dean
Dean
~ 6 years ago

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?

Trevor Miller
Trevor Millerinstructor
~ 6 years ago

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 :)

Trevor Miller
Trevor Millerinstructor
~ 6 years ago

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 :)

Dean
Dean
~ 6 years ago

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 ?

Rajitha
Rajitha
~ 6 years ago

How are you getting those suggestions as you type?

Rajitha
Rajitha
~ 6 years ago

package name or anything?

Eric
Eric
~ 6 years ago

Which course should we do first - it looks like you have code already going in lesson 1?

Omar Eduardo
Omar Eduardo
~ 6 years ago

The course uses the [code from github] (https://github.com/trevordmiller/favorite-quotes)

Ben Barreth
Ben Barreth
~ 6 years ago

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. :(

Julian Lloyd
Julian Lloyd
~ 5 years ago

How are you getting those suggestions as you type?

I too would like to know this.

saurabh
saurabh
~ 5 years ago

you should mention it in your tutorial.

Thomas Hodges
Thomas Hodges
~ 5 years ago

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?

Robin Ury
Robin Ury
~ 4 years ago

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.