{"id":2160,"date":"2024-09-10T18:00:37","date_gmt":"2024-09-11T01:00:37","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2160"},"modified":"2024-09-13T10:31:52","modified_gmt":"2024-09-13T17:31:52","slug":"how-to-use-jest-for-angular-unit-tests","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-use-jest-for-angular-unit-tests\/","title":{"rendered":"How to use Jest for Angular Unit Tests?"},"content":{"rendered":"\n

Karma is deprecated<\/a>, and the Angular team is working on official support for Jest<\/a> and Web Test Runner<\/a>. Today, I want to highlight how to set up your Angular project for Jest since it’s prevalent in the Javascript ecosystem (React, etc.). It’s super fast and 100% browserless, making running tests on a continuous integration server easy. <\/p>\n\n\n\n

Also, the syntax is essentially the same as Jasmine\/Karma, so you won’t have to change your tests much unless you do extensive mocking in Jasmine.<\/p>\n\n\n\n

Here are the steps I’ve used on over 28 repositories so far, with great success:<\/p>\n\n\n\n

    \n
  1. Uninstall Jasmine, Karma, and all associated types<\/strong>
    npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter @types\/jasmine jasmine-core<\/code>

    <\/li>\n\n\n\n
  2. Install Jest, its types, and presets for Angular<\/strong>
    npm i --save-dev jest @types\/jest jest-preset-angular<\/code>

    <\/li>\n\n\n\n
  3. Create a setup-jest.ts<\/code> file in your project’s root folder<\/strong>
    And add that single line of code in it:
    import 'jest-preset-angular\/setup-jest';<\/code>

    <\/li>\n\n\n\n
  4. Create a jest.config.ts<\/code> file in your project’s root folder<\/strong> with the following command<\/strong>
    npx jest \u2014 init<\/code>

    Then ensure you have the following config options set in that file:
    preset: 'jest-preset-angular',
    setupFilesAfterEnv: ['.\/setup-jest.ts']<\/code>

    <\/li>\n\n\n\n
  5. Update your tsconfig.spec.json<\/code> file<\/strong>

    Your compilerOptions<\/code> should look like this:
    \"compilerOptions\": {
    \"outDir\": \".\/out-tsc\/spec\",
    \"types\": [ \"jest\" ],
    \"esModuleInterop\": true,
    \"emitDecoratorMetadata\": true
    },<\/code>

    <\/li>\n\n\n\n
  6. Last step: Update package.json<\/code><\/strong>
    In the scripts section, replace the test<\/code> entry with:
    \"test\": \"jest\",<\/code>
    <\/li>\n<\/ol>\n\n\n\n

    And… that’s it! You can now launch npm run test<\/code> to run your tests with Jest. Sure, a schematic would be better, but those steps take only 2-3 minutes to implement for now.<\/p>\n\n\n\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    Karma is deprecated, and the Angular team is working on official support for Jest and Web Test Runner. Today, I want to highlight how to set up your Angular project for Jest since it’s prevalent in the Javascript ecosystem (React, etc.). It’s super fast and 100% browserless, making running tests on a continuous integration server […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,19,17],"tags":[],"class_list":["post-2160","post","type-post","status-publish","format-standard","hentry","category-angular","category-testing","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2160"}],"version-history":[{"count":8,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2160\/revisions"}],"predecessor-version":[{"id":2169,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2160\/revisions\/2169"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}