The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

React Testing: Setting up dependencies

React Testing: Setting up dependencies

0:46
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._
Watch this lesson now
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.

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