Automatic merge of gitlab-org/gitlab-ce master

babel.config.js

@@ -40,8 +40,7 @@ if (BABEL_ENV === 'karma' || BABEL_ENV === 'coverage') {
 
 // Jest is running in node environment
 if (BABEL_ENV === 'jest') {
-  plugins.push('transform-es2015-modules-commonjs');
-  plugins.push('dynamic-import-node');
+  plugins.push('@babel/plugin-transform-modules-commonjs');
 }
 
 module.exports = { presets, plugins };

doc/development/ee_features.md

@@ -880,6 +880,29 @@ import bundle from 'ee_else_ce/protected_branches/protected_branches_bundle.js';
 See the frontend guide [performance section](./fe_guide/performance.md) for
 information on managing page-specific javascript within EE.
 
+## Vue code in `assets/javascript`
+
+To seperate Vue template differences we should async import the components.
+Doing this allows for us to load the correct component in EE whilst in CE
+we can load a empty component that renders nothing. This code **should**
+exist in the CE repository as well as the EE repository.
+
+```html
+<script>
+export default {
+  components: {
+    EEComponent: () => import('ee_component/components/test.vue'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <ee-component />
+  </div>
+</template>
+```
+
 ## SCSS code in `assets/stylesheets`
 
 To separate EE-specific styles in SCSS files, if a component you're adding styles for

jest.config.js

@@ -29,7 +29,7 @@ module.exports = {
   cacheDirectory: '<rootDir>/tmp/cache/jest',
   modulePathIgnorePatterns: ['<rootDir>/.yarn-cache/'],
   reporters,
-  setupTestFrameworkScriptFile: '<rootDir>/spec/frontend/test_setup.js',
+  setupFilesAfterEnv: ['<rootDir>/spec/frontend/test_setup.js'],
   restoreMocks: true,
   transform: {
     '^.+\\.(gql|graphql)$': 'jest-transform-graphql',

package.json

@@ -130,17 +130,13 @@
     "xterm": "^3.5.0"
   },
   "devDependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
     "@gitlab/eslint-config": "^1.4.0",
     "@vue/test-utils": "^1.0.0-beta.25",
     "axios-mock-adapter": "^1.15.0",
-    "babel-core": "^7.0.0-bridge",
-    "babel-jest": "^23.6.0",
-    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "babel-jest": "^24.1.0",
     "babel-plugin-istanbul": "^5.1.0",
     "babel-plugin-rewire": "^1.2.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "babel-template": "^6.26.0",
-    "babel-types": "^6.26.0",
     "chalk": "^2.4.1",
     "commander": "^2.18.0",
     "docdash": "^1.0.2",
@@ -150,7 +146,7 @@
     "eslint-plugin-html": "5.0.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jasmine": "^2.10.1",
-    "eslint-plugin-jest": "^22.1.0",
+    "eslint-plugin-jest": "^22.3.0",
     "gettext-extractor": "^3.3.2",
     "gettext-extractor-vue": "^4.0.1",
     "graphql-tag": "^2.10.0",
@@ -158,8 +154,8 @@
     "jasmine-core": "^2.9.0",
     "jasmine-diff": "^0.1.3",
     "jasmine-jquery": "^2.1.1",
-    "jest": "^23.6.0",
-    "jest-junit": "^5.2.0",
+    "jest": "^24.1.0",
+    "jest-junit": "^6.3.0",
     "jsdoc": "^3.5.5",
     "jsdoc-vue": "^1.0.0",
     "karma": "^3.0.0",
@@ -177,10 +173,13 @@
     "stylelint": "^9.10.1",
     "stylelint-config-recommended": "^2.1.0",
     "stylelint-scss": "^3.5.3",
-    "vue-jest": "^3.0.2",
+    "vue-jest": "^4.0.0-beta.2",
     "webpack-dev-server": "^3.1.14",
     "yarn-deduplicate": "^1.1.0"
   },
+  "resolutions": {
+    "vue-jest/ts-jest": "24.0.0"
+  },
   "engines": {
     "node": ">=8.10.0",
     "yarn": "^1.10.0"