Build: Upgrade Jest to version 28

.circleci/config.yml

@@ -377,7 +377,7 @@ jobs:
           name: Test
           command: |
             cd code
-            yarn test --coverage --ci
+            yarn test --coverage --ci --runInBand
       - store_test_results:
           path: code/junit.xml
       - persist_to_workspace:

code/addons/a11y/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/actions/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/backgrounds/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/controls/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/docs/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/docs/package.json

@@ -56,7 +56,7 @@
     "./angular": "./angular/index.js",
     "./angular/index.js": "./angular/index.js",
     "./web-components/index.js": "./web-components/index.js",
-    "./jest-transform-mdx.js": "./jest-transform-mdx.js",
+    "./jest-transform-mdx": "./jest-transform-mdx.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -85,7 +85,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@jest/transform": "^26.6.2",
+    "@jest/transform": "^28.0.0",
     "@mdx-js/react": "^2.1.5",
     "@storybook/blocks": "7.0.0-alpha.49",
     "@storybook/components": "7.0.0-alpha.49",

code/addons/essentials/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/essentials/package.json

@@ -129,7 +129,6 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@storybook/vue": "7.0.0-alpha.49",
-    "@types/jest": "^26.0.16",
     "typescript": "~4.6.3"
   },
   "peerDependencies": {

code/addons/highlight/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/interactions/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/jest/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/links/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/measure/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/outline/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/storyshots/jest.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  snapshotSerializers: [...baseConfig.snapshotSerializers, 'enzyme-to-json/serializer'],
+  transform: {
+    ...baseConfig.transform,
+    '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
+  },
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/storyshots/storyshots-core/package.json

@@ -37,7 +37,7 @@
     "storybook": "yarn sb dev -p 6006"
   },
   "dependencies": {
-    "@jest/transform": "^26.6.2",
+    "@jest/transform": "^28.0.0",
     "@storybook/addons": "7.0.0-alpha.49",
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
     "@storybook/client-api": "7.0.0-alpha.49",
@@ -46,14 +46,13 @@
     "@storybook/core-webpack": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
     "@types/glob": "^7.1.3",
-    "@types/jest": "^26.0.16",
     "@types/jest-specific-snapshot": "^0.5.3",
     "core-js": "^3.8.2",
     "glob": "^7.1.6",
     "global": "^4.4.0",
-    "jest-specific-snapshot": "^4.0.0",
+    "jest-specific-snapshot": "^6.0.0",
     "preact-render-to-string": "^5.1.19",
-    "pretty-format": "^26.6.2",
+    "pretty-format": "^28.0.0",
     "react-test-renderer": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "read-pkg-up": "^7.0.1",
     "ts-dedent": "^2.0.0"

code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts

@@ -4,33 +4,33 @@ const target = new Stories2SnapsConverter();
 
 describe('getSnapshotFileName', () => {
   it('fileName is provided - snapshot is stored in __snapshots__ dir', () => {
-    const context = { fileName: 'foo.js' };
+    const context = { fileName: 'foo.js', kind: 'kind' };
 
-    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 
-    expect(platformAgnosticResult).toBe('__snapshots__/foo.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('__snapshots__/foo.storyshot');
   });
 
   it('fileName with multiple extensions is provided - only the last extension is replaced', () => {
-    const context = { fileName: 'foo.web.stories.js' };
+    const context = { fileName: 'foo.web.stories.js', kind: 'kind' };
 
-    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 
-    expect(platformAgnosticResult).toBe('__snapshots__/foo.web.stories.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('__snapshots__/foo.web.stories.storyshot');
   });
 
   it('fileName with dir is provided - __snapshots__ dir is created inside another dir', () => {
-    const context = { fileName: 'test/foo.js' };
+    const context = { fileName: 'test/foo.js', kind: 'kind' };
 
-    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 
-    expect(platformAgnosticResult).toBe('test/__snapshots__/foo.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('test/__snapshots__/foo.storyshot');
   });
 });
 

code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts

@@ -29,7 +29,15 @@ export class Stories2SnapsConverter {
     const { dir, name } = path.parse(fileName);
     const { snapshotsDirName, snapshotExtension } = this.options;
 
-    return path.format({ dir: path.join(dir, snapshotsDirName), name, ext: snapshotExtension });
+    // Convert to absolute path, in case jest is not running in CWD,
+    // else it will create snapshots with the wrong path
+    const absDir = path.isAbsolute(dir) ? dir : path.resolve(dir);
+
+    return path.format({
+      dir: path.join(absDir, snapshotsDirName),
+      name,
+      ext: snapshotExtension,
+    });
   }
 
   getSnapshotFileName(context: { fileName?: string; kind: any }) {

code/addons/storysource/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/toolbars/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/viewport/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/frameworks/angular/jest.config.js

@@ -1,5 +1,12 @@
+const path = require('path');
+
 module.exports = {
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
   preset: 'jest-preset-angular',
   setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
-  transformIgnorePatterns: ['^.+\\.js$'],
+  transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid)'],
+  snapshotFormat: {
+    escapeString: true,
+    printBasicPrototype: true,
+  },
 };

code/frameworks/angular/package.json

@@ -81,9 +81,9 @@
     "@types/rimraf": "^3.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
-    "jest": "^27.5.1",
+    "jest": "^28.0.0",
     "jest-preset-angular": "^12.0.0",
-    "jest-specific-snapshot": "^5.0.0",
+    "jest-specific-snapshot": "^6.0.0",
     "rimraf": "^3.0.2",
     "tmp": "^0.2.1",
     "typescript": "~4.6.3",

code/frameworks/angular/setup-jest.ts

@@ -1,4 +1,12 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'jest-preset-angular/setup-jest';
 
+import { webcrypto } from 'node:crypto';
+
+Object.defineProperty(window, 'crypto', {
+  get() {
+    return webcrypto;
+  },
+});
+
 global.EventSource = class {} as any;