Using TypeScript with Jest

Installing and configuring TypeScript

The starter project for this lesson contains source code and tests written in TypeScript in the src folder. We’ll recognize the validEmailDomain function from previous lessons.

TypeScript can be installed by running the following in a terminal:

npm install --save-dev typescript

TypeScript is configured by a file called tsconfig.json. Create this file in the root of the project with the following content:

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

TypeScript will be used in this project for type checking and not transpilation. We will use Babel for transpilation.

Here’s an explanation of the settings we have used in tsconfig.config:

• lib: The standard typing included in the type checking process. For our purposes, we’re using types for the browser’s DOM and the latest version of ECMAScript.

• allowJs: Allows JavaScript files to be compiled.

• allowSyntheticDefaultImports: Allows default imports from modules with no default export in the type checking process.

• skipLibCheck: Determines whether to skip the type checking of the type declaration files (*.d.ts).

• esModuleInterop: Enables compatibility with Babel.

• strict: Sets the type checking to a high level. When the level is true, the project runs in strict mode.

• forceConsistentCasingInFileNames: Ensures that the casing of referenced file names is consistent during the type checking process.

• moduleResolution: Controls how module dependencies get resolved. Our project uses “node.”

• resolveJsonModule: Allows modules to be contained in .json files, which are useful for configuration files.

• noEmit: Determines whether to suppress TypeScript generating code during the compilation process. This is true in our project because Babel will be generating the JavaScript code.

• jsx: Determines whether to support JSX in .tsx files.

• include: The files and folders checked by TypeScript. In our project, we have specified all the files in the src folder.

Configuring Babel

Babel is already installed and configured to transpile JavaScript. To get Babel to transpile TypeScript, we need to install a preset and tell Babel to use this preset.

Run the following command in a terminal:

npm install --save-dev @babel/preset-typescript

We can now update the Babel configuration file to use this preset. Add the following preset to babel.config.js:

module.exports = {
  presets: [
    ...,
    "@babel/preset-typescript",
  ],
};

Running tests

Jest is now capable of running tests on TypeScript code. Run the following command in a terminal:

npm test

Note that all the tests pass successfully: