Description
While developing a typescript (TS) application, unit testing is needed. Also, unit tests are written in TS.
Jasmine is the test framework used to test TS code.
When TS applications depend on browser context and use global DOM objects like window or location then unit tests are executed in the browser with jasmine for browsers.
All files with unit tests are in spec
folder, with *.spec.ts
extension.
The structure of spec
folder should be similar to the structure of src
folder (where is code).
Jasmin for browsers configuration is in spec\support\jasmine-browser.json
.
ES module is natively supported by the browser, so our unit test files should be transpiled from TS to JS as ES module with *.mjs extension.
Spec folder should have additional tsconfig.json configururation for esnext modules nad tsc -w
will transpile from TS to JS with js extension.
Node script can change exntesion from js to mjs.
Unit tests are executed with npm test
.
Pre req
- .gitignore, git init; git add .; git commit
npm init
npm install --save-dev typescript
npx tsc --init
- tsconfig.json
{"compilerOptions":
{"target": "esnext",
"module": "esnext",
"lib": ["es2016","dom"],
"allowJs": true,
"sourceMap": true,
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
}
}
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev ts-loader
- webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.ts',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
include: [
path.resolve(__dirname, "src")
],
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
- add script to package.json
"build": "npx webpack --config=webpack.config.js"
npm run build
tsconfig.js for spec folder
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext"
},
"include": [
"./spec/**/*.ts"
]
}
Jasmine for browsers
npm install --save-dev jasmine-browser-runner jasmine-core @types/jasmine
- jasmine-browser.json
{
"srcDir": "src",
"srcFiles": [
],
"specDir": ".",
"specFiles": [
"spec/**/*.[sS]pec.?(m)js"
],
"helpers": [
"spec/helpers/**/*.?(m)js"
],
"env": {
"stopSpecOnExpectationFailure": false,
"stopOnSpecFailure": false,
"random": false
},
"browser": {
"name": "firefox"
}
- add script to package.json
"test": "jasmine-browser-runner runSpecs"
npm test
package.json scripts
"scripts": {
"test": "jasmine-browser-runner runSpecs",
"test:watch": "concurrently -k \"tsc -w\" \"npm run js2mjs:watch\" \"jasmine-browser-runner\"",
"test:browse": "open-cli http://localhost:8888 --wait -- chrome",
"js2mjs:watch": "nodemon -e js --watch spec --exec \"npm run js2mjs:run\"",
"js2mjs:run": "renamer --force --find /\\.js$/ --replace .mjs --path-element ext \"spec/!(support)**/*.*\""
}
More info
https://jasmine.github.io/pages/getting_started.html