Testing Angular Applications with Jest

This is a short introduction on how to setup Jest for an Angular project. The practical examples can be found in this repository: https://github.com/4kochi/angular-jest

Transcript

1. Testing Angular with Jest 02 / 2019
2. Andreas Krummsdorf ❖ Lead Frontend Developer @ dokSAFE GmbH ❖ https://twitter.com/4lixi ❖ https://github.com/4kochi
3. Types of Tests ? Jest Protractor Karma Cypress Selenium
4. Why Jest ? ❖ All inclusive Testing Framework (runner, assertion, mocking, code-coverage, snapshots) ❖ Fast (jsdom + Cache + parallelization) ❖ Minimal config ❖ Readable error and exception log ❖ Support for many frontend frameworks ❖ Up to date documentation ❖ IDE support (Webstorm + VS Code)
5. Syntax ❖ Looks similar to Jasmine ❖ beforeEach / beforeAll | afterEach / afterAll ❖ describe, it, test ❖ expect ❖ toBe, toBeDefined, toEqual, toContain, not ❖ spyOn, toHaveBeenCalled, toHaveBeenCalledWith
6. Mocking ❖ use mock function jest.fn() ❖ spies on the function calls and allows to return mocked values
7. Snapshot Testing ❖ Allows to easily compare serializable values ❖ Generates snapshot files ❖ On subsequent test runs the result is compared to the snapshot ❖ Snapshots are committed ❖ Also inline snapshots are possible
8. Snapshot Testing
9. Finally some code
10. Add Jest to your Angular app ❖ Manually (https://github.com/thymikee/jest-preset- angular) ❖ schematic (https://github.com/briebug/jest-schematic)
11. Demo Application ❖ https://github.com/4kochi/angular-jest ❖ 3 braches which show the progress ❖ start / master -> Angular Todo App with karma ❖ add_jest -> Add jest to project and make the tests running ❖ rewrite_tests -> Rewrite the tests in jest style
12. Bonus: Nrwl Nx ❖ https://nrwl.io/nx ❖ „Extension for the Angular CLI implementing the monorepo-style development“ ❖ Includes schematics for jest / cypress out of the box ❖ Can lint / test / build only the parts of the app that has been changed
13. Bonus: Angular Console ❖ https://angularconsole.com ❖ UI to use the Angular CLI / Nrwl nx workspace ❖ Vs Code Plugin available
14. The end…