vite-plugin-react/packages/plugin-rsc/e2e/client-package-resolution.test.ts at 619224bf60ca3e0be8ff53bf0ccdf1dd95d1bdbf · nihgwu/vite-plugin-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import { expect, test } from '@playwright/test'
import { setupInlineFixture, useFixture } from './fixture'
import { waitForHydration } from './helper'

test.describe(() => {
  const root = 'examples/e2e/temp/client-package-resolution'

  test.beforeAll(async () => {
    // Dependency and import graph:
    //
    // app
    // |-- @vitejs/test-client-dep@1 (exports only its root)
    // `-- @vitejs/test-server-dep
    //     `-- @vitejs/test-client-dep@2 (exports "./client")
    //
    // root.tsx -> test-server-dep -> test-client-dep@2/client
    //                                ^ resolves from the actual importer
    //
    // The plugin also probes v2's "./client" specifier from the app root. That
    // finds v1 and throws because v1 does not export "./client", so the plugin
    // must keep the fully resolved nested v2 module ID instead.
    const json = (value: unknown) => JSON.stringify(value, null, 2)
    await setupInlineFixture({
      src: 'examples/starter-extra',
      dest: root,
      files: {
        'package.json': {
          edit: (source) => {
            const packageJson = JSON.parse(source)
            packageJson.dependencies = {
              ...packageJson.dependencies,
              '@vitejs/test-client-dep': '1.0.0',
              '@vitejs/test-server-dep': '1.0.0',
            }
            return JSON.stringify(packageJson, null, 2) + '\n'
          },
        },
        'src/root.tsx': /* tsx */ `
          import { TestServer } from '@vitejs/test-server-dep/server'

          export function Root() {
            return (
              <html lang="en">
                <body>
                  <TestServer />
                </body>
              </html>
            )
          }
        `,
        'node_modules/@vitejs/test-server-dep/package.json': json({
          name: '@vitejs/test-server-dep',
          version: '1.0.0',
          type: 'module',
          exports: {
            './server': './server.js',
          },
          dependencies: {
            '@vitejs/test-client-dep': '2.0.0',
          },
          peerDependencies: {
            react: '*',
          },
        }),
        'node_modules/@vitejs/test-server-dep/server.js': /* js */ `
          import { TestClient } from '@vitejs/test-client-dep/client'
          import React from 'react'

          export function TestServer() {
            return React.createElement(TestClient)
          }
        `,
        'node_modules/@vitejs/test-client-dep/package.json': json({
          name: '@vitejs/test-client-dep',
          version: '1.0.0',
          type: 'module',
          exports: './index.js',
        }),
        'node_modules/@vitejs/test-client-dep/index.js': /* js */ ``,
        'node_modules/@vitejs/test-server-dep/node_modules/@vitejs/test-client-dep/package.json':
          json({
            name: '@vitejs/test-client-dep',
            version: '2.0.0',
            type: 'module',
            exports: {
              './client': './client.js',
            },
            peerDependencies: {
              react: '*',
            },
          }),
        'node_modules/@vitejs/test-server-dep/node_modules/@vitejs/test-client-dep/client.js': /* js */ `
          'use client'

          import React from 'react'

          export function TestClient() {
            const [count, setCount] = React.useState(0)
            return React.createElement(
              'button',
              { onClick: () => setCount((value) => value + 1) },
              'Nested client: ' + count,
            )
          }
        `,
      },
    })
  })

  for (const mode of ['dev', 'build'] as const) {
    test.describe(mode, () => {
      const f = useFixture({ root, mode })

      test('uses the client package resolved from its importer', async ({
        page,
      }) => {
        await page.goto(f.url())
        await waitForHydration(page)
        await page.getByRole('button', { name: 'Nested client: 0' }).click()
        await expect(
          page.getByRole('button', { name: 'Nested client: 1' }),
        ).toBeVisible()
      })
    })
  }
})