React Testing: Running tests

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"]
}

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.