Tidy up jest configuration (carbon-design-system#862)

* chore: include cli and jest-config packages in automatic upgrades

* chore: rename jest-config package to avoid conflict

* chore: mock two-arg getComputedStyle which jsdom does not implement

* chore: set jsdom as test env

* chore: remove jest from the automatic update reject list

* chore: fix BreadcrumbWithOverflow test for visibility issue

* chore: ensure jest transform can work with new version of babel-jest

* chore: sync up jest-config package versions

jest.config.js

@@ -7,4 +7,4 @@
 
 'use strict';
 
-module.exports = require('jest-config');
+module.exports = require('jest-config-ibm-cloud-cognitive');

package.json

@@ -40,8 +40,8 @@
     "storybook:start": "cd packages/core && yarn start",
     "sync": "carbon-cli sync",
     "upgrade-carbon": "npm-check-updates -su --deep --filter '/carbon/' && yarn",
-    "//upgrade-dependencies": "# don't upgrade carbon (done globally), husky (major change in action), jest (untested)",
-    "upgrade-dependencies": "yarn run-all --concurrency 1 upgrade-dependencies && npm-check-updates -u --reject '/(carbon|^husky$|^jest)/' && yarn",
+    "//upgrade-dependencies": "# don't upgrade carbon (done globally), husky (major change in action)",
+    "upgrade-dependencies": "yarn run-all --concurrency 1 upgrade-dependencies && npm-check-updates -u --reject '/(carbon|^husky$)/' && yarn",
     "upgrade-manual": "sh ./scripts/monorepo-npm-upgrade.sh"
   },
   "devDependencies": {
@@ -53,6 +53,7 @@
     "eslint-config-carbon": "2.2.0",
     "husky": "^4.3.6",
     "jest": "^25.5.4",
+    "jest-config-ibm-cloud-cognitive": "^0.3.12",
     "lerna": "^4.0.0",
     "lint-staged": "^11.0.0",
     "npm-check-updates": "^11.6.0",

packages/cli/package.json

@@ -19,13 +19,18 @@
     "carbon community",
     "carbon for cloud & cognitive"
   ],
-  "dependencies": {
+  "scripts": {
+    "//upgrade-dependencies": "# don't upgrade carbon (done globally)",
+    "upgrade-dependencies": "npm-check-updates -u --color --reject '/(carbon)/'"
+  },
+  "devDependencies": {
     "@commitlint/parse": "^12.1.1",
     "chalk": "^4.1.0",
     "execa": "^5.0.0",
     "fast-glob": "^3.2.5",
     "fs-extra": "^9.1.0",
     "inquirer": "^8.0.0",
+    "npm-check-updates": "^11.6.0",
     "prettier": "^2.2.1",
     "prettier-config-carbon": "^0.4.0",
     "remark": "^13.0.0",

packages/cloud-cognitive/src/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.test.js

@@ -148,7 +148,10 @@ describe(BreadcrumbWithOverflow.displayName, () => {
     // <ul role='menu' /> but default <ul> role of list used for query
     // see https://testing-library.com/docs/queries/byrole/#api
     // const om = screen.getByRole('list');
-    const menuItems = screen.getAllByRole('menuitem'); // expected this to be listitem based on above comment
+    // const menuItems = screen.getAllByRole('menuitem');
+    // use querySelectorAll rather that getAllByRole because the drop-down
+    // never fully appears in jsdom (requires resize handler mocking)
+    const menuItems = document.querySelectorAll('[role="menuitem"]');
     expect(menuItems).toHaveLength(overflowItemsExpected);
     expect(menuItems[0]).toHaveTextContent(breadcrumbContent[1]);
     expect(menuItems[1]).toHaveTextContent(breadcrumbContent[2]);

packages/jest-config/index.js → packages/jest-config-ibm-cloud-cognitive/index.js

@@ -19,6 +19,7 @@ module.exports = {
   setupFiles: [require.resolve('./setup/setupFiles')],
   setupFilesAfterEnv: [require.resolve('./setup/setupFilesAfterEnv')],
   snapshotSerializers: [],
+  testEnvironment: 'jsdom',
   testMatch: [
     '<rootDir>/**/__tests__/**/*.js?(x)',
     '<rootDir>/**/*.(spec|test).js?(x)',

packages/jest-config/package.json → packages/jest-config-ibm-cloud-cognitive/package.json

@@ -1,13 +1,13 @@
 {
-  "name": "jest-config",
+  "name": "jest-config-ibm-cloud-cognitive",
   "private": true,
   "version": "0.3.12",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/carbon-design-system/ibm-cloud-cognitive.git",
-    "directory": "packages/jest-config"
+    "directory": "packages/jest-config-ibm-cloud-cognitive"
   },
   "bugs": "https://github.com/carbon-design-system/ibm-cloud-cognitive/issues",
   "keywords": [
@@ -16,6 +16,13 @@
     "carbon community",
     "carbon for cloud & cognitive"
   ],
+  "scripts": {
+    "//upgrade-dependencies": "# don't upgrade carbon (done globally)",
+    "upgrade-dependencies": "npm-check-updates -u --color --reject '/(carbon)/'"
+  },
+  "devDependencies": {
+    "npm-check-updates": "^11.6.0"
+  },
   "peerDependencies": {
     "jest": "^26.6.3"
   },

packages/jest-config/setup/setupFiles.js → packages/jest-config-ibm-cloud-cognitive/setup/setupFiles.js

@@ -39,3 +39,9 @@ if (global.HTMLElement) {
   // explicitly for `scrollIntoView` via our jest setup.
   Element.prototype.scrollIntoView = jest.fn();
 }
+
+// jsdom does not support the second argument to getComputedStyle, but some
+// components use it, so mock it to just use the first arument and return the
+// computed style for that regardless of a pseudoelement being supplied
+const oldGetComputedStyle = global.getComputedStyle;
+global.getComputedStyle = jest.fn((elt) => oldGetComputedStyle(elt));

packages/jest-config/setup/setupFilesAfterEnv.js → packages/jest-config-ibm-cloud-cognitive/setup/setupFilesAfterEnv.js

@@ -24,7 +24,7 @@ expect.extend({ toBeAccessible, toHaveNoAxeViolations });
 // to address in order for the test suite to pass.
 //
 // By default, we will throw on console.error and console.warn. In CI, we'll
-// also throw on console.log so no extraneous log statements make there way
+// also throw on console.log so no extraneous log statements make their way
 // through.
 //
 // Inspired by the following setup from facebook/react

packages/jest-config-ibm-cloud-cognitive/transform/javascript.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2020, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// babel-jest is changing module pattern, see https://github.com/facebook/jest/issues/11444
+const babelJestMd = require('babel-jest');
+const babelJest = babelJestMd.__esModule ? babelJestMd.default : babelJestMd;
+const babelOptions = require('babel-preset-ibm-cloud-cognitive');
+
+module.exports = babelJest.createTransformer(babelOptions());

packages/security/jest.config.js

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-module.exports = require('jest-config');
+module.exports = require('jest-config-ibm-cloud-cognitive');

packages/security/package.json

@@ -40,8 +40,8 @@
     "test": "run-p test:*",
     "test:js": "jest",
     "test:scss": "bundler check 'src/**/*.scss'",
-    "//upgrade-dependencies": "# don't upgrade carbon (done globally), jest (not tested)",
-    "upgrade-dependencies": "npm-check-updates -u --color --reject '/(carbon|^jest)/'"
+    "//upgrade-dependencies": "# don't upgrade carbon (done globally)",
+    "upgrade-dependencies": "npm-check-updates -u --color --reject '/(carbon)/'"
   },
   "dependencies": {
     "@babel/runtime": "^7.14.0",
@@ -59,7 +59,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "jest": "^25.5.4",
-    "jest-config": "^0.3.12",
+    "jest-config-ibm-cloud-cognitive": "^0.3.12",
     "npm-check-updates": "^11.6.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2"