Skip to content

Commit 6b47660

Browse files
committed
docs: update readme
1 parent 7305926 commit 6b47660

File tree

6 files changed

+38
-1243
lines changed

6 files changed

+38
-1243
lines changed

README.md

Lines changed: 6 additions & 338 deletions
Original file line numberDiff line numberDiff line change
@@ -1,342 +1,10 @@
1-
# vue-jest
1+
# vue-jest-next
22

3-
Jest Vue transformer with source map support
3+
Jest Vue transformer for Vue 3 with source map support (WIP).
44

5-
> **NOTE:** This is documentation for `vue-jest@3.x`. [View the vue-jest@2.x documentation](https://github.com/vuejs/vue-jest/tree/e694fc7ce11ae1ac1c778ed7c4402515c5f0d5aa)
5+
Docs for current stable version (targeting Vue 2.x): https://github.com/vuejs/vue-jest/
66

7-
## Usage
7+
## TODO (supported in vue-jest@4.x but not vue-jest@next):
88

9-
```bash
10-
npm install --save-dev vue-jest
11-
```
12-
13-
### Usage with Babel 7
14-
15-
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
16-
17-
```bash
18-
npm install --save-dev babel-core@bridge
19-
```
20-
21-
## Setup
22-
23-
To define `vue-jest` as a transformer for your `.vue` files, map them to the `vue-jest` module:
24-
25-
```json
26-
{
27-
"jest": {
28-
"transform": {
29-
"^.+\\.vue$": "vue-jest"
30-
}
31-
}
32-
```
33-
34-
A full config will look like this.
35-
36-
```json
37-
{
38-
"jest": {
39-
"moduleFileExtensions": ["js", "json", "vue"],
40-
"transform": {
41-
"^.+\\.js$": "babel-jest",
42-
"^.+\\.vue$": "vue-jest"
43-
}
44-
}
45-
}
46-
```
47-
48-
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.
49-
50-
## Example Projects
51-
52-
Example repositories testing Vue components with jest and vue-jest:
53-
54-
- [Avoriaz with Jest](https://github.com/eddyerburgh/avoriaz-jest-example)
55-
- [Vue Test Utils with Jest](https://github.com/eddyerburgh/vue-test-utils-jest-example)
56-
57-
## Supported langs
58-
59-
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**.
60-
61-
### Supported script languages
62-
63-
- **typescript** (`lang="ts"`, `lang="typescript"`)
64-
- **coffeescript** (`lang="coffee"`, `lang="coffeescript"`)
65-
66-
### Global Jest options
67-
68-
You can change the behavior of `vue-jest` by using `jest.globals`.
69-
70-
#### Supporting custom blocks
71-
72-
A great feature of the Vue SFC compiler is that it can support custom blocks. You might want to use those blocks in your tests. To render out custom blocks for testing purposes, you'll need to write a transformer. Once you have your transformer, you'll add an entry to vue-jest's transform map. This is how [vue-i18n's](https://github.com/kazupon/vue-i18n) `<i18n>` custom blocks are supported in unit tests.
73-
74-
A `package.json` Example
75-
76-
```json
77-
{
78-
"jest": {
79-
"moduleFileExtensions": ["js", "json", "vue"],
80-
"transform": {
81-
"^.+\\.js$": "babel-jest",
82-
"^.+\\.vue$": "vue-jest"
83-
},
84-
"globals": {
85-
"vue-jest": {
86-
"transform": {
87-
"your-custom-block": "./custom-block-processor.js"
88-
}
89-
}
90-
}
91-
}
92-
}
93-
```
94-
95-
> _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
96-
97-
A `jest.config.js` Example - If you're using a dedicated configuration file like you can reference and require your processor in the config file instead of using a file reference.
98-
99-
```js
100-
module.exports = {
101-
globals: {
102-
'vue-jest': {
103-
transform: {
104-
'your-custom-block': require('./custom-block-processor')
105-
}
106-
}
107-
}
108-
}
109-
```
110-
111-
#### Writing a processor
112-
113-
Processors must return an object with a "process" method, like so...
114-
115-
```js
116-
module.exports = {
117-
/**
118-
* Process the content inside of a custom block and prepare it for execution in a testing environment
119-
* @param {SFCCustomBlock[]} blocks All of the blocks matching your type, returned from `@vue/component-compiler-utils`
120-
* @param {string} vueOptionsNamespace The internal namespace for a component's Vue Options in vue-jest
121-
* @param {string} filename The SFC file being processed
122-
* @param {Object} config The full Jest config
123-
* @returns {string} The code to be output after processing all of the blocks matched by this type
124-
*/
125-
process(blocks, vueOptionsNamepsace, filename, config) {}
126-
}
127-
```
128-
129-
#### babelConfig
130-
131-
Provide `babelConfig` in one of the following formats:
132-
133-
- `<Boolean>`
134-
- `<Object>`
135-
- `<String>`
136-
137-
##### Boolean
138-
139-
- `true` - Enable Babel processing. `vue-jest` will try to find Babel configuration using [find-babel-config](https://www.npmjs.com/package/find-babel-config).
140-
141-
> This is the default behavior if [babelConfig](#babelconfig) is not defined.
142-
143-
- `false` - Skip Babel processing entirely:
144-
145-
```json
146-
{
147-
"jest": {
148-
"globals": {
149-
"vue-jest": {
150-
"babelConfig": false
151-
}
152-
}
153-
}
154-
}
155-
```
156-
157-
##### Object
158-
159-
Provide inline [Babel options](https://babeljs.io/docs/en/options):
160-
161-
```json
162-
{
163-
"jest": {
164-
"globals": {
165-
"vue-jest": {
166-
"babelConfig": {
167-
"presets": [
168-
[
169-
"env",
170-
{
171-
"useBuiltIns": "entry",
172-
"shippedProposals": true
173-
}
174-
]
175-
],
176-
"plugins": ["syntax-dynamic-import"],
177-
"env": {
178-
"test": {
179-
"plugins": ["dynamic-import-node"]
180-
}
181-
}
182-
}
183-
}
184-
}
185-
}
186-
}
187-
```
188-
189-
##### String
190-
191-
If a string is provided, it will be an assumed path to a babel configuration file (e.g. `.babelrc`, `.babelrc.js`).
192-
193-
- Config file should export a Babel configuration object.
194-
- 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.
195-
196-
```json
197-
{
198-
"jest": {
199-
"globals": {
200-
"vue-jest": {
201-
"babelConfig": "path/to/.babelrc.js"
202-
}
203-
}
204-
}
205-
}
206-
```
207-
208-
To use the [Config Function API](https://babeljs.io/docs/en/config-files#config-function-api), use inline options instead. i.e.:
209-
210-
```json
211-
{
212-
"jest": {
213-
"globals": {
214-
"vue-jest": {
215-
"babelConfig": {
216-
"configFile": "path/to/babel.config.js"
217-
}
218-
}
219-
}
220-
}
221-
}
222-
```
223-
224-
#### tsConfig
225-
226-
Provide `tsConfig` in one of the following formats:
227-
228-
- `<Boolean>`
229-
- `<Object>`
230-
- `<String>`
231-
232-
##### Boolean
233-
234-
- `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).
235-
236-
> This is the default behavior if [tsConfig](#tsConfig) is not defined.
237-
238-
- `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).
239-
240-
##### Object
241-
242-
Provide inline [TypeScript compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html):
243-
244-
```json
245-
{
246-
"jest": {
247-
"globals": {
248-
"vue-jest": {
249-
"tsConfig": {
250-
"importHelpers": true
251-
}
252-
}
253-
}
254-
}
255-
}
256-
```
257-
258-
##### String
259-
260-
If a string is provided, it will be an assumed path to a TypeScript configuration file:
261-
262-
```json
263-
{
264-
"jest": {
265-
"globals": {
266-
"vue-jest": {
267-
"tsConfig": "path/to/tsconfig.json"
268-
}
269-
}
270-
}
271-
}
272-
```
273-
274-
### Supported template languages
275-
276-
- **pug** (`lang="pug"`)
277-
278-
- To give options for the Pug compiler, enter them into the Jest configuration.
279-
The options will be passed to pug.compile().
280-
281-
```json
282-
{
283-
"jest": {
284-
"globals": {
285-
"vue-jest": {
286-
"pug": {
287-
"basedir": "mybasedir"
288-
}
289-
}
290-
}
291-
}
292-
}
293-
```
294-
295-
- **jade** (`lang="jade"`)
296-
- **haml** (`lang="haml"`)
297-
298-
### Supported style languages
299-
300-
- **stylus** (`lang="stylus"`, `lang="styl"`)
301-
- **sass** (`lang="sass"`)
302-
- 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.
303-
- **scss** (`lang="scss"`)
304-
305-
- 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.
306-
- To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at `jest.globals['vue-jest'].resources.scss`:
307-
308-
```json
309-
{
310-
"jest": {
311-
"globals": {
312-
"vue-jest": {
313-
"resources": {
314-
"scss": [
315-
"./node_modules/package/_mixins.scss",
316-
"./src/assets/css/globals.scss"
317-
]
318-
}
319-
}
320-
}
321-
}
322-
}
323-
```
324-
325-
## CSS options
326-
327-
`experimentalCSSCompile`: `Boolean` Default true. Turn off CSS compilation
328-
`hideStyleWarn`: `Boolean` Default false. Hide warnings about CSS compilation
329-
`resources`:
330-
331-
```json
332-
{
333-
"jest": {
334-
"globals": {
335-
"vue-jest": {
336-
"hideStyleWarn": true,
337-
"experimentalCSSCompile": true
338-
}
339-
}
340-
}
341-
}
342-
```
9+
- [ ] Support loading styles
10+
- [ ] Support custom blocks

0 commit comments

Comments
 (0)