docs: Document jest's transformIgnorePatterns option to avoid pitfall

docs/config/README.md

@@ -22,7 +22,7 @@ See the [Browser Compatibility](../guide/browser-compatibility.md#browserslist)
 
 The file should export an object containing options:
 
-``` js
+```js
 // vue.config.js
 module.exports = {
   // options...
@@ -50,15 +50,14 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
   - You are using HTML5 `history.pushState` routing;
 
   - You are using the `pages` option to build a multi-paged app.
-  :::
+    :::
 
   This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value:
 
-  ``` js
+  ```js
   module.exports = {
-    publicPath: process.env.NODE_ENV === 'production'
-      ? '/production-sub-path/'
-      : '/'
+    publicPath:
+      process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
   }
   ```
 
@@ -108,7 +107,7 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
   - An object that specifies its `entry`, `template`, `filename`, `title` and `chunks` (all optional except `entry`). Any other properties added beside those will also be passed directly to `html-webpack-plugin`, allowing user to customize said plugin;
   - Or a string specifying its `entry`.
 
-  ``` js
+  ```js
   module.exports = {
     pages: {
       index: {
@@ -123,14 +122,14 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
         title: 'Index Page',
         // chunks to include on this page, by default includes
         // extracted common chunks and vendor chunks.
-        chunks: ['chunk-vendors', 'chunk-common', 'index']
+        chunks: ['chunk-vendors', 'chunk-common', 'index'],
       },
       // when using the entry-only string format,
       // template is inferred to be `public/subpage.html`
       // and falls back to `public/index.html` if not found.
       // Output filename is inferred to be `subpage.html`.
-      subpage: 'src/subpage/main.js'
-    }
+      subpage: 'src/subpage/main.js',
+    },
   }
   ```
 
@@ -151,24 +150,24 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
 
   Alternatively, you can configure the overlay to display both warnings and errors:
 
-  ``` js
+  ```js
   // vue.config.js
   module.exports = {
     devServer: {
       overlay: {
         warnings: true,
-        errors: true
-      }
-    }
+        errors: true,
+      },
+    },
   }
   ```
 
   When `lintOnSave` is a truthy value, `eslint-loader` will be applied in both development and production. If you want to disable `eslint-loader` during production build, you can use the following config:
 
-  ``` js
+  ```js
   // vue.config.js
   module.exports = {
-    lintOnSave: process.env.NODE_ENV !== 'production'
+    lintOnSave: process.env.NODE_ENV !== 'production',
   }
   ```
 
@@ -188,6 +187,14 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
 
   By default `babel-loader` ignores all files inside `node_modules`. If you want to explicitly transpile a dependency with Babel, you can list it in this option.
 
+::: warning Jest config
+This option is not respected by the [cli-unit-jest plugin](#jest), because in jest, we don't have to transpile code from `/node_modules` unless it uses non-standard features - Node >8.11 supports the latest ECMAScript features already.
+
+However, jest sometimes has to transform content from node_modules if that code uses ES6 `import`/`export` syntax. In that case, use the `tranformIgnorePatterns` option in `jest.config.js`.
+
+See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-unit-jest/README.md) for more information.
+:::
+
 ### productionSourceMap
 
 - Type: `boolean`
@@ -271,7 +278,7 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
 
   Pass options to CSS-related loaders. For example:
 
-  ``` js
+  ```js
   module.exports = {
     css: {
       loaderOptions: {
@@ -280,9 +287,9 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
         },
         postcss: {
           // options here will be passed to postcss-loader
-        }
-      }
-    }
+        },
+      },
+    },
   }
   ```
 
@@ -318,32 +325,32 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
 
   `devServer.proxy` can be a string pointing to the development API server:
 
-  ``` js
+  ```js
   module.exports = {
     devServer: {
-      proxy: 'http://localhost:4000'
-    }
+      proxy: 'http://localhost:4000',
+    },
   }
   ```
 
   This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to `http://localhost:4000`.
 
   If you want to have more control over the proxy behavior, you can also use an object with `path: options` pairs. Consult [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware#proxycontext-config) for full options:
 
-  ``` js
+  ```js
   module.exports = {
     devServer: {
       proxy: {
         '^/api': {
           target: '<url>',
           ws: true,
-          changeOrigin: true
+          changeOrigin: true,
         },
         '^/foo': {
-          target: '<other_url>'
-        }
-      }
-    }
+          target: '<other_url>',
+        },
+      },
+    },
   }
   ```
 
@@ -366,14 +373,14 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
 
   This is an object that doesn't go through any schema validation, so it can be used to pass arbitrary options to 3rd party plugins. For example:
 
-  ``` js
+  ```js
   module.exports = {
     pluginOptions: {
       foo: {
         // plugins can access these options as
         // `options.pluginOptions.foo`.
-      }
-    }
+      },
+    },
   }
   ```
 

packages/@vue/cli-plugin-unit-jest/README.md

@@ -21,7 +21,7 @@ Note that directly running `jest` will fail because the Babel preset requires hi
 
 If you want to debug your tests via the Node inspector, you can run the following:
 
-``` sh
+```sh
 # macOS or linux
 node --inspect-brk ./node_modules/.bin/vue-cli-service test:unit
 
@@ -35,6 +35,36 @@ Jest can be configured via `jest.config.js` in your project root, or the `jest`
 
 ## Installing in an Already Created Project
 
-``` sh
+```sh
 vue add @vue/unit-jest
 ```
+
+## Transform dependencies from `/node_modules`
+
+By default, jest doesn't transform anything from `/nodee_modules`.
+
+Since jest runs in node, we also don't have to transpile anything that uses modern ECMAScript features as Node >=8 already supports these features, so it's a sensible default. cli-plugin-jest also doesn't respect the `transpileDependencies` option in `vue.config.js` for the same reason.
+
+However, we have (at least) three cases where we do need to transpile code from `/node_modules` in jest:
+
+1. Usage of ES6 `import`/`export` statements, which have to be compiled to commonjs `module.exports`
+2. Single File Components (`.vue` files) which have to be run through `vue-jest`
+3. Typescript code
+
+To do this, we need to add an exception to the `tranformIgnorePatterns` option of jest. This is its default value:
+
+```javascript
+transformIgnorePatterns: ['/node_modules/']
+```
+
+We have to add exceptions to this pattern with a RegExp negative lookahead:
+
+```javascript
+transformIgnorePatterns: ['/node_modules/(?!name-of-lib-o-transform)']
+```
+
+To exclude multiple libraries:
+
+```javascript
+transformIgnorePatterns: ['/node_modules/(?!lib-to-transform|other-lib)']
+```

packages/@vue/cli-plugin-unit-jest/generator/index.js

@@ -23,6 +23,7 @@ module.exports = (api, _, __, invoking) => {
         '^.+\\.vue$': 'vue-jest',
         '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
       },
+      'transformIgnorePatterns': ['/node_modules/'],
       // support the same @ -> src alias mapping in source code
       'moduleNameMapper': {
         '^@/(.*)$': '<rootDir>/src/$1'