Skip to content

Commit a37e03c

Browse files
committed
fix: storybook, babel, jest and msw synergy
HCRC-178. 1. Install a new storybook (to fix critical security issues reported by Dependabot). Used `npx storybook@latest upgrade` to run an automated migration tool. 2. Storybook upgrade and migration resulted in some type issues and issues starting the storybook. Export clauses needed "type" addition to the statement when the re-exported object was a type. 3. MSW needed an update in order to fix the Storybook issues. Upgraded MSW and migrated the old mocks to support new syntax and rules. 4. Some new linting issues and deprecation warnings appeared and also the JEST environment needed some reconfiguration. Jest now had some problems with JSDom / ESM overlapping in same project. Fixed the type issues. 5. In order to fix the Jest environment, babel needed some reconfiguration.
1 parent 5e7fd28 commit a37e03c

46 files changed

Lines changed: 769 additions & 508 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.babelrc

Lines changed: 0 additions & 12 deletions
This file was deleted.

.storybook/main.js

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,27 @@ module.exports = {
88
return config;
99
},
1010

11-
addons: ['@storybook/addon-a11y', '@storybook/addon-links', {
12-
name: '@storybook/preset-scss',
13-
options: {
14-
cssLoaderOptions: {
15-
modules: {
16-
localIdentName: '[name]__[local]--[hash:base64:5]',
11+
addons: [
12+
'@storybook/addon-a11y',
13+
'@storybook/addon-links',
14+
{
15+
name: '@storybook/preset-scss',
16+
options: {
17+
cssLoaderOptions: {
18+
modules: {
19+
localIdentName: '[name]__[local]--[hash:base64:5]',
20+
},
1721
},
18-
},
19-
sassLoaderOptions: {
20-
sassOptions: {
21-
includePaths: [path.join(__dirname, '..', 'src/common/styles')],
22+
sassLoaderOptions: {
23+
sassOptions: {
24+
includePaths: [path.join(__dirname, '..', 'src/common/styles')],
25+
},
2226
},
2327
},
2428
},
25-
}, '@storybook/addon-webpack5-compiler-babel', '@storybook/addon-docs'],
29+
'@storybook/addon-webpack5-compiler-babel',
30+
'@storybook/addon-docs',
31+
],
2632

2733
framework: {
2834
name: '@storybook/react-webpack5',

.storybook/preview.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const parameters = {
1616
},
1717
},
1818
viewport: {
19-
options: INITIAL_VIEWPORTS
19+
options: INITIAL_VIEWPORTS,
2020
},
2121
};
2222

@@ -30,6 +30,6 @@ export const tags = ['autodocs', 'autodocs'];
3030
export const initialGlobals = {
3131
viewport: {
3232
value: 'extraSmall',
33-
isRotated: false
34-
}
33+
isRotated: false,
34+
},
3535
};

README.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ The general requirements for new Component development:
4444

4545
### Available scripts
4646

47-
4847
| Name | Purpose | Useful Options |
4948
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
5049
| `yarn dev` | Starts storybook environment that can be used for developing components. | |
@@ -62,7 +61,6 @@ The general requirements for new Component development:
6261

6362
**NOTE: To manually publish a new version to the NPM, you will need the credentials that can be found from the City of Helsinki Culture and Leisure's Vault-service.**
6463

65-
6664
### Development environments
6765

6866
You can use docker local environment for development:

babel.config.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = {
2+
presets: [
3+
'@babel/preset-env',
4+
// It's also a good practice to set the new JSX runtime
5+
['@babel/preset-react', { runtime: 'automatic' }],
6+
'@babel/preset-typescript',
7+
],
8+
env: {
9+
test: {
10+
plugins: ['@babel/plugin-transform-runtime'],
11+
},
12+
},
13+
};

jest-setup.ts

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,69 @@
1-
// eslint-disable-next-line import/no-extraneous-dependencies
21
import '@testing-library/jest-dom';
3-
4-
// eslint-disable-next-line import/no-extraneous-dependencies
52
import { toHaveNoViolations } from 'jest-axe';
6-
// eslint-disable-next-line import/no-extraneous-dependencies
73
import fetchMock from 'jest-fetch-mock';
4+
import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev';
5+
6+
function ignoreConsoleWarnings() {
7+
// Store the original console.warn
8+
const originalWarn = console.warn;
9+
10+
// A list of warning messages to completely ignore
11+
const warningsToIgnore = [
12+
'[%s]: `%s` is deprecated and will be removed in Apollo Client 4.0. %s cache.diff canonizeResults Please remove this option.',
13+
];
14+
15+
// Override console.warn
16+
console.warn = (...args) => {
17+
// Check if the warning message includes any of our ignored strings
18+
const shouldIgnore = warningsToIgnore.some((ignoredMsg) =>
19+
args.join(' ').includes(ignoredMsg),
20+
);
21+
22+
// If it's one we want to ignore, do nothing (return early)
23+
if (shouldIgnore) {
24+
return;
25+
}
26+
27+
// For all other warnings, call the original console.warn
28+
originalWarn.apply(console, args);
29+
};
30+
}
31+
32+
function ignoreConsoleErrors() {
33+
// Store the original console.error
34+
const originalError = console.error;
35+
36+
// A list of error messages to completely ignore
37+
const errorsToIgnore = [
38+
'Error: Could not parse CSS stylesheet', // JSDOM cannot understand stylesheets generated by HDS-React.
39+
];
40+
41+
// Override console.warn
42+
console.error = (...args) => {
43+
// Check if the error message includes any of our ignored strings
44+
const shouldIgnore = errorsToIgnore.some((ignoredMsg) =>
45+
args.join(' ').includes(ignoredMsg),
46+
);
47+
48+
// If it's one we want to ignore, do nothing (return early)
49+
if (shouldIgnore) {
50+
return;
51+
}
52+
// For all other warnings, call the original console.warn
53+
originalError.apply(console, args);
54+
};
55+
}
56+
57+
ignoreConsoleWarnings();
58+
ignoreConsoleErrors();
859

960
fetchMock.enableMocks();
1061

1162
// Extend except with jest-axe
1263
expect.extend(toHaveNoViolations);
64+
65+
if (process.env.NODE_ENV !== 'production') {
66+
// Adds messages only in a dev environment
67+
loadDevMessages();
68+
loadErrorMessages();
69+
}

jest.config.js

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,23 @@ module.exports = {
1212
// return a mock css module
1313
'\\.(css|less|scss|sss|styl)$': 'identity-obj-proxy',
1414
'^lodash-es$': 'lodash',
15+
// This forces Jest to use the correct CommonJS version of uuid
16+
// instead of the ESM one hds-react is trying to import.
17+
'^uuid$': require.resolve('uuid'),
1518
},
1619

1720
setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
1821

19-
// The test environment that will be used for testing
20-
// We have react-script as a dependency for our storybook build. This
21-
// package forces our jsdom version into an older one, regardless of
22-
// jest being at version 26. To circumvent, we are telling jest to
23-
// use jsdom sixteen here.
24-
testEnvironment: 'jest-environment-jsdom',
22+
// Fix the issue "Request/Response/TextEncoder is not defined (Jest)". See more: https://mswjs.io/docs/migrations/1.x-to-2.x#frequent-issues.
23+
testEnvironment: 'jest-fixed-jsdom',
24+
25+
transform: {
26+
'^.+\\.(t|j)sx?$': 'babel-jest',
27+
},
28+
transformIgnorePatterns: [
29+
'/node_modules/(?!(hds-react|uuid|until-async)/)',
30+
'\\.pnp\\.[^\\/]+$',
31+
],
2532

2633
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
2734
testPathIgnorePatterns: ['<rootDir>/(build|dist|temp)/'],

package.json

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,13 @@
7474
"@rollup/plugin-json": "^6.1.0",
7575
"@rollup/plugin-node-resolve": "^15.3.0",
7676
"@storybook/addon-a11y": "^10.0.4",
77+
"@storybook/addon-docs": "^10.0.4",
7778
"@storybook/addon-links": "^10.0.4",
7879
"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
7980
"@storybook/preset-scss": "^1.0.3",
8081
"@storybook/react-webpack5": "^10.0.4",
8182
"@storybook/test-runner": "^0.24.1",
83+
"@testing-library/dom": "^10.4.1",
8284
"@testing-library/jest-dom": "^6.6.3",
8385
"@testing-library/react": "^16.0.1",
8486
"@testing-library/user-event": "^14.5.2",
@@ -91,6 +93,7 @@
9193
"@typescript-eslint/eslint-plugin": "^8.14.0",
9294
"@typescript-eslint/parser": "^8.14.0",
9395
"axe-playwright": "^2.0.3",
96+
"babel-jest": "^30.2.0",
9497
"babel-loader": "^9.2.1",
9598
"cross-env": "^7.0.3",
9699
"crypto-browserify": "^3.12.1",
@@ -110,7 +113,6 @@
110113
"jest": "^29.7.0",
111114
"jest-axe": "^9.0.0",
112115
"jest-fetch-mock": "^3.0.3",
113-
"msw": "^1.1.0",
114116
"msw-storybook-addon": "^2.0.6",
115117
"postcss": "^8.4.49",
116118
"postcss-scss": "^4.0.9",
@@ -132,8 +134,7 @@
132134
"style-loader": "^4.0.0",
133135
"tslib": "^2.8.1",
134136
"typescript": "^5.6.3",
135-
"webpack": "^5.96.1",
136-
"@storybook/addon-docs": "^10.0.4"
137+
"webpack": "^5.96.1"
137138
},
138139
"dependencies": {
139140
"classnames": "^2.5.1",
@@ -143,7 +144,9 @@
143144
"html-react-parser": "^4.2.9",
144145
"isomorphic-dompurify": "^2.31.0",
145146
"jest-environment-jsdom": "^30.2.0",
146-
"lodash-es": "^4.17.21"
147+
"jest-fixed-jsdom": "^0.0.10",
148+
"lodash-es": "^4.17.21",
149+
"msw": "^2.11.6"
147150
},
148151
"msw": {
149152
"workerDirectory": "public"

0 commit comments

Comments
 (0)