Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jest-wdc-19

 jest-wdc-19

Gregor Woiwode

October 15, 2019
Tweet

More Decks by Gregor Woiwode

Other Decks in Programming

Transcript

  1. Background START - maintains Jest - Jasmine is used under

    the hood - Git is used to improve test runs - Open Source
  2. Configuration START module.exports = { verbose: true, testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'], transform:

    { '^.+\\.(ts|js|html)$': 'ts-jest', }, testEnvironment: 'jest-environment-jsdom-fourteen', moduleFileExtensions: ['ts', 'js', 'html'], coverageReporters: ['html'], };
  3. Jest builder for Angular START angular.json "test": { + "builder":

    "@angular-builders/jest:run", - "builder": "@angular-devkit/build-angular:karma", "options": { "configPath": "src/jest.config.js" } }
  4. 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}.` ); });
  5. 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}.` ); });
  6. 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}.` ); });
  7. it.each using a tagged template 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); } );
  8. 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
  9. 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
  10. 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
  11. … 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
  12. 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
  13. medium.com/@gregor.woiwode @GregOnNet co-IT.eu GmbH Inspire to change Thank you for

    listening. http://speakerdeck.com/gregonnet/jest-wdc-19
  14. Images & Icons CREDITS - , , made by Freepik

    from flaticon.com - Photos by - Jakob Owens - Andreas Wagner - Shiro hatori - Josue Valencia - Jonathan Chng - Ivars Krutainis - on Unsplash