# vue-jest

> Jest Vue transform

Latest version **3.0.7** (published 2020-09-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-jest
pnpm add vue-jest
yarn add vue-jest
bun add vue-jest
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.7 |
| Published | 2020-09-14 |
| First published | 2016-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 35.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 749 |
| Author | Edd Yerburgh |
| Maintainers | lmiller1990, dobromir-hristov, eddyerburgh, yyx990803 |
| Keywords | jest, vue, jest vue, jest vue transform, jest vue preprocessor, vue jest, vue jest, vue jest transform, vue jest preprocessor |

## Links

- npm: https://www.npmjs.com/package/vue-jest
- Repository: https://github.com/vuejs/vue-jest
- npm.io page: https://npm.io/package/vue-jest

## Dependencies (11)

- [chalk](https://npm.io/package/chalk.md) ^2.1.0
- [deasync](https://npm.io/package/deasync.md) ^0.1.15
- [tsconfig](https://npm.io/package/tsconfig.md) ^7.0.0
- [node-cache](https://npm.io/package/node-cache.md) ^4.1.1
- [source-map](https://npm.io/package/source-map.md) ^0.5.6
- [js-beautify](https://npm.io/package/js-beautify.md) ^1.6.14
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [extract-from-css](https://npm.io/package/extract-from-css.md) ^0.4.4
- [find-babel-config](https://npm.io/package/find-babel-config.md) ^1.1.0
- [vue-template-es2015-compiler](https://npm.io/package/vue-template-es2015-compiler.md) ^1.6.0
- [babel-plugin-transform-es2015-modules-commonjs](https://npm.io/package/babel-plugin-transform-es2015-modules-commonjs.md) ^6.26.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.7 (latest) — 2020-09-14
- 5.0.0-alpha.10 (next) — 2021-05-31
- 5.0.0-alpha.9 (5.0.0-alpha.9) — 2021-05-09
- 4.0.1 (4.0.1) — 2021-03-06
- 4.0.0 (4.0.0) — 2021-02-24
- 5.0.0-alpha.8 (5.0.0-alpha.8) — 2021-01-18
- 5.0.0-alpha.7 (5.0.0-alpha.7) — 2020-12-01
- 4.0.0-rc.1 (4.0.0-rc.1) — 2020-12-01
- 5.0.0-alpha.6 (5.0.0-alpha.6) — 2020-11-17
- 5.0.0-alpha.5 (5.0.0-alpha.5) — 2020-10-11
- 4.0.0-beta.6 (4.0.0-beta.6) — 2020-09-10
- 5.0.0-alpha.3 (5.0.0-alpha.3) — 2020-08-11
- 4.0.0-beta.5 (4.0.0-beta.5) — 2020-08-01
- 5.0.0-alpha.2 (5.0.0-alpha.2) — 2020-08-01
- 4.0.0-beta.4 (4.0.0-beta.4) — 2020-07-08
- … 37 more at https://npm.io/package/vue-jest/versions

## README

# vue-jest

Jest Vue transformer with source map support

> **NOTE:** This is documentation for `vue-jest@3.x`. [View the vue-jest@2.x documentation](https://github.com/vuejs/vue-jest/tree/e694fc7ce11ae1ac1c778ed7c4402515c5f0d5aa)

## Usage

```bash
npm install --save-dev vue-jest
```

## Setup

To define `vue-jest` as a transformer for your `.vue` files, map them to the `vue-jest` module:

```json
{
  "jest": {
    "transform": {
      "^.+\\.vue$": "vue-jest"
    }
}
```

A full config will look like this.

```json
{
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "vue-jest"
    }
  }
}
```

If you're on a version of Jest older than 22.4.0, you need to set `mapCoverage` to `true` in order to use source maps.

## Example Projects

Example repositories testing Vue components with jest and vue-jest:

- [Avoriaz with Jest](https://github.com/eddyerburgh/avoriaz-jest-example)
- [Vue Test Utils with Jest](https://github.com/eddyerburgh/vue-test-utils-jest-example)

## Supported langs

vue-jest compiles the script and template of SFCs into a JavaScript file that Jest can run. **Currently, SCSS, SASS and Stylus are the only style languages that are compiled**.

### Supported script languages

- **typescript** (`lang="ts"`, `lang="typescript"`)
- **coffeescript** (`lang="coffee"`, `lang="coffeescript"`)

### Global Jest options

You can change the behavior of `vue-jest` by using `jest.globals`.

> *Tip:* Need programmatic configuration? Use the [--config](https://jestjs.io/docs/en/cli.html#config-path) option in Jest CLI, and export a `.js` file

#### babelConfig

Provide `babelConfig` in one of the following formats:

- `<Boolean>`
- `<Object>`
- `<String>`

##### Boolean

- `true` - Enable Babel processing. `vue-jest` will try to find Babel configuration using [find-babel-config](https://www.npmjs.com/package/find-babel-config).

> This is the default behavior if [babelConfig](#babelconfig) is not defined.

- `false` - Skip Babel processing entirely:

```json
{
  "jest": {
    "globals": {
      "vue-jest": {
        "babelConfig": false
      }
    }
  }
}
```

##### Object

Provide inline [Babel options](https://babeljs.io/docs/en/options):

```json
{
  "jest": {
    "globals": {
      "vue-jest": {
        "babelConfig": {
          "presets": [
            [
              "env",
              {
                "useBuiltIns": "entry",
                "shippedProposals": true
              }
            ]
          ],
          "plugins": [
            "syntax-dynamic-import"
          ],
          "env": {
            "test": {
              "plugins": [
                "dynamic-import-node"
              ]
            }
          }
        }
      }
    }
  }
}
```

##### String

If a string is provided, it will be an assumed path to a babel configuration file (e.g. `.babelrc`, `.babelrc.js`).
- Config file should export a Babel configuration object.
- Should *not* point to a [project-wide configuration file (babel.config.js)](https://babeljs.io/docs/en/config-files#project-wide-configuration), which exports a function.

```json
{
  "jest": {
    "globals": {
      "vue-jest": {
        "babelConfig": "path/to/.babelrc.js"
      }
    }
  }
}
```

To use the [Config Function API](https://babeljs.io/docs/en/config-files#config-function-api), use inline options instead. i.e.:

```json
{
  "jest": {
    "globals": {
      "vue-jest": {
        "babelConfig": {
          "configFile": "path/to/babel.config.js"
        }
      }
    }
  }
}
```

#### tsConfig

Provide `tsConfig` in one of the following formats:

- `<Boolean>`
- `<Object>`
- `<String>`

##### Boolean

- `true` - Process TypeScript files using custom configuration. `vue-jest` will try to find TypeScript configuration using [tsconfig.loadSync](https://www.npmjs.com/package/tsconfig#api).

> This is the default behavior if [tsConfig](#tsConfig) is not defined.

- `false` - Process TypeScript files using the [default configuration provided by vue-jest](https://github.com/vuejs/vue-jest/blob/master/lib/load-typescript-config.js#L5-L27).

##### Object

Provide inline [TypeScript compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html):

```json
{
  "jest": {
    "globals": {
      "vue-jest": {
        "tsConfig": {
          "importHelpers": true
        }
      }
    }
  }
}
```

##### String

If a string is provided, it will be an assumed path to a TypeScript configuration file:

```json
{
  "jest": {
    "globals": {
      "vue-jest": {
        "tsConfig": "path/to/tsconfig.json"
      }
    }
  }
}
```

### Supported template languages

- **pug** (`lang="pug"`)
  - To give options for the Pug compiler, enter them into the Jest configuration.
  The options will be passed to pug.compile().

  ```json
    {
      "jest": {
        "globals": {
          "vue-jest": {
            "pug": {
              "basedir": "mybasedir"
            }
          }
        }
      }
    }
  ```

- **jade** (`lang="jade"`)
- **haml** (`lang="haml"`)

### Supported style languages

- **stylus** (`lang="stylus"`, `lang="styl"`)
- **sass** (`lang="sass"`)
  - The SASS compiler supports jest's [moduleNameMapper](https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string) which is the suggested way of dealing with Webpack aliases.
- **scss** (`lang="scss"`)
  - The SCSS compiler supports jest's [moduleNameMapper](https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string) which is the suggested way of dealing with Webpack aliases.
  - To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at `jest.globals['vue-jest'].resources.scss`:

    ```json
    {
      "jest": {
        "globals": {
          "vue-jest": {
            "resources": {
              "scss": [
                "./node_modules/package/_mixins.scss",
                "./src/assets/css/globals.scss"
              ]
            }
          }
        }
      }
    }
    ```
- **postcss** (`lang="pcss"`, `lang="postcss"`)

## CSS options

`experimentalCSSCompile`: `Boolean` Default true. Turn off CSS compilation
`hideStyleWarn`: `Boolean` Default false. Hide warnings about CSS compilation
`resources`:

  ```json
  {
    "jest": {
      "globals": {
        "vue-jest": {
          "hideStyleWarn": true,
          "experimentalCSSCompile": true
        }
      }
    }
  }
  ```

---
_Source: https://npm.io/package/vue-jest · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._