migrate to React-Router

Author: ryota-murakami

src/App/NewTodoInput/index.test.tsx

@@ -1,12 +1,12 @@
 import { fireEvent } from '@testing-library/react'
 import React from 'react'
 
-import { renderWithRecoilRoot } from '../../testUtil'
+import { TestRenderer } from '../../testUtil'
 
 import NewTodoTextInput from './index'
 
 test('should be render <TodoTextInput/>', () => {
-  const screen = renderWithRecoilRoot(<NewTodoTextInput />)
+  const screen = TestRenderer(<NewTodoTextInput />)
   const input = screen.getByTestId('new-todo-input-text') as HTMLInputElement
 
   // Header big text

src/App/TodoList/Item/index.test.tsx

@@ -4,7 +4,7 @@ import { useRecoilState } from 'recoil'
 
 import type { AppState } from '../../../dataStructure'
 import { recoilState } from '../../../dataStructure'
-import { renderWithRecoilRoot } from '../../../testUtil'
+import { TestRenderer } from '../../../testUtil'
 
 import Item from './index'
 
@@ -29,7 +29,7 @@ const App = () => {
 }
 
 test('should each initialAppstate todo object value is set to Item element', () => {
-  renderWithRecoilRoot(
+  TestRenderer(
     <Item todo={initialRecoilState.todoList[0]} />,
     initialRecoilState
   )
@@ -46,15 +46,15 @@ test('should each initialAppstate todo object value is set to Item element', ()
 })
 
 test('should set css classes correctly', () => {
-  renderWithRecoilRoot(<App />, initialRecoilState)
+  TestRenderer(<App />, initialRecoilState)
 
   // when not.completed & not.onEdit, SwitchStyle doesn't show .completed .editting selectors
   expect(screen.getByTestId('todo-item')).not.toHaveClass('completed')
   expect(screen.getByTestId('todo-item')).not.toHaveClass('editing')
 })
 
 test('should work todo completed checkbox', () => {
-  renderWithRecoilRoot(<App />, initialRecoilState)
+  TestRenderer(<App />, initialRecoilState)
 
   // click complete checkbox then should appear completed class
   fireEvent.click(screen.getByTestId('todo-item-complete-check'))
@@ -72,7 +72,7 @@ test('should work todo completed checkbox', () => {
 })
 
 test('should work edit mode and toggle show/hide', () => {
-  renderWithRecoilRoot(<App />, initialRecoilState)
+  TestRenderer(<App />, initialRecoilState)
 
   // by default, edit input form is not visible
   expect(screen.getByTestId('todo-edit-input')).not.toBeVisible()
@@ -109,7 +109,7 @@ test('should work edit mode and toggle show/hide', () => {
 })
 
 test('delete todo item', () => {
-  renderWithRecoilRoot(<App />, initialRecoilState)
+  TestRenderer(<App />, initialRecoilState)
 
   // click delete button, then todo item is removed
   expect(screen.getByTestId('todo-item')).toBeInTheDocument()

src/App/TodoList/index.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent } from '@testing-library/react'
 import React from 'react'
 
 import type { AppState } from '../../dataStructure'
-import { renderWithRecoilRoot } from '../../testUtil'
+import { TestRenderer } from '../../testUtil'
 
 import TodoList from './index'
 
@@ -27,7 +27,7 @@ const initialRecoilState: AppState = {
 }
 
 test('should be render 3 todo items in initialAppState', () => {
-  const screen = renderWithRecoilRoot(<TodoList path="/" />, initialRecoilState)
+  const screen = TestRenderer(<TodoList />, initialRecoilState)
 
   expect(screen.getByTestId('todo-list')).toBeInTheDocument()
   expect(screen.getByTestId('todo-list').children.length).toBe(3)
@@ -38,7 +38,7 @@ test('should be render 3 todo items in initialAppState', () => {
 })
 
 test('should be work delete todo button', () => {
-  const screen = renderWithRecoilRoot(<TodoList path="/" />, initialRecoilState)
+  const screen = TestRenderer(<TodoList />, initialRecoilState)
 
   // delete first item
   fireEvent.click(screen.getAllByTestId('delete-todo-btn')[0])
@@ -50,7 +50,7 @@ test('should be work delete todo button', () => {
 })
 
 test('should be work correctly all completed:true|false checkbox toggle button', () => {
-  const screen = renderWithRecoilRoot(<TodoList path="/" />, initialRecoilState)
+  const screen = TestRenderer(<TodoList />, initialRecoilState)
 
   // toggle on
   fireEvent.click(screen.getByTestId('toggle-all-btn'))

src/App/index.tsx

@@ -12,6 +12,8 @@ const App: React.FC = () => (
       <RecoilRoot>
         <Routes>
           <Route path="/" element={<TodoMVC />} />
+          <Route path="/active" element={<TodoMVC />} />
+          <Route path="/completed" element={<TodoMVC />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </RecoilRoot>

src/NotFound.tsx

@@ -1,4 +1,3 @@
-import type { RouteComponentProps } from '@reach/router'
 import React from 'react'
 
 const css: React.CSSProperties = {
@@ -9,7 +8,7 @@ const css: React.CSSProperties = {
   width: '100%',
 }
 
-export const NotFound: React.FC<RouteComponentProps> = () => (
+export const NotFound: React.FC = () => (
   <div data-cy="not-found-page" style={css}>
     <h1>Page Not Found</h1>
   </div>

src/testUtil.tsx

@@ -1,6 +1,7 @@
 import type { RenderResult } from '@testing-library/react'
 import { render } from '@testing-library/react'
 import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
 import type { MutableSnapshot } from 'recoil'
 import { RecoilRoot } from 'recoil'
 
@@ -11,16 +12,18 @@ const defaultValue: AppState = {
   todoList: [],
 }
 
-export const renderWithRecoilRoot = (
+export const TestRenderer = (
   ui: React.ReactElement,
   initialRecoilStateValue: AppState = defaultValue
 ): RenderResult =>
   render(
-    <RecoilRoot
-      initializeState={({ set }: MutableSnapshot): void =>
-        set(recoilState, initialRecoilStateValue)
-      }
-    >
-      {ui}
-    </RecoilRoot>
+    <BrowserRouter>
+      <RecoilRoot
+        initializeState={({ set }: MutableSnapshot): void =>
+          set(recoilState, initialRecoilStateValue)
+        }
+      >
+        {ui}
+      </RecoilRoot>
+    </BrowserRouter>
   )