Recipes for configuring
karma-typescript
To get code coverage for both plain JavaScript modules and Typescript modules in a hybrid application, simply use allowJs
in the Typescript compiler options and then pipe all .js
and .ts
files through karma-typescript
:
module.exports = function(config) { config.set({ frameworks: ["jasmine", "karma-typescript"], files: [ { pattern: "src/**/*.+(js|ts)" }, ], preprocessors: { "src/**/*.+(js|ts)": ["karma-typescript"], }, reporters: ["progress", "karma-typescript"], karmaTypescriptConfig: { compilerOptions: { allowJs: true, }, }, browsers: ["Chrome"] }); };
There are two ways to configure karma-typescript
when you keep the application code and its unit tests in separate directories and you don't want the tests to get included in the coverage report.
The setting karmaTypescriptConfig.coverageOptions.exclude
, which is a RegExp
object (or an array of RegExp
objects) for filtering which files get excluded from coverage instrumentation.
You can tell karma-typescript
not to instrument all code for coverage automatically by adding karma-coverage
to the preprocessors
array; if the presence of karma-coverage
is detected no code will be instrumented for coverage automatically by karma-typescript
, giving you full control over which files should get instrumented:
module.exports = function(config) { config.set({ frameworks: ["jasmine", "karma-typescript"], files: [ { pattern: "src/**/*.ts" }, { pattern: "test/**/*.ts" } ], preprocessors: { "src/**/*.ts": ["karma-typescript", "coverage"], "test/**/*.ts": ["karma-typescript"] }, reporters: ["progress", "coverage", "karma-typescript"], browsers: ["Chrome"] }); };
Modules written in ES6 syntax can't be run in a web browser directly (yet) and need to be compiled to ES5 syntax first. To do this automatically on each test run, you can use the bundler plugin karma-typescript-es6-transform:
First, install the ES6 transforms plugin as a dev dependency:
npm install --save-dev karma-typescript-es6-transform
And then in the Karma configuration, configure the bundler to use the plugin:
karmaTypescriptConfig: { bundlerOptions: { transforms: [require("karma-typescript-es6-transform")()] } }
In this recipe we set up karma-typescript
to run the PostCSS autoprefixer
plugin on all .css
files with the PostCSS runner karma-typescript-postcss-transform.
First, install the PostCSS transforms plugin and the autoprefixer
package as dev dependencies:
npm install --save-dev karma-typescript-postcss-transform autoprefixer
And then in the Karma configuration, configure the bundler to use the runner with a plugin and custom options:
karmaTypescriptConfig: { bundlerOptions: { transforms: [ require("karma-typescript-postcss-transform")( [require("autoprefixer")], { map: { inline: true } }, /\.css$/ ) ] } }
When using (for instance) React CSS Modules, style sheets must be loaded as JSON objects by the bundler. This can be achieved by using the CSS Modules transforms plugin karma-typescript-cssmodules-transform, which will transform style sheets to JSON on the fly each test run.
First, install the CSS Modules transforms plugin as a dev dependency:
npm install --save-dev karma-typescript-cssmodules-transform
And then in the Karma configuration, configure the bundler to use the transform with custom options:
karmaTypescriptConfig: { bundlerOptions: { transforms: [ require("karma-typescript-cssmodules-transform")({}, {}, /\.css$/), ] } }
karmaTypescriptConfig: { bundlerOptions: { constants: { __PRODUCTION__: false } } }