Jest, the boost for the Angular Testing Platform

As long as your tests are green, everything is fine, right? The inconveniences will always come up when a test is red.
Which tests are affected? Why is the test failing now?

Often, this research involves reading obscure console editions that take up your time and nerves.
Most of the time you can wait a while until all your tests have gone through to know if the alleged fix really solves the problem.

Jest replaces long waiting times with instant feedback. Instead of cryptic error logs, you will receive targeted information to help you solve the problem.

This talk demonstrates how to install & use Jest in your Angular project. You will be introduced to the integrated mocking framework and snapshot testing in detail.
Then you know the benefits that Jest offers. In addition, you have a blueprint to start immediately with Jest.

https://medium.com/@gregor.woiwode
https://twitter.com/GregOnNet

Transcript

1. co-IT.eu GmbH Inspire To Change www.co-IT.eu Gregor Woiwode @GregOnNet Jest For Angular
2. Demo GITHUB https://github.com/GregOnNet/jest-playground
3. START
4. Why am I testing?
5. Background START - maintains Jest - Jasmine is used under the hood - Git is used to improve test runs - Open Source
6. JSDOM START
7. PARALLEL TEST EXECUTION
8. Configuration START OR PAC KAGE .JSON JE ST.C ON F IG .JS
9. Preset for Angular START https://github.com/thymikee/jest-preset-angular
10. Preset for Angular START jest.config.js Jest Preset for Angular TS Jest J E S T . C O N F I G . J S
11. JEST CLI
12. Improving Development Experience CLI
13. Haste Map CLI Failed > Duration > Size Tests
14. Watch mode CLI jest --wach
15. RIGHT EXPECTATIONS
16. any(constructor) RIGHT EXPECTATIONS expect.any(constructor); Assert a certain type of the given property.
17. anything() RIGHT EXPECTATIONS expect.anything(); Assert that anything is defined.
18. arrayContaining([]) RIGHT EXPECTATIONS Check subset of the given collection. [ // … { ??? }, { ??? } //… ]
19. objectContaining({}) RIGHT EXPECTATIONS Check subset of the given object. { // … a: ???, b: ??? //… }
20. REPITITION DONE RIGHT
21. it.each REPITITION DONE RIGHT it.each([['.huskyrc.json'], ['.huskyrc.js']])( ' should warn if detected in %s', (file: string) => { project.create(file, JSON.stringify({})); runner.runSchematic('prettier', {}, project); expect(warn).toHaveBeenCalledWith( `Found competing husky configuration in ${file}.` ); });
22. it.each REPITITION DONE RIGHT it.each([['.huskyrc.json'], ['.huskyrc.js']])( ' should warn if detected in %s', (file: string) => { project.create(file, JSON.stringify({})); runner.runSchematic('prettier', {}, project); expect(warn).toHaveBeenCalledWith( `Found competing husky configuration in ${file}.` ); });
23. it.each REPITITION DONE RIGHT it.each([['.huskyrc.json'], ['.huskyrc.js']])( ' should warn if detected in %s', (file: string) => { project.create(file, JSON.stringify({})); runner.runSchematic('prettier', {}, project); expect(warn).toHaveBeenCalledWith( `Found competing husky configuration in ${file}.` ); });
24. it.each`` REPITITION DONE RIGHT it.each` compilerOption | expected ${'strict‘} | ${true} ${'noUnusedParameters'} | ${true} ${'noUnusedLocals‘} | ${true} ${'noImplicitAny‘} | ${true} ` ( 'should set $compilerOption to default value of schema ($expected)‘, ({ compilerOption, expected }) => { // ... expect(tsconfig.compilerOptions[option]).toBe(expected); } );
25. it.each`` it.each` compilerOption | expected ${'strict‘} | ${true} ${'noUnusedParameters'} | ${true} ${'noUnusedLocals‘} | ${true} ${'noImplicitAny‘} | ${true} ` ( 'should set $compilerOption to default value of schema ($expected)‘, ({ compilerOption, expected }) => { // ... expect(tsconfig.compilerOptions[option]).toBe(expected); } ); REPITITION DONE RIGHT
26. SNAPSHOT TESTING
27. Process SNAPSHOT TESTING Generation Maintenance Create Check Update
28. Anathomy SNAPSHOT TESTING exports[`<app-root> When the application starts displays the welcome message 1`] = ` <p> Welcome to the playground, you will find all testing samples in <code>*.spec.ts</code> files. </p> `; __snapshots__/*.spec.ts.snap
29. Anathomy SNAPSHOT TESTING exports[`<app-root> When the application starts displays the welcome message 1`] = ` <p> Welcome to the playground, you will find all testing samples in <code>*.spec.ts</code> files. </p> `; __snapshots__/*.spec.ts.snap
31. @co-it/schematics
32. @co-it/schematics:jest AUTOMATE EVERYTHING ng generate @co-it/schematics:jest --hook
33. … really everything AUTOMATE EVERYTHING ng generate @co-it/schematics:jest ng generate @co-it/schematics:commitlint ng generate @co-it/schematics:cypress ng generate @co-it/schematics:tsconfig ng generate @co-it/schematics:prettier
34. Summary JEST it.each simplify generation of test cases jest.fn is used for mocking depencencies expect.??? contains usefule additions @co-IT/schematics configure Jest automatically
35. co-IT.eu GmbH Inspire To Change @GregOnNet Thank you for listening @co-it/schematics https://github.com/GregOnNet/jest-playground
36. Images & Icons CREDITS - , , made by Freepik from flaticon.com - Photos by - Jakob Owens - Andreas Wagner - Shiro hatori - Josue Valencia - Jonathan Chng - on Unsplash