Testing React Applications
- 2. ES6 = ES2015
- 3. Agenda 1. Static code analysis 2. Jest
- 4. Simon Bächler Web developer at Feinheit
- 5. Testing What tool do you use to test your JavaScript?
- 7. Static code analysis Style checking and linting Pluggable linting rules Supports ES2015 Supports JSX Autofix option ESLint
- 8. var foo = bar;
- 10. eslint —init
- 11. Test Framework Built on top of Jasmine Developed by Facebook Supports React out of the box Mock by default fake DOM
- 12. 0.12 No support for Node.js 0.12 Jest >= 0.5.2 supports Node 4
- 13. Behavior driven jest.dontMock(‚../sum'); describe('sum', function() { it('adds 1 + 2 to equal 3', function() { var sum = require(‚../sum'); expect(sum(1, 2)).toBe(3); }); });
- 14. Component under test Mock object JSON fixture State Dependency
- 16. Let’s look at some code
- 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.
- 20. –Jacob Kaplan-Moss „Code without tests is broken by design.“
- 21. END OF PART I
Editor's Notes
- #3: ECMA Script 6 is now called ECMA Script 2015
- #4: This talk has two parts Part 2 is much shorter.
- #5: This is an actual portrait of me, drawn by the very talented Tika.
- #6: Recent survey (August/September 2015)
- #7: 60% don't use a test framework. 1% uses Jest (8% use React, so only ⅛ of all React users uses Jest).
- #8: 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.
- #9: 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.
- #10: Jetbrains IDE support ESLint (and the other linters). There is also a plugin for SublimeLinter
- #11: Runs an assistant that creates your configuration.
- #12: Jest is the framework of choice for React unit- and functional tests. Mocha is possible, but more difficult to set up.
- #13: 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.
- #14: 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.
- #15: 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.
- #16: 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.
- #17: http://chler.com/cafe/ https://github.com/sbaechler/cafe-international/blob/master/Content/__tests__/beverage-test.js
- #18: 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.
- #19: With a spy it is possible to check if a method on a concrete object has been called and what the parameters were.
- #20: Jest is well suited for unit and functional tests.
- #21: Quote: Co-Creator of Django, Director of Security at Heroku.