284 lines
6.4 KiB
Markdown
284 lines
6.4 KiB
Markdown
|
# 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
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
```
|