Unit testing helps improving the quality of your code and greatly simplifies dealing with complex code. The testing framework of choice for React.js is Jest.
17. Jest runs in Node.js
• No window object, no LocalStorage
• No debugging (there is a workaround)
• 'npm test'
• node-debug --nodejs --harmony
node_modules/.bin/jest --runInBand
18. More Jest functionality
• Test asynchronous calls
• Spy on non-mocked objects and methods
• Timer mocks
• Regex matcher
• Partial matchers
• Setup and teardown methods
19. System Tests
Selenium Web Driver
Remote control a Browser
Supports Chrome, Firefox, IE,
Edge and PhantomJS
Also iOs and Android (with
Appium)
But this is another talk.
This is an actual portrait of me, drawn by the very talented Tika.
Recent survey (August/September 2015)
60% don't use a test framework.
1% uses Jest (8% use React, so only ⅛ of all React users uses Jest).
Like jslint / jshint but uses a plugin architecture.
Checks for implicitly declared global variables or missing semicolons but also code style.
If you don't have it installed, do it tonight.
Can be added to the build process or as webpack-loader.
Most editors or IDEs have a plugin for live code checking.
Feinheit has a git pre-commit hook that runs it.
Has an autofixing options.
Used by Node and Webkit to validate their Javascript.
Lint example: A file like this produces a linting result like that.
The numbers are the line and colon numbers of the error.
Error code is 1, so a build process stops if there is an error.
Jetbrains IDE support ESLint (and the other linters).
There is also a plugin for SublimeLinter
Runs an assistant that creates your configuration.
Jest is the framework of choice for React unit- and functional tests.
Mocha is possible, but more difficult to set up.
Node 0.10 is ok.
io.js or Node.js 4.0 + are ok, too.
Several generators have Jest 0.4 in their package.json which fails to install on Node V4.
More like natural language than JUnit syntax.
Similar to what Angular.js uses.
describe part: like a JUnit test class
it part: like a JUnit test method
expect function: like the JUnit assertEqual() method.
Everything is a function.
Path resolve: does not resolve jsx files. Those need to be explicit.
Test components as independent entities.
This is a big advantage of using components.
Inject all required properties from outside. Do not create props from within the module, such as reading a value from a DOM element. This creates a dependency on the DOM and possibly jQuery.
Explicitly don't mock the component under test, React and Underscore.js.
Jest calls the method doSomething with the argument bar.
We want to test if it calls the method foo on the dependency.
The component is supposed to call the method 'foo' with argument 'bar' on the dependency.
In Jest you can test if the method has been called with the correct arguments.
The return value of the mocked function can be specified of course.
You can access rendered DOM nodes for the React components.
Pass a reference to LocalStorage to your component. Don’t access it directly.
https://github.com/facebook/jest/issues/152
node-debug opens a developer-tools window and connects to the node process.
Tests with debugging are slower because they cannot run in parallel.
With a spy it is possible to check if a method on a concrete object has been called and what the parameters were.
Jest is well suited for unit and functional tests.
Quote: Co-Creator of Django, Director of Security at Heroku.