Topaz TeeNotesProjectsTwitterGitHub

Setup jest and write a test in ten minutes or less

08 March, 2020

Setup unit testing for TypeScript with Jest

  npm i -D jest typescript ts-jest @types/jest serve onchange @types/node @types/jest source-map-support @types/source-map-support

The official docs: https://jestjs.io/docs/en/getting-started

To get info about your install run: npx envinfo --preset jest

add config file jest.config.js

module.exports = {
  preset: 'ts-jest',
  // The test environment that will be used for testing
  testEnvironment: "node",
  roots: [
      "<rootDir>"
    ],
    "modulePaths": [
      "<rootDir>",
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    testMatch: [
      "**/__tests__/**/*.+(ts|tsx|js)",
      "**/__tests__/**/?(*.)+(spec|test).+(ts|tsx|js)",
      "**/?(*.)+(spec|test).+(ts|tsx|js)"
    ],
    transform: {
      "^.+\\.(ts|tsx)$": "ts-jest",
      "^.+\\.(js|jsx|ts)$": "babel-jest"
    },
    coverageReporters: ['json', 'lcov', 'text', 'clover']

common errors

No tests found, exiting with code 1 the roots is where the test files are located. If you get this error then change roots to jest knows where your test files are. For example, Its common to have a directory tests with all your tests and for your code to be in a src directory so your config would look like this:

{
       roots: ["<rootDir>/src/", "<rootDir>/__tests__/"],
}

In you package.json add a test command so you can run your tests with npm run test

"scripts": {
    "test": "jest --coverage",
    "test:watch": "jest --coverage --watchAll",
    "view:coverage": "serve coverage/lcov-report",
    "clean": "rm -rf coverage /**/*.js src/**/*.map",
    "tsc": "tsc",
    "build:watch": "onchange '**/*.ts' -- npm run tsc"
},

my tsconfig.js file looks like this

{
     "compilerOptions": {
       "outDir": "./dist/",
       "sourceMap": true, // To generate source maps during compilation
       "noImplicitAny": false,
       "module": "commonjs",
       "target": "es6",
       "jsx": "react",
       "skipLibCheck": true
     }
   }

tests if this exists with a 0 then all is well.

and finally create your first test mytest.test.ts

  expect(1+1).toBe(1);
});

You might find it helpful to have open threes console windows with each running:

  • npm run test:watch This automatically runs all the tests on every file save. Very important to re-test your application on every change, especially with TypeScript, as the purpose of following types through a large application is what TS is good at.
  • npm run build:watch Have tsc running after every save as well. Used for a CICD set to transpile the TS to JS. This is configured by the tsconfig.json file.
  • npm run start This starts the app. Since we added a module called source-map-support, our error messages will reflect our TS line of code.