Project Setup

Preface

This tutorial runs you through the steps required to set up your project.

Create Project

We will create a new project first. Fire up a command shell (bash on Linux or Git Bash on Windows) and then run the following commands.

tip

In our examples we will be using bash on both Linux and MacOS and Git Bash on Windows.

If you are using a different shell, you might have to adjust the provided scripts so that they will work in your environment.

• Linux
• MacOS
• Windows

mkdir my-package
cd my-package

Initialize Project

Now, we will initialize our project. Just follow the instructions when running the below commands.

info

The command will create a package.json file based on the provided information.

• npm
• yarn

npm init

OUTPUT

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (my-package)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to [.../]my-package/package.json:

{
  "name": "my-package",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes)

Initialize Git Repository

git init

Install Development Dependencies

Having initialized the project, we will install the dependencies used during development.

Install TypeScript

First, we will install TypeScript as a development dependency.

Important

Even if you installed TypeScript globally as part of the optional prerequisites, you still have to install it as a development dependency. Otherwise, the package scripts we will add to package.json will not work on other systems.

tip

We are using typescript@latest in our examples. You might want a different version instead.

• npm
• yarn

npm install --save-dev typescript@latest

Install reflect-metadata

tip

We are using reflect-metadata@latest in our examples. You might want a different version instead.

• npm
• yarn

npm install --save-dev reflect-metadata@latest

Install Testdeck and Test Framework

Next, we will install Testdeck and the required test framework dependencies.

• Mocha
• Jest
• Vitest
• Jasmine

tip

We are using mocha@latest in our examples. You might want a different version instead.

tip

We are using @types/mocha@latest in our examples. You might want a different version instead.

• npm
• yarn

npm install --save-dev @testdeck/mocha@0.3
npm install --save-dev @types/mocha@latest
npm install --save-dev mocha@latest

Install ESLint (optional)

tip

We are using eslint@latest in our examples. You might want a different version instead.

tip

We are using typescript-eslint@latest in our examples. You might want a different version instead.

• npm
• yarn

npm install --save-dev eslint@latest
npm install --save-dev typescript-eslint@latest

Install NYC (optional)

info

Both jest and vitest already include support for code coverage.

tip

We are using nyc@latest in our examples. You might want a different version instead.

tip

We are using @istanbuljs/nyc-config-typescript@latest in our examples. You might want a different version instead.

tip

We are using requirejs@latest in our examples. You might want a different version instead.

• Mocha
• Jasmine

• npm
• yarn

npm install --save-dev requirejs@latest
npm install --save-dev nyc@latest
npm install --save-dev @istanbuljs/nyc-config-typescript@latest

Configure Dependencies

Configure Typescript

First, we will create a basic TypeScript configuration file.

info

For Testdeck, we have to enable the experimentalDecorators feature, which is still experimental. In addition, we will also enable the emitDecoratorMetadata feature required by reflect-metadata, which we already installed.

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": [ "es6" ],
    "noImplicitAny": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Configure Test Framework

• Mocha
• Jest
• Vitest
• Jasmine

TODO .mocharc.json

Package Scripts

package.json

"scripts": {
  "test": "mocha ..."
}

Configure ESLint (optional)

• Mocha
• Jest
• Vitest
• Jasmine

TODO .eslintignore

TODO .eslintrc.js

Package Scripts

• npm
• yarn

package.json

"scripts": {
  "prebuild": "npm run lint",
  "lint": "eslint ...",
  "lint-fix": "eslint --fix ..."
}

Configure NYC (optional)

• Mocha
• Jest
• Vitest
• Jasmine

TODO .nycrc

Configure Package Scripts

Basic Setup

• npm
• yarn

package.json

"scripts": {
  "build": "tsc",
  "clean": "npx rimraf dist",
  "pretest": "npm run clean && npm run build"
}

Integrate Test Framework

Integrate ESLint (optional)

Integrate NYC (optional)

Summary

todo

achievements