Add test cases for basic example project (reduxjs#1218)

Co-authored-by: Lenz Weber <mail@lenzw.de>

Author: dggsax

.gitignore

@@ -29,4 +29,4 @@ typesversions
 
 .yalc
 yalc.lock
-yalc.sig
+yalc.sig

examples/query/react/basic/package.json

@@ -13,9 +13,12 @@
     "react-scripts": "4.0.2"
   },
   "devDependencies": {
+    "@testing-library/react": "^12.0.0",
+    "@types/jest": "^26.0.23",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
     "@types/react-redux": "7.1.9",
+    "msw": "^0.30.0",
     "typescript": "~4.2.4"
   },
   "eslintConfig": {
@@ -28,7 +31,8 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build"
+    "build": "react-scripts build",
+    "test": "react-scripts test --runInBand"
   },
   "browserslist": [
     ">0.2%",

examples/query/react/basic/src/App.test.tsx

@@ -0,0 +1,42 @@
+import { rest } from 'msw'
+import { screen } from '@testing-library/react'
+
+import App from './App'
+import { server } from './test/server'
+import { renderWithProviders } from './test/test-utils'
+
+describe('App', () => {
+  it('handles good response', async () => {
+    renderWithProviders(<App />)
+
+    screen.getByText('Loading...')
+
+    await screen.findByRole('heading', { name: /bulbasaur/i })
+
+    const img = screen.getByRole('img', {
+      name: /bulbasaur/i,
+    }) as HTMLImageElement
+
+    expect(img.src).toBe(
+      'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png'
+    )
+  })
+
+  it('handles error response', async () => {
+    // force msw to return error response
+    server.use(
+      rest.get(
+        'https://pokeapi.co/api/v2/pokemon/bulbasaur',
+        (req, res, ctx) => {
+          return res(ctx.status(500))
+        }
+      )
+    )
+
+    renderWithProviders(<App />)
+
+    screen.getByText('Loading...')
+
+    await screen.findByText('Oh no, there was an error')
+  })
+})

examples/query/react/basic/src/index.tsx

@@ -2,7 +2,9 @@ import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 
 import App from './App'
-import { store } from './store'
+import { setupStore } from './store'
+
+const store = setupStore()
 
 const rootElement = document.getElementById('root')
 render(

examples/query/react/basic/src/setupTests.ts

@@ -0,0 +1,10 @@
+import { server } from './test/server'
+
+// make debug output for TestingLibrary Errors larger
+process.env.DEBUG_PRINT_LIMIT = '15000'
+
+// enable API mocking in test runs using the same request handlers
+// as for the client-side mocking.
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
+afterAll(() => server.close())
+afterEach(() => server.resetHandlers())

examples/query/react/basic/src/store.ts

@@ -1,11 +1,21 @@
-import { configureStore } from '@reduxjs/toolkit'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import type { PreloadedState } from '@reduxjs/toolkit'
 import { pokemonApi } from './services/pokemon'
 
-export const store = configureStore({
-  reducer: {
-    [pokemonApi.reducerPath]: pokemonApi.reducer,
-  },
-  // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(pokemonApi.middleware),
+const rootReducer = combineReducers({
+  [pokemonApi.reducerPath]: pokemonApi.reducer,
 })
+
+export const setupStore = (preloadedState?: PreloadedState<RootState>) => {
+  return configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) =>
+      // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
+      getDefaultMiddleware().concat(pokemonApi.middleware),
+    preloadedState,
+  })
+}
+
+export type RootState = ReturnType<typeof rootReducer>
+export type AppStore = ReturnType<typeof setupStore>
+export type AppDispatch = AppStore['dispatch']

examples/query/react/basic/src/test/server/index.ts

@@ -0,0 +1,6 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './serverHandlers'
+
+const server = setupServer(...handlers)
+
+export { server }

examples/query/react/basic/src/test/server/serverHandlers.ts

@@ -0,0 +1,18 @@
+import { rest } from 'msw'
+
+const handlers = [
+  rest.get('https://pokeapi.co/api/v2/pokemon/bulbasaur', (req, res, ctx) => {
+    const mockApiResponse = {
+      species: {
+        name: 'bulbasaur',
+      },
+      sprites: {
+        front_shiny:
+          'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png',
+      },
+    }
+    return res(ctx.json(mockApiResponse))
+  }),
+]
+
+export { handlers }

examples/query/react/basic/src/test/test-utils.tsx

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react'
+import type { RenderOptions } from '@testing-library/react'
+import React, { PropsWithChildren } from 'react'
+import { Provider } from 'react-redux'
+import { setupStore } from '../store'
+import type { AppStore, RootState } from '../store'
+import type { PreloadedState } from '@reduxjs/toolkit'
+
+// This type interface extends the default options for render from RTL, as well
+// as allows the user to specify other things such as initialState, store. For
+// future dependencies, such as wanting to test with react-router, you can extend
+// this interface to accept a path and route and use those in a <MemoryRouter />
+interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
+  preloadedState?: PreloadedState<RootState>
+  store?: AppStore
+}
+
+function renderWithProviders(
+  ui: React.ReactElement,
+  {
+    preloadedState = {},
+    store = setupStore(preloadedState),
+    ...renderOptions
+  }: ExtendedRenderOptions = {}
+) {
+  function Wrapper({ children }: PropsWithChildren<{}>): JSX.Element {
+    return <Provider store={store}>{children}</Provider>
+  }
+  return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) }
+}
+
+export { renderWithProviders }