Skip to content

Commit 160b9f5

Browse files
afontculmiller1990
andauthored
docs: Add installation for each vue/jest version combination (vuejs#388)
* Update README.md * Update README.md Co-authored-by: Lachlan Miller <[email protected]> * Update README.md * Fix format issues Co-authored-by: Lachlan Miller <[email protected]>
1 parent f61b737 commit 160b9f5

File tree

1 file changed

+26
-25
lines changed

1 file changed

+26
-25
lines changed

README.md

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,32 @@
11
# vue-jest
22

3-
Jest transformer for Vue single file components
3+
Jest transformer for Vue Single File Components.
44

5-
> **NOTE:** This is documentation for `[email protected]`. [View the [email protected] documentation](https://github.com/vuejs/vue-jest/tree/v3)
5+
## Installation
66

7-
## Usage
7+
Since we need to support a variety of Vue and Jest versions, vue-jest doesn't follow semantic versioning.
88

9-
```bash
10-
npm install --save-dev vue-jest
11-
yarn add vue-jest --dev
12-
```
13-
14-
### Usage with Babel 7
15-
16-
If you use [jest](https://github.com/facebook/jest) > 24.0.0 and [babel-jest](https://github.com/facebook/jest/tree/master/packages/babel-jest) make sure to install babel-core@bridge
9+
| Vue version | Jest Version | Package |
10+
| ----------- | ----------------- | ------------------- |
11+
| Vue 2 | Jest 26 and below | `vue-jest@4` |
12+
| Vue 3 | Jest 26 and below | `vue-jest@5` |
13+
| Vue 2 | Jest 27 | `@vue/vue2-jest@27` |
14+
| Vue 3 | Jest 27 | `@vue/vue3-jest@27` |
1715

1816
```bash
19-
npm install --save-dev babel-core@bridge
20-
yarn add babel-core@bridge --dev
17+
npm install --save-dev @vue/vue2-jest@27 # (use the appropriate version)
18+
yarn add @vue/vue2-jest@27 --dev
2119
```
2220

2321
## Setup
2422

25-
To use `vue-jest` as a transformer for your `.vue` files, map them to the `vue-jest` module:
23+
To use `vue-jest` as a transformer for your `.vue` files, map them to the appropriate `vue-jest` module:
2624

2725
```json
2826
{
2927
"jest": {
3028
"transform": {
31-
"^.+\\.vue$": "vue-jest"
29+
"^.+\\.vue$": "@vue/vue2-jest" // Update to match your installed version
3230
}
3331
}
3432
}
@@ -42,19 +40,22 @@ A full config will look like this.
4240
"moduleFileExtensions": ["js", "json", "vue"],
4341
"transform": {
4442
"^.+\\.js$": "babel-jest",
45-
"^.+\\.vue$": "vue-jest"
43+
"^.+\\.vue$": "@vue/vue2-jest"
4644
}
4745
}
4846
}
4947
```
5048

51-
## Examples
49+
### Usage with Babel 7
5250

53-
Example repositories testing Vue components with jest and vue-jest:
51+
If you use [jest](https://github.com/facebook/jest) > 24.0.0 and [babel-jest](https://github.com/facebook/jest/tree/master/packages/babel-jest) make sure to install babel-core@bridge
5452

55-
- [Vue Test Utils with Jest](https://github.com/eddyerburgh/vue-test-utils-jest-example)
53+
```bash
54+
npm install --save-dev babel-core@bridge
55+
yarn add babel-core@bridge --dev
56+
```
5657

57-
## Supported langs
58+
## Supported languages for SFC sections
5859

5960
vue-jest compiles `<script />`, `<template />`, and `<style />` blocks with supported `lang` attributes into JavaScript that Jest can run.
6061

@@ -79,10 +80,10 @@ A `package.json` Example
7980
"moduleFileExtensions": ["js", "json", "vue"],
8081
"transform": {
8182
"^.+\\.js$": "babel-jest",
82-
"^.+\\.vue$": "vue-jest"
83+
"^.+\\.vue$": "@vue/vue2-jest"
8384
},
8485
"globals": {
85-
"vue-jest": {
86+
"@vue/vue2-jest": {
8687
"transform": {
8788
"your-custom-block": "./custom-block-processor.js"
8889
}
@@ -99,7 +100,7 @@ A `jest.config.js` Example - If you're using a dedicated configuration file like
99100
```js
100101
module.exports = {
101102
globals: {
102-
'vue-jest': {
103+
'@vue/vue2-jest': {
103104
transform: {
104105
'your-custom-block': require('./custom-block-processor')
105106
}
@@ -134,7 +135,7 @@ You can provide [TemplateCompileOptions](https://github.com/vuejs/component-comp
134135
{
135136
"jest": {
136137
"globals": {
137-
"vue-jest": {
138+
"@vue/vue2-jest": {
138139
"templateCompiler": {
139140
"transpileOptions": {
140141
"transforms": {
@@ -159,7 +160,7 @@ You can provide [TemplateCompileOptions](https://github.com/vuejs/component-comp
159160
{
160161
"jest": {
161162
"globals": {
162-
"vue-jest": {
163+
"@vue/vue2-jest": {
163164
"pug": {
164165
"basedir": "mybasedir"
165166
}

0 commit comments

Comments
 (0)