Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@storybook/addon-coverage

Package Overview
Dependencies
Maintainers
31
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-coverage - npm Package Compare versions

Comparing version 0.1.0-canary.27.e56d027.0 to 1.0.0-canary.27.12a4851.0

dist/cjs/loader/webpack5-istanbul-loader.js

11

dist/cjs/constants.js

@@ -6,14 +6,9 @@ "use strict";

});
exports.defaultExcludeRegexes = exports.defaultExclude = exports.defaultExtensions = void 0;
exports.defaultExclude = exports.defaultExtensions = void 0;
const defaultExtensions = [".js", ".cjs", ".mjs", ".ts", ".tsx", ".jsx", ".vue", ".svelte"];
exports.defaultExtensions = defaultExtensions;
const testFileExtensions = defaultExtensions.map(extension => extension.slice(1)).join(",");
const defaultExclude = [".storybook/**", "coverage/**", "packages/*/test{,s}/**", "**/*.d.ts", "test{,s}/**", `test{,-*}.{${testFileExtensions}}`, `**/*{.,-}{spec,stories,types}.{${testFileExtensions}}`, "**/__tests__/**", "**/*-entry.js",
const defaultExclude = ["**/node_modules/**", ".storybook/**", "coverage/**", "packages/*/test{,s}/**", "**/*.d.ts", "test{,s}/**", `test{,-*}.{${testFileExtensions}}`, `**/*{.,-}{spec,stories,types}.{${testFileExtensions}}`, "**/__tests__/**", "**/*-entry.js",
/* Exclude common development tool configuration files */
"**/{ava,babel,nyc}.config.{js,cjs,mjs}", "**/jest.config.{js,cjs,mjs,ts}", "**/{karma,rollup,webpack}.config.js", "**/.{eslint,mocha}rc.{js,cjs}"];
exports.defaultExclude = defaultExclude;
const defaultExcludeRegexes = ["node_modules", "\\.storybook/.*", "coverage/.*", "packages/[^/]+/test(s?)/.*", ".*\\.d\\.ts$", "test(s?)/.*", `test(-[^.]+)?\\.(${testFileExtensions})$`, `.*(-|\\.)((spec|stories|types)\\.(${testFileExtensions}))$`, "__tests__/.*", ".*-entry\\.js",
/* Exclude common development tool configuration files */
`.*\\/(ava|babel|nyc)\\.config\\.(js|cjs|mjs)$`, `.*\\/jest\\.config\\.(js|cjs|mjs|ts)$`, `.*\\/(karma|rollup|webpack)\\.config\\.js$`, `.*\\/.(eslint|mocha)rc\\.(js|cjs)$`, // angular
"\.(e2e|spec|stories)\.ts$", "(ngfactory|ngstyle)\.js", "polyfills.ts"].map(pattern => new RegExp(pattern));
exports.defaultExcludeRegexes = defaultExcludeRegexes;
exports.defaultExclude = defaultExclude;

@@ -6,6 +6,12 @@ "use strict";

});
exports.webpackFinal = exports.swc = exports.babel = exports.viteFinal = void 0;
exports.webpackFinal = exports.viteFinal = void 0;
var _constants = require("./constants");
var _webpack5Exclude = require("./webpack5-exclude");
var _nycConfig = require("./nyc-config");
var _istanbulLibInstrument = require("istanbul-lib-instrument");
const viteFinal = async (viteConfig, options) => {

@@ -31,59 +37,28 @@ var _options$istanbul, _options$istanbul2, _options$istanbul3;

exports.viteFinal = viteFinal;
const babel = async (babelConfig, options) => {
var _options$istanbul4, _options$istanbul5, _options$istanbul6;
console.log("[addon-coverage] Adding istanbul plugin to Babel config");
babelConfig.plugins || (babelConfig.plugins = []);
babelConfig.plugins.push(["istanbul", { ...options.istanbul,
include: Array.from(((_options$istanbul4 = options.istanbul) === null || _options$istanbul4 === void 0 ? void 0 : _options$istanbul4.include) || []),
exclude: [options.configDir + "/**", ..._constants.defaultExclude, ...Array.from(((_options$istanbul5 = options.istanbul) === null || _options$istanbul5 === void 0 ? void 0 : _options$istanbul5.exclude) || [])],
extension: ((_options$istanbul6 = options.istanbul) === null || _options$istanbul6 === void 0 ? void 0 : _options$istanbul6.extension) || _constants.defaultExtensions,
coverageVariable: "__coverage__"
}]);
return babelConfig;
const defaultOptions = {
preserveComments: true,
produceSourceMap: true,
autoWrap: true,
esModules: true,
compact: false
};
exports.babel = babel;
const swc = async (swcConfig, options) => {
swcConfig.parseMap = true;
return swcConfig;
};
exports.swc = swc;
const webpackFinal = async (webpackConfig, options) => {
var _webpackConfig$module, _options$istanbul7;
var _webpackConfig$module, _options$istanbul4;
if (options.useWebpackConfig !== true) return webpackConfig;
(_webpackConfig$module = webpackConfig.module).rules || (_webpackConfig$module.rules = []);
const extensions = ((_options$istanbul7 = options.istanbul) === null || _options$istanbul7 === void 0 ? void 0 : _options$istanbul7.extension) || /\.(mjs|cjs|tsx?|jsx?)$/;
const nycConfig = await (0, _nycConfig.getNycConfig)(options.istanbul);
const extensions = ((_options$istanbul4 = options.istanbul) === null || _options$istanbul4 === void 0 ? void 0 : _options$istanbul4.extension) ?? nycConfig.extension ?? _constants.defaultExtensions;
console.log("[addon-coverage] Adding istanbul loader to Webpack config");
webpackConfig.module.rules.push({
test: extensions,
loader: "@jsdevtools/coverage-istanbul-loader",
const testExclude = await (0, _webpack5Exclude.createTestExclude)(options.istanbul);
let instrumenterOptions = Object.assign(defaultOptions, options.istanbul);
let instrumenter = (0, _istanbulLibInstrument.createInstrumenter)(instrumenterOptions);
webpackConfig.module.rules.unshift({
test: new RegExp(extensions === null || extensions === void 0 ? void 0 : extensions.join("|").replace(/\./g, "\\.")),
loader: require.resolve("./loader/webpack5-istanbul-loader"),
enforce: "post",
options: options.istanbul || {},
include: modulePath => {
var _options$istanbul8;
if ((_options$istanbul8 = options.istanbul) !== null && _options$istanbul8 !== void 0 && _options$istanbul8.include) {
const includeRegexes = options.istanbul.include.map(pattern => new RegExp(pattern));
return includeRegexes.some(pattern => pattern.test(modulePath));
} else {
return true;
}
options: { ...(options.istanbul ?? {}),
instrumenter
},
exclude: modulePath => {
var _options$istanbul9;
const excludeRegexes = _constants.defaultExcludeRegexes;
if ((_options$istanbul9 = options.istanbul) !== null && _options$istanbul9 !== void 0 && _options$istanbul9.exclude) {
excludeRegexes.push(...options.istanbul.exclude.map(pattern => new RegExp(pattern)));
}
return excludeRegexes.some(pattern => pattern.test(modulePath));
}
include: modulePath => testExclude.shouldInstrument(modulePath)
});

@@ -90,0 +65,0 @@ return webpackConfig;

export const defaultExtensions = [".js", ".cjs", ".mjs", ".ts", ".tsx", ".jsx", ".vue", ".svelte"];
const testFileExtensions = defaultExtensions.map(extension => extension.slice(1)).join(",");
export const defaultExclude = [".storybook/**", "coverage/**", "packages/*/test{,s}/**", "**/*.d.ts", "test{,s}/**", `test{,-*}.{${testFileExtensions}}`, `**/*{.,-}{spec,stories,types}.{${testFileExtensions}}`, "**/__tests__/**", "**/*-entry.js",
export const defaultExclude = ["**/node_modules/**", ".storybook/**", "coverage/**", "packages/*/test{,s}/**", "**/*.d.ts", "test{,s}/**", `test{,-*}.{${testFileExtensions}}`, `**/*{.,-}{spec,stories,types}.{${testFileExtensions}}`, "**/__tests__/**", "**/*-entry.js",
/* Exclude common development tool configuration files */
"**/{ava,babel,nyc}.config.{js,cjs,mjs}", "**/jest.config.{js,cjs,mjs,ts}", "**/{karma,rollup,webpack}.config.js", "**/.{eslint,mocha}rc.{js,cjs}"];
export const defaultExcludeRegexes = ["node_modules", "\\.storybook/.*", "coverage/.*", "packages/[^/]+/test(s?)/.*", ".*\\.d\\.ts$", "test(s?)/.*", `test(-[^.]+)?\\.(${testFileExtensions})$`, `.*(-|\\.)((spec|stories|types)\\.(${testFileExtensions}))$`, "__tests__/.*", ".*-entry\\.js",
/* Exclude common development tool configuration files */
`.*\\/(ava|babel|nyc)\\.config\\.(js|cjs|mjs)$`, `.*\\/jest\\.config\\.(js|cjs|mjs|ts)$`, `.*\\/(karma|rollup|webpack)\\.config\\.js$`, `.*\\/.(eslint|mocha)rc\\.(js|cjs)$`, // angular
"\.(e2e|spec|stories)\.ts$", "(ngfactory|ngstyle)\.js", "polyfills.ts"].map(pattern => new RegExp(pattern));
"**/{ava,babel,nyc}.config.{js,cjs,mjs}", "**/jest.config.{js,cjs,mjs,ts}", "**/{karma,rollup,webpack}.config.js", "**/.{eslint,mocha}rc.{js,cjs}"];

@@ -1,2 +0,5 @@

import { defaultExclude, defaultExcludeRegexes, defaultExtensions } from "./constants";
import { defaultExclude, defaultExtensions } from "./constants";
import { createTestExclude } from "./webpack5-exclude";
import { getNycConfig } from "./nyc-config";
import { createInstrumenter } from "istanbul-lib-instrument";
export const viteFinal = async (viteConfig, options) => {

@@ -20,54 +23,29 @@ var _options$istanbul, _options$istanbul2, _options$istanbul3;

};
export const babel = async (babelConfig, options) => {
var _options$istanbul4, _options$istanbul5, _options$istanbul6;
console.log("[addon-coverage] Adding istanbul plugin to Babel config");
babelConfig.plugins ||= [];
babelConfig.plugins.push(["istanbul", { ...options.istanbul,
include: Array.from(((_options$istanbul4 = options.istanbul) === null || _options$istanbul4 === void 0 ? void 0 : _options$istanbul4.include) || []),
exclude: [options.configDir + "/**", ...defaultExclude, ...Array.from(((_options$istanbul5 = options.istanbul) === null || _options$istanbul5 === void 0 ? void 0 : _options$istanbul5.exclude) || [])],
extension: ((_options$istanbul6 = options.istanbul) === null || _options$istanbul6 === void 0 ? void 0 : _options$istanbul6.extension) || defaultExtensions,
coverageVariable: "__coverage__"
}]);
return babelConfig;
const defaultOptions = {
preserveComments: true,
produceSourceMap: true,
autoWrap: true,
esModules: true,
compact: false
};
export const swc = async (swcConfig, options) => {
swcConfig.parseMap = true;
return swcConfig;
};
export const webpackFinal = async (webpackConfig, options) => {
var _options$istanbul7;
var _options$istanbul4;
if (options.useWebpackConfig !== true) return webpackConfig;
webpackConfig.module.rules ||= [];
const extensions = ((_options$istanbul7 = options.istanbul) === null || _options$istanbul7 === void 0 ? void 0 : _options$istanbul7.extension) || /\.(mjs|cjs|tsx?|jsx?)$/;
const nycConfig = await getNycConfig(options.istanbul);
const extensions = ((_options$istanbul4 = options.istanbul) === null || _options$istanbul4 === void 0 ? void 0 : _options$istanbul4.extension) ?? nycConfig.extension ?? defaultExtensions;
console.log("[addon-coverage] Adding istanbul loader to Webpack config");
webpackConfig.module.rules.push({
test: extensions,
loader: "@jsdevtools/coverage-istanbul-loader",
const testExclude = await createTestExclude(options.istanbul);
let instrumenterOptions = Object.assign(defaultOptions, options.istanbul);
let instrumenter = createInstrumenter(instrumenterOptions);
webpackConfig.module.rules.unshift({
test: new RegExp(extensions === null || extensions === void 0 ? void 0 : extensions.join("|").replace(/\./g, "\\.")),
loader: require.resolve("./loader/webpack5-istanbul-loader"),
enforce: "post",
options: options.istanbul || {},
include: modulePath => {
var _options$istanbul8;
if ((_options$istanbul8 = options.istanbul) !== null && _options$istanbul8 !== void 0 && _options$istanbul8.include) {
const includeRegexes = options.istanbul.include.map(pattern => new RegExp(pattern));
return includeRegexes.some(pattern => pattern.test(modulePath));
} else {
return true;
}
options: { ...(options.istanbul ?? {}),
instrumenter
},
exclude: modulePath => {
var _options$istanbul9;
const excludeRegexes = defaultExcludeRegexes;
if ((_options$istanbul9 = options.istanbul) !== null && _options$istanbul9 !== void 0 && _options$istanbul9.exclude) {
excludeRegexes.push(...options.istanbul.exclude.map(pattern => new RegExp(pattern)));
}
return excludeRegexes.some(pattern => pattern.test(modulePath));
}
include: modulePath => testExclude.shouldInstrument(modulePath)
});
return webpackConfig;
};
export declare const defaultExtensions: string[];
export declare const defaultExclude: string[];
export declare const defaultExcludeRegexes: RegExp[];

@@ -1,7 +0,4 @@

import type { TransformOptions } from "@babel/core";
import type { Options } from "@storybook/core-common";
import type { AddonOptionsBabel, AddonOptionsVite, AddonOptionsWebpack } from "./types";
import type { AddonOptionsVite, AddonOptionsWebpack } from "./types";
export declare const viteFinal: (viteConfig: Record<string, any>, options: Options & AddonOptionsVite) => Promise<Record<string, any>>;
export declare const babel: (babelConfig: TransformOptions, options: Options & AddonOptionsBabel) => Promise<TransformOptions>;
export declare const swc: (swcConfig: Record<string, any>, options: Options & AddonOptionsWebpack) => Promise<Record<string, any>>;
export declare const webpackFinal: (webpackConfig: Record<string, any>, options: Options & AddonOptionsWebpack) => Promise<Record<string, any>>;

@@ -16,21 +16,2 @@ import type { IstanbulPluginOptions as IstanbulOptionsVite } from "vite-plugin-istanbul";

}
interface IstanbulOptionsSWC {
coverageVariable?: string;
compact?: boolean;
reportLogic?: boolean;
ignoreClassMethods?: Array<string>;
inputSourceMap?: Record<string, any>;
instrumentLog: {
level: "trace" | "warn" | "error" | "info";
enableTrace: boolean;
};
}
interface IstanbulOptionsWebpack {
coverageVariable?: string;
preserveComments?: boolean;
compact?: boolean;
produceSourceMap?: boolean;
ignoreClassMethods: [];
debug?: boolean;
}
export interface AddonOptionsBabel {

@@ -43,20 +24,10 @@ istanbul?: IstanbulOptionsBabel;

export declare type AddonOptionsWebpack = {
useWebpackConfig?: boolean;
useSwcConfig?: boolean;
useSwcPlugin: true;
istanbul?: {
cwd?: string;
nycrcPath?: string;
include?: string[];
exclude?: string[];
extension?: RegExp;
} & IstanbulOptionsSWC;
} | {
useWebpackConfig?: boolean;
useSwcConfig?: boolean;
useSwcPlugin: false;
istanbul?: {
include?: string[];
exclude?: string[];
extension?: RegExp;
} & IstanbulOptionsWebpack;
extension?: string[];
};
};
export {};
{
"name": "@storybook/addon-coverage",
"version": "0.1.0-canary.27.e56d027.0",
"version": "1.0.0-canary.27.12a4851.0",
"description": "Tools to support code coverage in Storybook",

@@ -48,2 +48,5 @@ "keywords": [

"@storybook/core-common": "^7.0.0-alpha.34",
"@types/convert-source-map": "^2.0.3",
"@types/istanbul-lib-instrument": "^1.7.7",
"@types/test-exclude": "^6.0.2",
"auto": "^10.3.0",

@@ -57,3 +60,4 @@ "concurrently": "^6.2.0",

"typescript": "^4.2.4",
"vite": "^3.1.0"
"vite": "^3.1.0",
"webpack": "^5.89.0"
},

@@ -76,9 +80,12 @@ "publishConfig": {

"dependencies": {
"@istanbuljs/load-nyc-config": "^1.1.0",
"@jsdevtools/coverage-istanbul-loader": "^3.0.5",
"@types/babel__core": "^7.1.19",
"@types/istanbul-lib-coverage": "^2.0.4",
"babel-plugin-istanbul": "^6.1.1",
"swc-plugin-coverage-instrument": "^0.0.20",
"convert-source-map": "^2.0.0",
"espree": "^9.6.1",
"istanbul-lib-instrument": "^6.0.1",
"source-map": "^0.7.4",
"test-exclude": "^6.0.0",
"vite-plugin-istanbul": "^3.0.1"
}
}
# Storybook Addon Coverage
Tools to support code coverage in Storybook and the [Storybook test runner](https://github.com/storybookjs/test-runner). It supports Storybook projects that use **Babel** or **Vite**.
Tools to support code coverage in Storybook and the [Storybook test runner](https://github.com/storybookjs/test-runner). It supports Storybook projects that use **Webpack5** or **Vite**.

@@ -16,3 +16,3 @@ ### Installation

```js
module.exports = {
export default {
addons: ["@storybook/addon-coverage"],

@@ -24,6 +24,6 @@ };

This addon instruments your code by using [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul) if your project uses Babel or [vite-plugin-istanbul](https://github.com/iFaxity/vite-plugin-istanbul) if your project uses Vite. It provides some default configuration, but if you want to add yours, you can do so by setting the options in your `.storybook/main.js`:
This addon instruments your code by using a custom wrapper around [istanbul-lib-instrument](https://www.npmjs.com/package/istanbul-lib-instrument) if your project uses Webpack5 or [vite-plugin-istanbul](https://github.com/iFaxity/vite-plugin-istanbul) if your project uses Vite. It provides some default configuration, but if you want to add yours, you can do so by setting the options in your `.storybook/main.js`:
```js
module.exports = {
export default {
addons: [

@@ -42,22 +42,25 @@ {

**The available options if your project uses Babel are as follows:**
**The available options if your project uses Webpack5 are as follows:**
| Option name | Description | Type | Default |
| --------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------- |
| `cwd` | Set the working directory | `String` | `process.cwd()` |
| `include` | See [here](https://github.com/istanbuljs/nyc#selecting-files-for-coverage) for more info | `Array<String>` | `['**']` |
| `exclude` | See [here](https://github.com/istanbuljs/nyc#selecting-files-for-coverage) for more info | `Array<String>` | [list](https://github.com/storybookjs/addon-coverage/blob/main/src/constants.ts) |
| `extension` | List of extensions that nyc should attempt to handle in addition to `.js` | `Array<String>` | `['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte]` |
| `excludeNodeModules` | Whether or not to exclude all node_module folders (i.e. **/node_modules/**) by default | `boolean` | `true` |
| `ignoreClassMethods` | Class method names to ignore for coverage` | `Array<String>` | `[]` |
| `useInlineSourceMaps` | Variable to pass sourcemap explicitly | `object` | `-` |
| `inputSourceMap` | Scope to store the coverage variable | `string` | `-` |
| `nycrcPath` | Path to nyc config file | `string` | `-` |
| `onCover` | Hook used to track coverage for all files | `(fileName: string, fileCoverage: FileCoverage) => unknown` | `-` |
| `fileName` | File name to use in onCover hook | `string` | `-` |
| Option name | Description | Type | Default |
| ---------------------- | -------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------------------------------------------------- |
| `cwd` | Set the working directory | `String` | `process.cwd()` |
| `nycrcPath` | Path to specific nyc config to use instead of automatically searching for a nycconfig. | `string` | - |
| `include` | Glob pattern to include files. It has precedence over the include definition from your nyc config | `Array<String>` | - |
| `exclude` | Glob pattern to exclude files. It has precedence over the exclude definition from your nyc config | `Array<String>` | `defaultExclude` in https://github.com/storybookjs/addon-coverage/blob/main/src/constants.ts |
| `extension` | List of supported extensions. It has precedence over the extension definition from your nyc config | `Array<String>` | `['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte]` |
| `coverageVariable` | The global variable name that Istanbul will use to store coverage results. | `string` | - |
| `preserveComments` | Indicates whether comments in the code should be preserved during the instrumentation process. | `boolean` | `true` |
| `compact` | Controls whether the output of instrumented code is compacted. Useful for debugging when set to `false`. | `boolean` | `false` |
| `esModules` | Determines whether the code to be instrumented uses ES Module syntax. | `boolean` | `true` |
| `autoWrap` | When set to `true`, wraps program code in a function to enable top-level return statements. | `boolean` | `true` |
| `produceSourceMap` | If `true`, instructs Istanbul to produce a source map for the instrumented code. | `boolean` | `true` |
| `sourceMapUrlCallback` | A callback function that gets invoked with the filename and the source map URL when a source map is generated. | `function` | - |
| `debug` | Enables the debug mode, providing additional logging information during the instrumentation process. | `boolean` | - |
> **Note:**
> **Note:**
> If you're using typescript, you can import the type for the options like so:
>
> ```ts
> import type { AddonOptionsBabel } from '@storybook/addon-coverage'
> import type { AddonOptionsWebpack } from "@storybook/addon-coverage";
> ```

@@ -73,3 +76,3 @@

| `extension` | List of extensions that nyc should attempt to handle in addition to `.js` | `Array<String>` or `string` | `['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte]` |
| `requireEnv ` | Optional boolean to require the environment variable (defaults to VITE_COVERAGE) to equal true in order to instrument the code. Otherwise it will instrument even if env variable is not set. However if requireEnv is not set the instrumentation will stop if the environment variable is equal to false. | `boolean` | `-` |
| `requireEnv ` | Optional boolean to require the environment variable (defaults to VITE_COVERAGE) to equal true in order to instrument the code. Otherwise it will instrument even if env variable is not set. However if requireEnv is not set the instrumentation will stop if the environment variable is equal to false. | `boolean` | `-` |
| `cypress ` | Optional boolean to change the environment variable to CYPRESS_COVERAGE instead of VITE_COVERAGE. For ease of use with `@cypress/code-coverage` coverage | `boolean` | `-` |

@@ -80,6 +83,7 @@ | `checkProd ` | Optional boolean to enforce the plugin to skip instrumentation for production environments. Looks at Vite's isProduction key from the ResolvedConfig. | `boolean` | `-` |

> **Note:**
> **Note:**
> If you're using typescript, you can import the type for the options like so:
>
> ```ts
> import type { AddonOptionsVite } from '@storybook/addon-coverage'
> import type { AddonOptionsVite } from "@storybook/addon-coverage";
> ```

@@ -86,0 +90,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc