vite-plugin-react/packages/plugin-react-swc/playground/react-18/__tests__/react-18.spec.ts at aa82e65fd28626fe9ca2638d45519017e498fd40 · vitejs/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
import { expect, test } from '@playwright/test'
import { setupBuildAndPreview, setupDevServer, setupWaitForLogs } from '../../utils.ts'

test('Default build', async ({ page }) => {
  const { testUrl, server } = await setupBuildAndPreview('react-18')
  await page.goto(testUrl)

  await page.click('button')
  await expect(page.locator('button')).toHaveText('count is 1')

  await server.httpServer.close()
})

test('HMR invalidate', async ({ page }) => {
  const { testUrl, server, editFile } = await setupDevServer('react-18')
  const waitForLogs = await setupWaitForLogs(page)
  await page.goto(testUrl)
  await waitForLogs('[vite] connected.')

  await page.click('button')
  await expect(page.locator('button')).toHaveText('count is 1')

  editFile('src/App.tsx', ['{count}', '{count}!'])
  await waitForLogs('[vite] hot updated: /src/App.tsx')
  await expect(page.locator('button')).toHaveText('count is 1!')

  // Edit component
  editFile('src/TitleWithExport.tsx', ['Vite +', 'Vite *'])
  await waitForLogs('[vite] hot updated: /src/TitleWithExport.tsx')

  // Edit export
  editFile('src/TitleWithExport.tsx', ['React', 'React!'])
  await waitForLogs(
    '[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh ("framework" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc#consistent-components-exports',
    '[vite] hot updated: /src/App.tsx',
  )
  await expect(page.locator('h1')).toHaveText('Vite * React!')

  // Add non-component export
  editFile('src/TitleWithExport.tsx', ["React!'", "React!'\nexport const useless = 3"])
  await waitForLogs(
    '[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (new export)',
    '[vite] hot updated: /src/App.tsx',
  )

  // Add component export
  editFile('src/TitleWithExport.tsx', [
    '</h1>',
    '</h1>\nexport const Title2 = () => <h2>Title2</h2>',
  ])
  await waitForLogs('[vite] hot updated: /src/TitleWithExport.tsx')

  // Import new component
  editFile(
    'src/App.tsx',
    ['import { TitleWithExport', 'import { TitleWithExport, Title2'],
    ['<TitleWithExport />', '<TitleWithExport /> <Title2 />'],
  )
  await waitForLogs('[vite] hot updated: /src/App.tsx')
  await expect(page.locator('h2')).toHaveText('Title2')

  // Remove component export
  editFile('src/TitleWithExport.tsx', ['\nexport const Title2 = () => <h2>Title2</h2>', ''])
  await waitForLogs(
    '[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (export removed)',
    '[vite] hot updated: /src/App.tsx',
    /Failed to reload \/src\/App\.tsx. This could be due to syntax errors or importing non-existent modules\. \(see errors above\)$/,
  )

  // Remove usage from App
  editFile(
    'src/App.tsx',
    ['import { TitleWithExport, Title2', 'import { TitleWithExport'],
    ['<TitleWithExport /> <Title2 />', '<TitleWithExport />'],
  )
  await waitForLogs('[vite] hot updated: /src/App.tsx')
  await expect(page.locator('button')).toHaveText('count is 1!')

  // Remove useless export
  editFile('src/TitleWithExport.tsx', ['\nexport const useless = 3', ''])
  await waitForLogs(
    '[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (export removed)',
    '[vite] hot updated: /src/App.tsx',
  )

  await server.close()
})