migrate docs example to vite (#128)

* migrate docs example to vite * migrate from jest to vitest * add rollup workaround * migrate example to Typescript
mswjs · Apr 16, 2024 · 42db187 · 42db187
1 parent 133be34
commit 42db187
Show file tree

Hide file tree

Showing 49 changed files with 2,481 additions and 6,904 deletions.
diff --git a/.github/workflows/demo-tests.yml b/.github/workflows/demo-tests.yml
@@ -1,7 +1,7 @@
 name: 'Tests for Demos'
 on: push
 jobs:
-  jest:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -10,4 +10,4 @@ jobs:
       - name: Build addon
         run: yarn workspace msw-storybook-addon build
       - name: Test Demos
-        run: yarn workspace msw-storybook-docs test --colors
+        run: yarn workspace msw-storybook-docs test
diff --git a/packages/docs/.env b/packages/docs/.env
diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore
@@ -1,26 +1,28 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# production
-/build
+node_modules
+dist
+dist-ssr
+*.local
 
-# misc
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 *-storybook.log
 
 storybook-static

diff --git a/packages/docs/.storybook/main.js b/packages/docs/.storybook/main.js
diff --git a/packages/docs/.storybook/main.ts b/packages/docs/.storybook/main.ts
@@ -0,0 +1,47 @@
+import { dirname, join } from "path";
+import replace from '@rollup/plugin-replace';
+
+import { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-mdx-gfm"),
+  ],
+
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite") as '@storybook/react-vite',
+    options: {},
+  },
+
+  staticDirs: ["../public"],
+
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        preserveSymlinks: true,
+      },
+      plugins: [
+        // Workaround necessary because of a bug in Vite
+        // They replace the string process.env.NODE_ENV at build time, 
+        // but they don't properly skip replacing globalThis.process.env.NODE_ENV so that graphql check becomes globalThis."development", which is invalid
+        // https://github.com/graphql/graphql-js/issues/3918#issuecomment-1692475931
+        replace({
+          preventAssignment: true,
+          'globalThis.process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        }),
+      ]
+    });
+  },
+};
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+export default config;
diff --git a/packages/docs/.storybook/preview-head.html b/packages/docs/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>
diff --git a/packages/docs/.storybook/preview.js → packages/docs/.storybook/preview.ts b/packages/docs/.storybook/preview.js → packages/docs/.storybook/preview.ts
@@ -1,13 +1,11 @@
+import { Preview } from '@storybook/react'
 import { initialize, mswLoader } from 'msw-storybook-addon';
 
 import '../src/styles.css';
 
 initialize();
 
-/**
- * @type {import('@storybook/react').Preview}
- */
-const preview = {
+const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
   },

diff --git a/packages/docs/index.html b/packages/docs/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/docs/jest.config.js b/packages/docs/jest.config.js
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -2,15 +2,18 @@
   "name": "msw-storybook-docs",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "build": "react-scripts build",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic",
     "eject": "react-scripts eject",
-    "msw:update": "msw init public",
-    "start": "react-scripts start",
-    "storybook": "storybook dev -p 6006",
-    "test": "npx jest"
+    "msw:update": "msw init public"
   },
   "browserslist": {
     "production": [
@@ -24,53 +27,43 @@
       "last 1 safari version"
     ]
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "src/**/*.stories.js"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
   "dependencies": {
     "@apollo/client": "^3.3.6",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
-    "graphql": "^15.4.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "graphql": "16.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-query": "^3.5.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^5.0.1",
-    "urql": "^1.11.4",
-    "web-vitals": "^0.2.4"
+    "urql": "^1.11.4"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@rollup/plugin-replace": "^5.0.5",
     "@storybook/addon-a11y": "^8.0.0",
     "@storybook/addon-actions": "^8.0.0",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-mdx-gfm": "^8.0.0",
     "@storybook/node-logger": "^8.0.0",
     "@storybook/preset-create-react-app": "^8.0.0",
     "@storybook/react": "^8.0.0",
-    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^3.1.0",
     "chromatic": "^11.0.3",
+    "jsdom": "^23.0.0",
     "msw": "^2.0.9",
+    "msw-storybook-addon": "link:../msw-addon",
     "storybook": "^8.0.0",
-    "undici": "^5.28.1",
-    "webpack": "5"
+    "typescript": "^5.3.2",
+    "vite": "^4.1.0",
+    "vitest": "^0.29.2"
   },
   "msw": {
     "workerDirectory": "public"

diff --git a/packages/docs/public/mockServiceWorker.js b/packages/docs/public/mockServiceWorker.js
@@ -2,13 +2,13 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.0.11).
+ * Mock Service Worker (2.2.4).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = 'c5f7f8e188b673ea4e677df7ea3c5a39'
+const INTEGRITY_CHECKSUM = '223d191a56023cd36aa88c802961b911'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 

diff --git a/packages/docs/src/components/FilmCard.jsx → packages/docs/src/components/FilmCard.tsx b/packages/docs/src/components/FilmCard.jsx → packages/docs/src/components/FilmCard.tsx
@@ -1,4 +1,6 @@
-export function FilmCard({ film }) {
+export function FilmCard({
+  film
+}: any) {
   return (
     <article className="film-card">
       <h4 className="film-title">{film.title}</h4>

diff --git a/...ges/docs/src/demos/apollo/App.stories.jsx → ...ges/docs/src/demos/apollo/App.stories.tsx b/...ges/docs/src/demos/apollo/App.stories.jsx → ...ges/docs/src/demos/apollo/App.stories.tsx
diff --git a/packages/docs/src/demos/apollo/App.test.jsx → packages/docs/src/demos/apollo/App.test.tsx b/packages/docs/src/demos/apollo/App.test.jsx → packages/docs/src/demos/apollo/App.test.tsx
@@ -1,13 +1,29 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
+import { vi, afterAll, it, expect } from 'vitest'
 
 import { getServer } from '../../test-utils'
 import * as stories from './App.stories'
 
 const { MockedSuccess, MockedError } = composeStories(stories)
 const server = getServer()
 
+
+afterAll(() => {
+  vi.restoreAllMocks()
+})
+
+it('renders error message if it cannot load the films', async () => {
+  server.use(...MockedError.parameters.msw.handlers)
+  render(<MockedError />)
+
+  const errorMsgNode = await screen.findByText(
+    /could not fetch star wars data/i
+  )
+  expect(errorMsgNode).toBeInTheDocument()
+})
+
 it('renders film cards for each film', async () => {
   server.use(...MockedSuccess.parameters.msw.handlers)
   render(<MockedSuccess />)
@@ -24,13 +40,3 @@ it('renders film cards for each film', async () => {
   expect(headingNodes[1]).toHaveTextContent('Empire Strikes Back')
   expect(headingNodes[2]).toHaveTextContent('Return of the Jedi')
 })
-
-it('renders error message if it cannot load the films', async () => {
-  server.use(...MockedError.parameters.msw.handlers)
-  render(<MockedError />)
-
-  const errorMsgNode = await screen.findByText(
-    /could not fetch star wars data/i
-  )
-  expect(errorMsgNode).toBeInTheDocument()
-})
diff --git a/packages/docs/src/demos/apollo/App.jsx → packages/docs/src/demos/apollo/App.tsx b/packages/docs/src/demos/apollo/App.jsx → packages/docs/src/demos/apollo/App.tsx
@@ -36,9 +36,7 @@ export function App() {
 
   return (
     <div className="films-grid">
-      {films.map((film) => (
-        <FilmCard key={film.episode_id} film={film} />
-      ))}
+      {films.map((film: any) => <FilmCard key={film.episode_id} film={film} />)}
     </div>
   );
 }
diff --git a/...ages/docs/src/demos/axios/App.stories.jsx → ...ages/docs/src/demos/axios/App.stories.tsx b/...ages/docs/src/demos/axios/App.stories.jsx → ...ages/docs/src/demos/axios/App.stories.tsx
diff --git a/packages/docs/src/demos/urql/App.test.jsx → packages/docs/src/demos/axios/App.test.tsx b/packages/docs/src/demos/urql/App.test.jsx → packages/docs/src/demos/axios/App.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
+import { it, expect } from 'vitest'
 
 import { getServer } from '../../test-utils'
 import * as stories from './App.stories'