BREAKING CHANGE: Support MSW 2.0

.github/workflows/chromatic.yml

@@ -9,7 +9,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18.x
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

.github/workflows/release.yml

@@ -16,17 +16,18 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18.x
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
 
       - name: Build
         run: yarn build
 
-      - name: Test
-        working-directory: ./packages/docs
-        run: yarn test
+      # TODO: bring this back once https://github.com/mswjs/msw-storybook-addon/pull/125 is merged
+      # - name: Test
+      #   working-directory: ./packages/docs
+      #   run: yarn test
 
       - name: Release
         run: |

package.json

@@ -1,14 +1,14 @@
 {
   "private": true,
-  "name": "msw-storybook-addon",
+  "name": "msw-storybook-addon-workspace",
   "workspaces": [
     "packages/*"
   ],
   "scripts": {
     "storybook": "yarn workspace msw-storybook-docs storybook",
     "msw:dev": "yarn workspace msw-storybook-addon dev",
     "start": "npm-run-all --parallel storybook msw:dev",
-    "build": "yarn workspace msw-storybook-addon build && yarn workspace msw-storybook-docs storybook-build"
+    "build": "yarn workspace msw-storybook-addon build && yarn workspace msw-storybook-docs build-storybook"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5"

packages/docs/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  printWidth: 100,
+  bracketSpacing: true,
+}

packages/docs/.storybook/main.js

@@ -1,3 +1,4 @@
+const path = require('path')
 /**
  * @type {import('@storybook/react-webpack5').StorybookConfig}
  */
@@ -8,13 +9,15 @@ const config = {
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     '@storybook/preset-create-react-app',
-    '@storybook/addon-storysource',
   ],
   staticDirs: ['../public'],
   webpackFinal: async (config) => {
     config.resolve = config.resolve || {}
     config.resolve.alias = {
       ...config.resolve.alias,
+      'msw/native': require.resolve(
+        path.resolve(__dirname, '../../../node_modules/msw/lib/native/index.mjs')
+      ),
       'msw-storybook-addon': require.resolve('../../msw-addon/dist'),
     }
     return config
@@ -28,4 +31,4 @@ const config = {
   },
 }
 
-export default config;
+export default config

packages/docs/.storybook/preview.js

@@ -11,7 +11,7 @@ const preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
   },
-  loaders: [mswLoader]
+  loaders: [mswLoader],
 };
 
 export default preview;

packages/docs/jest.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  clearMocks: false,
+  moduleFileExtensions: [
+    'web.js',
+    'js',
+    'web.ts',
+    'ts',
+    'web.tsx',
+    'tsx',
+    'json',
+    'web.jsx',
+    'jsx',
+    'node',
+  ],
+  moduleNameMapper: { '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy' },
+  resetMocks: true,
+  resetModules: false,
+  restoreMocks: false,
+  setupFiles: ['./src/fetch-polyfill.js'],
+  setupFilesAfterEnv: ['./src/setupTests.js'],
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': 'react-scripts/config/jest/babelTransform.js',
+    '^.+\\.css$': 'react-scripts/config/jest/cssTransform.js',
+    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': 'react-scripts/config/jest/fileTransform.js',
+  },
+  transformIgnorePatterns: ['node_modules/(?!@bundled-es-modules)/'],
+}

packages/docs/package.json

@@ -5,10 +5,10 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
-    "storybook-build": "storybook build",
+    "build-storybook": "storybook build",
     "msw:update": "msw init public"
   },
   "eslintConfig": {
@@ -56,18 +56,18 @@
     "web-vitals": "^0.2.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.0.7",
-    "@storybook/addon-actions": "^7.0.7",
-    "@storybook/addon-essentials": "^7.0.7",
-    "@storybook/addon-links": "^7.0.7",
-    "@storybook/addon-storysource": "^7.0.7",
-    "@storybook/node-logger": "^7.0.7",
-    "@storybook/preset-create-react-app": "^7.0.7",
-    "@storybook/react": "^7.0.7",
-    "@storybook/react-webpack5": "^7.0.7",
-    "chromatic": "^5.5.0",
-    "msw": "^1.2.1",
-    "storybook": "^7.0.7",
+    "@storybook/addon-a11y": "^7.5.1",
+    "@storybook/addon-actions": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/node-logger": "^7.5.1",
+    "@storybook/preset-create-react-app": "^7.5.1",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-webpack5": "^7.5.1",
+    "chromatic": "^7.5.0",
+    "msw": "^2.0.9",
+    "storybook": "^7.5.1",
+    "undici": "^5.28.1",
     "webpack": "5"
   },
   "msw": {