update to react 18 (#97)

Author: kentcdodds

.npmrc

@@ -1,3 +1,4 @@
 registry=https://registry.npmjs.org/
 package-lock=true
 yes=true
+legacy-peer-deps=true

README.md

@@ -36,6 +36,10 @@
 - The more experience you have with building React abstractions, the more
   helpful this workshop will be for you.
 
+> NOTE: The EpicReact.dev videos were recorded with React version ^16.13 and all
+> material in this repo has been updated to React version ^18. Differences are
+> minor and any relevant differences are noted in the instructions.
+
 ## System Requirements
 
 - [git][git] v2.13 or greater

package-lock.json

@@ -14,19 +14,18 @@
     "npm": ">=6"
   },
   "dependencies": {
-    "@kentcdodds/react-workshop-app": "^4.3.0",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
+    "@kentcdodds/react-workshop-app": "^5.0.0",
+    "@testing-library/react": "^13.0.1",
+    "@testing-library/user-event": "^14.1.0",
     "codegen.macro": "^4.1.0",
     "dequal": "^2.0.2",
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.4",
+    "@types/react-dom": "^18.0.0",
     "cross-env": "^7.0.3",
     "husky": "^4.3.8",
     "npm-run-all": "^4.1.5",

package.json

@@ -48,8 +48,8 @@ test('happy path works', async () => {
   expect(resetButton).toHaveAttribute('disabled')
 
   const testData = {...mockUser, tagline: 'test tagline', bio: 'test bio'}
-  userEvent.type(taglineInput, testData.tagline)
-  userEvent.type(bioInput, testData.bio)
+  await userEvent.type(taglineInput, testData.tagline)
+  await userEvent.type(bioInput, testData.bio)
 
   // changed form enables submit and reset
   expect(submitButton).toHaveTextContent(/submit/i)
@@ -61,7 +61,7 @@ test('happy path works', async () => {
     Promise.resolve(updatedUser),
   )
 
-  userEvent.click(submitButton)
+  await userEvent.click(submitButton)
 
   // pending form sets the submit button to ... and disables the submit and reset buttons
   expect(submitButton).toHaveTextContent(/\.\.\./i)
@@ -88,11 +88,11 @@ test('happy path works', async () => {
   expect(getDisplayData()).toEqual(updatedUser)
 })
 
-test('reset works', () => {
+test('reset works', async () => {
   const {resetButton, taglineInput} = renderApp()
 
-  userEvent.type(taglineInput, 'foo')
-  userEvent.click(resetButton)
+  await userEvent.type(taglineInput, 'foo')
+  await userEvent.click(resetButton)
   expect(taglineInput.value).toBe(mockUser.tagline)
 })
 
@@ -107,15 +107,15 @@ test('failure works', async () => {
   } = renderApp()
 
   const testData = {...mockUser, bio: 'test bio'}
-  userEvent.type(bioInput, testData.bio)
+  await userEvent.type(bioInput, testData.bio)
   const testErrorMessage = 'test error message'
   userClient.updateUser.mockImplementationOnce(() =>
     Promise.reject({message: testErrorMessage}),
   )
 
   const updatedUser = {...mockUser, ...testData}
 
-  userEvent.click(submitButton)
+  await userEvent.click(submitButton)
 
   await waitForLoading()
 
@@ -128,7 +128,7 @@ test('failure works', async () => {
   userClient.updateUser.mockImplementationOnce(() =>
     Promise.resolve(updatedUser),
   )
-  userEvent.click(submitButton)
+  await userEvent.click(submitButton)
 
   await waitForLoading()
 

src/__tests__/01.js

@@ -3,16 +3,16 @@ import {renderToggle} from '../../test/utils'
 import App from '../final/02'
 // import App from '../exercise/02'
 
-test('renders a toggle component', () => {
+test('renders a toggle component', async () => {
   const {toggleButton, toggle, container} = renderToggle(<App />)
   expect(toggleButton).not.toBeChecked()
   expect(container.textContent).toMatch('The button is off')
   expect(container.textContent).not.toMatch('The button is on')
-  toggle()
+  await toggle()
   expect(toggleButton).toBeChecked()
   expect(container.textContent).toMatch('The button is on')
   expect(container.textContent).not.toMatch('The button is off')
-  toggle()
+  await toggle()
   expect(toggleButton).not.toBeChecked()
   expect(container.textContent).toMatch('The button is off')
   expect(container.textContent).not.toMatch('The button is on')

src/__tests__/02.js

@@ -3,16 +3,16 @@ import {renderToggle} from '../../test/utils'
 import App from '../final/03'
 // import App from '../exercise/03'
 
-test('renders a toggle component', () => {
+test('renders a toggle component', async () => {
   const {toggleButton, toggle, container} = renderToggle(<App />)
   expect(toggleButton).not.toBeChecked()
   expect(container.textContent).toMatch('The button is off')
   expect(container.textContent).not.toMatch('The button is on')
-  toggle()
+  await toggle()
   expect(toggleButton).toBeChecked()
   expect(container.textContent).toMatch('The button is on')
   expect(container.textContent).not.toMatch('The button is off')
-  toggle()
+  await toggle()
   expect(toggleButton).not.toBeChecked()
   expect(container.textContent).toMatch('The button is off')
   expect(container.textContent).not.toMatch('The button is on')

src/__tests__/03.js

@@ -3,29 +3,29 @@ import {renderToggle, screen, userEvent} from '../../test/utils'
 import App from '../final/04'
 // import App from '../exercise/04'
 
-test('renders a toggle component', () => {
+test('renders a toggle component', async () => {
   const {toggleButton, toggle} = renderToggle(<App />)
   expect(toggleButton).not.toBeChecked()
-  toggle()
+  await toggle()
   expect(toggleButton).toBeChecked()
-  toggle()
+  await toggle()
   expect(toggleButton).not.toBeChecked()
 })
 
-test('can also toggle with the custom button', () => {
+test('can also toggle with the custom button', async () => {
   const {toggleButton} = renderToggle(<App />)
   expect(toggleButton).not.toBeChecked()
-  userEvent.click(screen.getByLabelText('custom-button'))
+  await userEvent.click(screen.getByLabelText('custom-button'))
   expect(toggleButton).toBeChecked()
 })
 
 // 💯 remove the `.skip` if you're working on the extra credit
-test.skip('passes custom props to the custom-button', () => {
+test.skip('passes custom props to the custom-button', async () => {
   const {toggleButton} = renderToggle(<App />)
   const customButton = screen.getByLabelText('custom-button')
   expect(customButton.getAttribute('id')).toBe('custom-button-id')
 
-  userEvent.click(customButton)
+  await userEvent.click(customButton)
 
   expect(toggleButton).toBeChecked()
 })

src/__tests__/04.js

@@ -3,41 +3,41 @@ import {renderToggle, screen, userEvent} from '../../test/utils'
 import App from '../final/05'
 // import App from '../exercise/05'
 
-test('renders a toggle component', () => {
+test('renders a toggle component', async () => {
   const {toggleButton, toggle} = renderToggle(<App />)
   expect(toggleButton).not.toBeChecked()
-  toggle()
+  await toggle()
   expect(toggleButton).toBeChecked()
-  toggle()
+  await toggle()
   expect(toggleButton).not.toBeChecked()
 })
 
-test('can click too much', () => {
+test('can click too much', async () => {
   const {toggleButton, toggle} = renderToggle(<App />)
   expect(toggleButton).not.toBeChecked()
-  toggle() // 1
+  await toggle() // 1
   expect(toggleButton).toBeChecked()
-  toggle() // 2
+  await toggle() // 2
   expect(toggleButton).not.toBeChecked()
   expect(screen.getByTestId('click-count')).toHaveTextContent('2')
-  toggle() // 3
+  await toggle() // 3
   expect(toggleButton).toBeChecked()
   expect(screen.queryByText(/whoa/i)).not.toBeInTheDocument()
-  toggle() // 4
+  await toggle() // 4
   expect(toggleButton).toBeChecked()
   expect(screen.getByText(/whoa/i)).toBeInTheDocument()
-  toggle() // 5: Whoa, too many
+  await toggle() // 5: Whoa, too many
   expect(toggleButton).toBeChecked()
-  toggle() // 6
+  await toggle() // 6
   expect(toggleButton).toBeChecked()
 
   expect(screen.getByTestId('notice')).not.toBeNull()
 
-  userEvent.click(screen.getByText('Reset'))
+  await userEvent.click(screen.getByText('Reset'))
   expect(screen.queryByTestId('notice')).toBeNull()
 
   expect(toggleButton).not.toBeChecked()
-  toggle()
+  await toggle()
   expect(toggleButton).toBeChecked()
 
   expect(screen.getByTestId('click-count')).toHaveTextContent('1')

src/__tests__/05.js

@@ -13,7 +13,7 @@ afterEach(() => {
   console.error.mockRestore()
 })
 
-test('warning for controlled component without onChange', () => {
+test('warning for controlled component without onChange', async () => {
   render(<Toggle on={false} />)
   alfredTip(
     () =>
@@ -39,26 +39,26 @@ test('warning for controlled component without onChange', () => {
   expect(console.error).toHaveBeenCalledTimes(1)
 })
 
-test('no warning for controlled component with onChange prop', () => {
+test('no warning for controlled component with onChange prop', async () => {
   render(<Toggle on={false} onChange={() => {}} />)
   expect(console.error).toHaveBeenCalledTimes(0)
 })
 
-test('no warning for controlled component with readOnly prop', () => {
+test('no warning for controlled component with readOnly prop', async () => {
   render(<Toggle on={false} readOnly={true} />)
   alfredTip(
     () => expect(console.error).toHaveBeenCalledTimes(0),
     'Make sure you forward the readOnly prop to the hook',
   )
 })
 
-test('warning for changing from controlled to uncontrolled', () => {
+test('warning for changing from controlled to uncontrolled', async () => {
   function Example() {
     const [state, setState] = React.useState(true)
     return <Toggle on={state} onChange={() => setState(undefined)} />
   }
   render(<Example />)
-  userEvent.click(screen.getByLabelText(/toggle/i))
+  await userEvent.click(screen.getByLabelText(/toggle/i))
   alfredTip(
     () =>
       expect(console.error).toHaveBeenCalledWith(
@@ -68,13 +68,13 @@ test('warning for changing from controlled to uncontrolled', () => {
   )
 })
 
-test('warning for changing from uncontrolled to controlled', () => {
+test('warning for changing from uncontrolled to controlled', async () => {
   function Example() {
     const [state, setState] = React.useState(undefined)
     return <Toggle on={state} onChange={() => setState(true)} />
   }
   render(<Example />)
-  userEvent.click(screen.getByLabelText(/toggle/i))
+  await userEvent.click(screen.getByLabelText(/toggle/i))
   alfredTip(
     () =>
       expect(console.error).toHaveBeenCalledWith(