APM-specific Jest configuration (#67858)

Update the x-pack `createJestConfig` function to take the `rootDir` as an argument, which allows for easier overriding of the Jest configuration for a specific directory.

Previously we would run Jest in development from the x-pack directory by running something like:

```
node scripts/jest.js --testPathPattern=plugins/apm --watch
```

Currently (for me anyway) this is failing with:

```
Error: EMFILE: too many open files, watch
    at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:123:28)
```

and it would sometimes not correctly test only the changed files when a change in APM was made. It was also difficult to configure correctly with the [VSCode Jest extension](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest).

Add a jest.config.js for APM. This makes running with `--watch` better about which files it chooses to re-run and makes the VSCode extension work (including coverage mapping) with minimal configuration.

x-pack/dev-tools/jest/create_jest_config.js

@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) {
+export function createJestConfig({ kibanaDirectory, rootDir, xPackKibanaDirectory }) {
   const fileMockPath = `${kibanaDirectory}/src/dev/jest/mocks/file_mock.js`;
   return {
-    rootDir: xPackKibanaDirectory,
+    rootDir,
     roots: ['<rootDir>/plugins', '<rootDir>/legacy/plugins', '<rootDir>/legacy/server'],
     moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
     moduleNameMapper: {
@@ -44,15 +44,15 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) {
       '!**/plugins/apm/e2e/**',
     ],
     coveragePathIgnorePatterns: ['.*\\.d\\.ts'],
-    coverageDirectory: '<rootDir>/../target/kibana-coverage/jest',
+    coverageDirectory: `${kibanaDirectory}/target/kibana-coverage/jest`,
     coverageReporters: !!process.env.CODE_COVERAGE ? ['json'] : ['html'],
     setupFiles: [
       `${kibanaDirectory}/src/dev/jest/setup/babel_polyfill.js`,
-      `<rootDir>/dev-tools/jest/setup/polyfills.js`,
-      `<rootDir>/dev-tools/jest/setup/enzyme.js`,
+      `${xPackKibanaDirectory}/dev-tools/jest/setup/polyfills.js`,
+      `${xPackKibanaDirectory}/dev-tools/jest/setup/enzyme.js`,
     ],
     setupFilesAfterEnv: [
-      `<rootDir>/dev-tools/jest/setup/setup_test.js`,
+      `${xPackKibanaDirectory}/dev-tools/jest/setup/setup_test.js`,
       `${kibanaDirectory}/src/dev/jest/setup/mocks.js`,
       `${kibanaDirectory}/src/dev/jest/setup/react_testing_library.js`,
     ],

x-pack/dev-tools/jest/index.js

@@ -14,6 +14,7 @@ export function runJest() {
   const config = JSON.stringify(
     createJestConfig({
       kibanaDirectory: resolve(__dirname, '../../..'),
+      rootDir: resolve(__dirname, '../..'),
       xPackKibanaDirectory: resolve(__dirname, '../..'),
     })
   );

x-pack/plugins/apm/dev_docs/vscode_setup.md

@@ -1,8 +1,8 @@
-### Visual Studio Code
+# Visual Studio Code
 
 When using [Visual Studio Code](https://code.visualstudio.com/) with APM it's best to set up a [multi-root workspace](https://code.visualstudio.com/docs/editor/multi-root-workspaces) and add the `x-pack/plugins/apm` directory, the `x-pack` directory, and the root of the Kibana repository to the workspace. This makes it so you can navigate and search within APM and use the wider workspace roots when you need to widen your search.
 
-#### Using the Jest extension
+## Using the Jest extension
 
 The [vscode-jest extension](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) is a good way to run your Jest tests inside the editor.
 
@@ -22,31 +22,21 @@ If you have a workspace configured as described above you should have:
 "jest.disabledWorkspaceFolders": ["kibana", "x-pack"]
 ```
 
-in your Workspace settings, and:
-
-```json
-"jest.pathToJest": "node scripts/jest.js --testPathPattern=plugins/apm",
-"jest.rootPath": "../../.."
-```
-
-in the settings for the APM folder.
-
-#### Jest debugging
+## Jest debugging
 
 To make the [VSCode debugger](https://vscode.readthedocs.io/en/latest/editor/debugging/) work with Jest (you can set breakpoints in the code and tests and use the VSCode debugger) you'll need the [Node Debug extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.node-debug2) installed and can set up a launch configuration like:
 
 ```json
 {
   "type": "node",
-  "name": "APM Jest",
+  "name": "vscode-jest-tests",
   "request": "launch",
-  "args": ["--runInBand", "--testPathPattern=plugins/apm"],
-  "cwd": "${workspaceFolder}/../../..",
-  "console": "internalConsole",
-  "internalConsoleOptions": "openOnSessionStart",
+  "args": ["--runInBand"],
+  "cwd": "${workspaceFolder}",
+  "console": "integratedTerminal",
+  "internalConsoleOptions": "neverOpen",
   "disableOptimisticBPs": true,
-  "program": "${workspaceFolder}/../../../scripts/jest.js",
-  "runtimeVersion": "10.15.2"
+  "program": "${workspaceFolder}/../../../node_modules/jest/bin/jest"
 }
 ```
 

x-pack/plugins/apm/jest.config.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// This is an APM-specific Jest configuration which overrides the x-pack
+// configuration. It's intended for use in development and does not run in CI,
+// which runs the entire x-pack suite. Run `npx jest`.
+
+require('../../../src/setup_node_env');
+
+const { createJestConfig } = require('../../dev-tools/jest/create_jest_config');
+const { resolve } = require('path');
+
+const rootDir = resolve(__dirname, '.');
+const xPackKibanaDirectory = resolve(__dirname, '../..');
+const kibanaDirectory = resolve(__dirname, '../../..');
+
+const jestConfig = createJestConfig({
+  kibanaDirectory,
+  rootDir,
+  xPackKibanaDirectory,
+});
+
+module.exports = {
+  ...jestConfig,
+  reporters: ['default'],
+  roots: [`${rootDir}/common`, `${rootDir}/public`, `${rootDir}/server`],
+  collectCoverage: true,
+  collectCoverageFrom: [
+    '**/*.{js,jsx,ts,tsx}',
+    '!**/{__test__,__snapshots__,__examples__,integration_tests,tests}/**',
+    '!**/*.test.{js,ts,tsx}',
+    '!**/dev_docs/**',
+    '!**/e2e/**',
+    '!**/scripts/**',
+    '!**/target/**',
+    '!**/typings/**',
+    '!**/mocks/**',
+  ],
+  coverageDirectory: `${rootDir}/target/coverage/jest`,
+  coverageReporters: ['html'],
+};

x-pack/plugins/apm/readme.md

@@ -39,18 +39,26 @@ _Starts Kibana (:5701), APM Server (:8201) and Elasticsearch (:9201). Ingests sa
 
 ### Unit testing
 
-Note: Run the following commands from `kibana/x-pack`.
+Note: Run the following commands from `kibana/x-pack/plugins/apm`.
 
 #### Run unit tests
 
 ```
-node scripts/jest.js plugins/apm --watch
+npx jest --watch
 ```
 
 #### Update snapshots
 
 ```
-node scripts/jest.js plugins/apm --updateSnapshot
+npx jest --updateSnapshot
+```
+
+#### Coverage
+
+HTML coverage report can be found in target/coverage/jest after tests have run.
+
+```
+open target/coverage/jest/index.html
 ```
 
 ### Functional tests