Setup Jest test environment

.babelrc.js

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

.eslintignore

@@ -2,6 +2,7 @@
 /config/
 /builds/
 /coverage/
+/coverage-frontend/
 /coverage-javascript/
 /node_modules/
 /public/

.gitignore

@@ -78,5 +78,5 @@ eslint-report.html
 /plugins/*
 /.gitlab_pages_secret
 package-lock.json
-/junit_rspec.xml
-/junit_karma.xml
+/junit_*.xml
+/coverage-frontend/

.gitlab-ci.yml

@@ -698,6 +698,32 @@ karma:
     reports:
       junit: junit_karma.xml
 
+jest:
+  <<: *dedicated-no-docs-and-no-qa-pull-cache-job
+  <<: *use-pg
+  dependencies:
+  - compile-assets
+  - setup-test-env
+  script:
+    - scripts/gitaly-test-spawn
+    - date
+    - bundle exec rake karma:fixtures
+    - date
+    - yarn jest --ci --coverage
+  artifacts:
+    name: coverage-frontend
+    expire_in: 31d
+    when: always
+    paths:
+    - coverage-frontend/
+    - junit_jest.xml
+    reports:
+      junit: junit_jest.xml
+  cache:
+    key: jest
+    paths:
+      - tmp/jest/jest/
+
 code_quality:
   <<: *dedicated-no-docs-no-db-pull-cache-job
   image: docker:stable

config/jest.config.js

+/* eslint-disable filenames/match-regex */
+
+const reporters = ['default'];
+
+if (process.env.CI) {
+  reporters.push([
+    'jest-junit',
+    {
+      output: './junit_jest.xml',
+    },
+  ]);
+}
+
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  testMatch: ['<rootDir>/spec/frontend/**/*_spec.js'],
+  moduleNameMapper: {
+    '^~(.*)$': '<rootDir>/app/assets/javascripts$1',
+  },
+  collectCoverageFrom: ['<rootDir>/app/assets/javascripts/**/*.{js,vue}'],
+  coverageDirectory: '<rootDir>/coverage-frontend/',
+  coverageReporters: ['json', 'lcov', 'text-summary', 'clover'],
+  cacheDirectory: '<rootDir>/tmp/cache/jest',
+  modulePathIgnorePatterns: ['<rootDir>/.yarn-cache/'],
+  reporters,
+  rootDir: '..', // necessary because this file is in the config/ subdirectory
+};

doc/development/new_fe_guide/development/testing.md

@@ -6,9 +6,15 @@ Tests relevant for frontend development can be found at two places:
   - [frontend unit tests](#frontend-unit-tests)
   - [frontend component tests](#frontend-component-tests)
   - [frontend integration tests](#frontend-integration-tests)
+- `spec/frontend/` which are run by Jest and contain
+  - [frontend unit tests](#frontend-unit-tests)
+  - [frontend component tests](#frontend-component-tests)
+  - [frontend integration tests](#frontend-integration-tests)
 - `spec/features/` which are run by RSpec and contain
   - [feature tests](#feature-tests)
 
+All tests in `spec/javascripts/` will eventually be migrated to `spec/frontend/` (see also [#53757]).
+
 In addition there were feature tests in `features/` run by Spinach in the past.
 These have been removed from our codebase in May 2018 ([#23036](https://gitlab.com/gitlab-org/gitlab-ce/issues/23036)).
 
@@ -17,6 +23,8 @@ See also:
 - [old testing guide](../../testing_guide/frontend_testing.html)
 - [notes on testing Vue components](../../fe_guide/vue.html#testing-vue-components)
 
+[#53757]: https://gitlab.com/gitlab-org/gitlab-ce/issues/53757
+
 ## Frontend unit tests
 
 Unit tests are on the lowest abstraction level and typically test functionality that is not directly perceivable by a user.

package.json

@@ -6,6 +6,7 @@
     "eslint": "eslint --max-warnings 0 --report-unused-disable-directives --ext .js,.vue .",
     "eslint-fix": "eslint --max-warnings 0 --report-unused-disable-directives --ext .js,.vue --fix .",
     "eslint-report": "eslint --max-warnings 0 --ext .js,.vue --format html --output-file ./eslint-report.html --no-inline-config .",
+    "jest": "BABEL_ENV=jest jest --config=config/jest.config.js",
     "karma": "BABEL_ENV=${BABEL_ENV:=karma} karma start --single-run true config/karma.config.js",
     "karma-coverage": "BABEL_ENV=coverage karma start --single-run true config/karma.config.js",
     "karma-start": "BABEL_ENV=karma karma start config/karma.config.js",
@@ -118,17 +119,23 @@
     "@gitlab/eslint-config": "^1.2.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-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",
     "eslint": "~5.6.0",
+    "eslint-import-resolver-jest": "^2.1.1",
     "eslint-import-resolver-webpack": "^0.10.1",
     "eslint-plugin-html": "4.0.5",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jasmine": "^2.10.1",
+    "eslint-plugin-jest": "^22.1.0",
     "gettext-extractor": "^3.3.2",
     "gettext-extractor-vue": "^4.0.1",
     "graphql-tag": "^2.10.0",
@@ -136,6 +143,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",
     "karma": "^3.0.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage-istanbul-reporter": "^2.0.4",

spec/frontend/.eslintrc.yml

+---
+env:
+  jest/globals: true
+plugins:
+- jest
+settings:
+  import/resolver:
+    jest:
+      jestConfigFile: "config/jest.config.js"

spec/frontend/dummy_spec.js

+it('does nothing', () => {});