diff --git a/README.md b/README.md index eb880d5b..7fe5a2f8 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # vue-jest -Jest Vue transformer with source map support +Jest transformer for Vue single file components -> **NOTE:** This is documentation for `vue-jest@3.x`. [View the vue-jest@2.x documentation](https://github.com/vuejs/vue-jest/tree/e694fc7ce11ae1ac1c778ed7c4402515c5f0d5aa) +_Note: These are the docs for v4—for older documentation [see the v3 docs](https://github.com/vuejs/vue-jest/tree/v3)_ ## Usage @@ -12,9 +12,9 @@ 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: +To use `vue-jest` as a transformer for your `.vue` files, map them to the `vue-jest` module: -```json +```js { "jest": { "transform": { @@ -23,9 +23,9 @@ To define `vue-jest` as a transformer for your `.vue` files, map them to the `vu } ``` -A full config will look like this. +A full config might look like this: -```json +```js { "jest": { "moduleFileExtensions": ["js", "json", "vue"], @@ -37,152 +37,34 @@ A full config will look like this. } ``` -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: +## Examples -- [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 - -- `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.: +vue-jest compiles `