{"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":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t