Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Testing React Applications

813 views

Published on

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.

Published in: Internet
  • Login to see the comments

Testing React Applications

  1. 1. React Testing
  2. 2. ES6 = ES2015
  3. 3. Agenda 1. Static code analysis 2. Jest
  4. 4. Simon Bächler Web developer at Feinheit
  5. 5. Testing What tool do you use to test your JavaScript?
  6. 6. http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
  7. 7. Static code analysis Style checking and linting Pluggable linting rules Supports ES2015 Supports JSX Autofix option ESLint
  8. 8. var foo = bar;
  9. 9. eslint —init
  10. 10. Test Framework Built on top of Jasmine Developed by Facebook Supports React out of the box Mock by default fake DOM
  11. 11. 0.12 No support for Node.js 0.12 Jest >= 0.5.2 supports Node 4
  12. 12. 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); }); });
  13. 13. Component under test Mock object JSON fixture State Dependency
  14. 14. Mocks Dependency (Default Mock) dependency.foo(bar) undefined Component under test Jest expect(dependency.foo) .toBeCalled() expect(dependency.foo) .lastCalledWith(bar) expect(dependency.foo) .not.toBeCalledWith(baz) doSomething(bar)
  15. 15. Let’s look at some code
  16. 16. 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
  17. 17. More Jest functionality • Test asynchronous calls • Spy on non-mocked objects and methods • Timer mocks • Regex matcher • Partial matchers • Setup and teardown methods
  18. 18. 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.
  19. 19. –Jacob Kaplan-Moss „Code without tests is broken by design.“
  20. 20. END OF PART I

×