React Testing Cookbook
React Testing: Setting up dependencies
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.
[00:00] 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.
[00:22] 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.
[00:36] 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 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 :)
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?
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.
A quibble (because it interferes with a lot of learning programs and ends up costing me a significant amount of backtracking).
You started with step 2 -- install mocha etc.
You must be explicit about step 1 because of the number of ways to get there. DId you use react-cli to create your initial project or npm init and then add the packages or create everything by hand or some other route?
You started with step 2 -- install mocha etc.
I agree..this happens alot on Egghead.
Such a simple thing to include too...just put some written directions in the notes if you dont have it in the recording. Its a waste of time and effort to look around for how to start to get on track with the tutorial...
figure I'll post the question here.. I am running an exceedingly simple test, and it is failing here:
renderer.render(<Product />); ^
with this error:
/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.