Enable coverage properly

.github/workflows/ci.yml

@@ -36,7 +36,7 @@ jobs:
         run: pnpm exec playwright install chromium --with-deps
 
       - name: Run vitest
-        run: pnpm run test run --coverage
+        run: pnpm exec vitest run --coverage
 
       - name: Upload coverage reports to Codecov
         uses: codecov/[email protected]

.storybook-vite/preview.tsx

@@ -8,6 +8,9 @@ initialize({ onUnhandledRequest: 'bypass', quiet: true })
 
 const preview: Preview = {
   parameters: {
+    react: {
+      rsc: true,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/main.ts

@@ -12,9 +12,6 @@ const config: StorybookConfig = {
     name: '@storybook/nextjs',
     options: {},
   },
-  features: {
-    experimentalRSC: true,
-  },
   staticDirs: ['../public'],
 }
 export default config

.storybook/preview.tsx

@@ -8,6 +8,9 @@ initialize({ onUnhandledRequest: 'bypass', quiet: true })
 
 const preview: Preview = {
   parameters: {
+    react: {
+      rsc: true,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/vitest.setup.ts

@@ -1,10 +1,7 @@
 import { beforeAll } from 'vitest'
 import { setProjectAnnotations } from '@storybook/nextjs'
-import * as rscAnnotations from '@storybook/react/dist/entry-preview-rsc.mjs'
 import * as projectAnnotations from './preview'
-// promise with resolveres polyfill
-import '@ungap/with-resolvers'
 
-const annotations = setProjectAnnotations([projectAnnotations, rscAnnotations])
+const annotations = setProjectAnnotations(projectAnnotations)
 
 beforeAll(annotations.beforeAll!)

app/note/[id]/page.stories.tsx

@@ -52,10 +52,6 @@ type Story = StoryObj<typeof meta>
 export const LoggedIn: Story = {
   async beforeEach() {
     cookies().set(userCookieKey, await createUserCookie('storybookjs'))
-
-    return () => {
-      cookies().delete(userCookieKey)
-    }
   },
 }
 
@@ -81,15 +77,14 @@ export const LoginShouldGetOAuthTokenAndSetCookie: Story = {
       ],
     },
   },
-  beforeEach() {
+  beforeEach() {},
+  play: async ({ mount }) => {
     // Point the login implementation to the endpoint github would have redirected too.
     login.mockImplementation(async () => {
-      const absoluteUrl = new URL('/auth?code=storybookjs', 'http://localhost').toString();
-      return await auth.GET(new Request(absoluteUrl))
+      const absoluteUrl = new URL('/auth?code=storybookjs', 'http://localhost')
+      return await auth.GET(new Request(absoluteUrl.toString()))
     })
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
+    const canvas = await mount()
     await expect(cookies().get(userCookieKey)?.value).toBeUndefined()
     await userEvent.click(
       await canvas.findByRole('menuitem', { name: /login to add/i }),

package.json

@@ -83,6 +83,7 @@
     "@types/sanitize-html": "^2.11.0",
     "@ungap/with-resolvers": "^0.1.0",
     "@vitest/browser": "^2.0.4",
+    "@vitest/coverage-istanbul": "^2.0.5",
     "chromatic": "^11.3.0",
     "concurrently": "^8.2.2",
     "dotenv-cli": "^7.4.1",