Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



React Testing: Setting up dependencies

0:46 React lesson by

To write tests for our React code, we need to first install some libraries for running tests and writing assertions. In this lesson we walk through setting up Mocha as our test runner and expect as our assertion library. We will also set up some React and JSX specific test tools (React Test Utils) to make writing our tests easier.

NOTE: There are many alternatives to Mocha, expect, and the other test tools we use in this course. Although we use these specific tools and libraries, the testing principles apply to all other tools.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

To write tests for our React code, we need to first install some libraries for running tests and writing assertions. In this lesson we walk through setting up Mocha as our test runner and expect as our assertion library. We will also set up some React and JSX specific test tools (React Test Utils) to make writing our tests easier.

NOTE: There are many alternatives to Mocha, expect, and the other test tools we use in this course. Although we use these specific tools and libraries, the testing principles apply to all other tools.

Avatar
Nick Johnson

What ridiculously sexy font is that in your editor and terminal?

In reply to egghead.io
Avatar
Trevor

Hey Nick, it's Roboto Mono Light (Google's official mono font). https://www.google.com/fonts/specimen/Roboto+Mono. Thanks for watching!

In reply to Nick Johnson
Avatar
Dean

figure I'll post the question here.. I am running an exceedingly simple test, and it is failing here:

renderer.render();
^

with this error:

mocha './src/*/.spec.js' --compilers js:babel-core/register

/Users/.../node_modules/babel-core/lib/transformation/file/index.js:548
throw err;
^

SyntaxError: /Users/components/product.spec.js: Unexpected token (11:24)

I'm assuming it has to do with es6, but my app is in es6 just fine, and as you can see I have the compile with es6.

Avatar
Trevor

Hey Dean, it sounds to me like you may not have babel installed? You need some sort of compiler (like Babel) that turns JSX and ES2015 code into ES5 code that Mocha can run. If you continue to have issues with Babel, you might get the best help by posting a question on Stack Overflow. Hope this helps :)

In reply to Dean
Avatar
Ransyn

Hi Trevor,

I'm using eslint, and it was flagging no-undef errors on functions such as describe() and it() in my test files. I discovered that adding the following to .eslintrc resolved it, eg :
"globals": {
"describe": true,
"it": true
}

However this doesn't feel like the most robust of solutions. Is there a better approach?

Avatar
Tey

Is there a way to get these running in a Codepen, specifically the test-utils. I constantly have trouble lib importing in there since you don't do 'import' and react-addons-test-utils doesnt seem to be a standalone script.

Before we write tests for our React components, we're going to need a test runner. I'm going to NPM install Mocha. We also need to be able to write assertions for our tests, so I'm going to install the Expect library. Finally, we're going to need the React addons TestUtils package, which has been developed by the React team to make it easier to test React components.

I'm going to add the -save-dev flag onto this command, so that it saves these packages into our package.json devDependencies. We'll run this, and we can see in our package.json that the dependencies have been installed, as expected.

We're now set up to write up some tests. I'd like to point out that, although we're using Mocha and Expect, there are many test tools that you can use, but the principles in this course apply to all these different test tools.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?