test: add test for react context hmr

Author: IanVS

playground/react/App.jsx

@@ -2,6 +2,8 @@ import { useState } from 'react'
 import Button from 'jsx-entry'
 import Dummy from './components/Dummy?qs-should-not-break-plugin-react'
 import Parent from './hmr/parent'
+import { CountProvider } from './context/CountProvider'
+import { ContextButton } from './context/ContextButton'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -10,10 +12,16 @@ function App() {
       <header className="App-header">
         <h1>Hello Vite + React</h1>
         <p>
-          <button onClick={() => setCount((count) => count + 1)}>
+          <button
+            id="state-button"
+            onClick={() => setCount((count) => count + 1)}
+          >
             count is: {count}
           </button>
         </p>
+        <p>
+          <ContextButton />
+        </p>
         <p>
           Edit <code>App.jsx</code> and save to test HMR updates.
         </p>
@@ -34,4 +42,12 @@ function App() {
   )
 }
 
-export default App
+function AppWithProviders() {
+  return (
+    <CountProvider>
+      <App />
+    </CountProvider>
+  )
+}
+
+export default AppWithProviders

playground/react/__tests__/react.spec.ts

@@ -6,16 +6,16 @@ test('should render', async () => {
 })
 
 test('should update', async () => {
-  expect(await page.textContent('button')).toMatch('count is: 0')
-  await page.click('button')
-  expect(await page.textContent('button')).toMatch('count is: 1')
+  expect(await page.textContent('#state-button')).toMatch('count is: 0')
+  await page.click('#state-button')
+  expect(await page.textContent('#state-button')).toMatch('count is: 1')
 })
 
 test('should hmr', async () => {
   editFile('App.jsx', (code) => code.replace('Vite + React', 'Updated'))
   await untilUpdated(() => page.textContent('h1'), 'Hello Updated')
   // preserve state
-  expect(await page.textContent('button')).toMatch('count is: 1')
+  expect(await page.textContent('#state-button')).toMatch('count is: 1')
 })
 
 // #9869
@@ -37,7 +37,7 @@ test.runIf(isServe)(
   'should have annotated jsx with file location metadata',
   async () => {
     const meta = await page.evaluate(() => {
-      const button = document.querySelector('button')
+      const button = document.querySelector('#state-button')
       const key = Object.keys(button).find(
         (key) => key.indexOf('__reactFiber') === 0
       )
@@ -52,3 +52,28 @@ test.runIf(isServe)(
     ])
   }
 )
+
+test('should hmr react context', async () => {
+  browserLogs.length = 0
+  expect(await page.textContent('#context-button')).toMatch(
+    'context-based count is: 0'
+  )
+  await page.click('#context-button')
+  expect(await page.textContent('#context-button')).toMatch(
+    'context-based count is: 1'
+  )
+  editFile('context/CountProvider.jsx', (code) =>
+    code.replace('context provider', 'context provider updated')
+  )
+  await untilUpdated(
+    () => page.textContent('#context-provider'),
+    'context provider updated'
+  )
+  expect(browserLogs).toMatchObject([
+    '[vite] hot updated: /context/CountProvider.jsx',
+    '[vite] hot updated: /App.jsx',
+    '[vite] hot updated: /context/ContextButton.jsx',
+    'Parent rendered'
+  ])
+  browserLogs.length = 0
+})

playground/react/context/ContextButton.jsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+import { CountContext } from './CountProvider'
+
+export function ContextButton() {
+  const { count, setCount } = useContext(CountContext)
+  return (
+    <button id="context-button" onClick={() => setCount((count) => count + 1)}>
+      context-based count is: {count}
+    </button>
+  )
+}

playground/react/context/CountProvider.jsx

@@ -0,0 +1,12 @@
+import { createContext, useState } from 'react'
+export const CountContext = createContext()
+
+export const CountProvider = ({ children }) => {
+  const [count, setCount] = useState(0)
+  return (
+    <CountContext.Provider value={{ count, setCount }}>
+      {children}
+      <div id="context-provider">context provider</div>
+    </CountContext.Provider>
+  )
+}