update

jest.config.js

@@ -9,4 +9,7 @@ module.exports = {
       tsconfig: 'tsconfig.json',
     },
   },
+  moduleNameMapper: {
+    '\\.(css|scss)$': '<rootDir>/node_modules/jest-css-modules',
+  },
 }

package.json

@@ -38,6 +38,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "html-webpack-plugin": "^5.3.1",
     "jest": "^26.6.3",
+    "jest-css-modules": "^2.1.0",
     "postcss": "^8.2.13",
     "postcss-loader": "^5.2.0",
     "postcss-preset-env": "^6.7.0",

tests/station02.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import renderer, { act, ReactTestRenderer } from 'react-test-renderer'
+import renderer, { act } from 'react-test-renderer'
 import { App } from '../src/App'
 import { fetchMock } from './mock/fetch'
 import { createAsync } from './utils/createAsync'

tests/station03.test.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import renderer from 'react-test-renderer'
 import { App } from '../src/App'
 import { fetchMock } from './mock/fetch'
 import { createAsync } from './utils/createAsync'

tests/station04.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import renderer, { act } from 'react-test-renderer'
+import { act } from 'react-test-renderer'
 import { App } from '../src/App'
 import { fetchMock } from './mock/fetch'
 import { createAsync } from './utils/createAsync'

tests/station08.test.tsx

@@ -43,18 +43,16 @@ describe('<App />', () => {
     const { DogImage } = require('../src/DogImage')
     expect(DogImage).toBeTruthy()
 
-    const dummyImageUrl = 'image.png'
-
     let res: ReactTestRenderer | undefined
     await act(async () => {
       res = renderer.create(
-        <DogImage url={dummyImageUrl} />,
+        <DogImage url={imageUrl} />,
       )
     })
 
     const dogImage = res?.root.findByType('img')
     expect(dogImage).toBeTruthy()
-    expect(dogImage?.props.src).toStrictEqual(dummyImageUrl)
+    expect(dogImage?.props.src).toStrictEqual(imageUrl)
   })
 
   it('<App /> contains <Header />, <Description />, <DogImage />', async () => {

tests/station09.test.tsx

@@ -1,25 +1,32 @@
 import React from 'react'
 import renderer, { act } from 'react-test-renderer'
-import { RandomDogButton } from '../src/RandomDogButton'
-import { breeds, fetchMock } from './mock/fetch'
+import { fetchMock } from './mock/fetch'
 import { createAsync } from './utils/createAsync'
 
-const breedsList = Object.keys(breeds)
-
-describe('<App />', () => {
+describe('<DogListContainer />', () => {
   const fetch = jest.fn()
+  const useStateSpy = jest.spyOn(React, 'useState')
+
   window.fetch = fetch
   fetch.mockImplementation(fetchMock)
 
-  const useEffectSpy = jest.spyOn(React, 'useEffect')
-
-  it('<RandomDogButton /> calls React.useEffect', async () => {
-    await createAsync(<RandomDogButton />)
-    expect(useEffectSpy).toBeCalled()
+  it('exists', async () => {
+    const { DogListContainer } = require('../src/DogListContainer')
+    expect(DogListContainer).toBeTruthy()
+    await act(async () => {
+      renderer.create(<DogListContainer />)
+    })
   })
 
-  it('<RandomDogButton /> calls fetch', async () => {
-    await createAsync(<RandomDogButton />)
+  it('calls `fetch`', async () => {
+    const { DogListContainer } = require('../src/DogListContainer')
+    await createAsync(<DogListContainer />)
     expect(fetch).toBeCalled()
   })
+
+  it('calls `useState`', async () => {
+    const { DogListContainer } = require('../src/DogListContainer')
+    const res = await createAsync(<DogListContainer />)
+    expect(useStateSpy).toBeCalled()
+  })
 })

tests/station10.test.tsx

@@ -1,31 +1,40 @@
 import React from 'react'
 import renderer, { act } from 'react-test-renderer'
-import { RandomDogButton } from '../src/RandomDogButton'
-import { breeds, fetchMock } from './mock/fetch'
+import { breeds as nestedBreeds, fetchMock } from './mock/fetch'
 import { createAsync } from './utils/createAsync'
 
-const breedsList = Object.keys(breeds)
+const breeds = Object.keys(nestedBreeds)
 
-describe('<App />', () => {
+describe('<BreedsSelect />', () => {
   const fetch = jest.fn()
+
   window.fetch = fetch
   fetch.mockImplementation(fetchMock)
 
-  it('<RandomDogButton /> contains list of breeds', async () => {
-    const res = await createAsync(<RandomDogButton />)
-
-    const breedsSet = new Set(breedsList)
-    const options = res.root.findAllByType('option')
-
-    // there might be "All breeds" options
-    options.forEach((o) => {
-      const b = o.props.value
-      if (b) {
-        expect(breedsSet.has(b)).toBeTruthy()
-        breedsSet.delete(b)
-      }
+  it('exists', async () => {
+    const { BreedsSelect } = require('../src/BreedsSelect')
+    expect(BreedsSelect).toBeTruthy()
+    await act(async () => {
+      renderer.create(<BreedsSelect breeds={breeds} />)
     })
+  })
+
+  it('has `<select>` and `<option>` tags', async () => {
+    const { BreedsSelect } = require('../src/BreedsSelect')
+    const res = await createAsync(<BreedsSelect breeds={breeds} />)
+    expect(res.root.findAllByType('select').length).not.toBe(0)
+    expect(res.root.findAllByType('option').length).not.toBe(0)
+  })
 
-    expect(breedsSet.size).toStrictEqual(0)
+  it('value changes when `onChange` wes called', async () => {
+    const { BreedsSelect } = require('../src/BreedsSelect')
+    const mock = jest.fn()
+    const res = await createAsync(<BreedsSelect handleSelectBreed={mock} breeds={breeds} />)
+    const selectTag = res.root.findByType('select')!
+    const value = 'test'
+
+    expect(selectTag).toBeTruthy()
+    selectTag.props.onChange({ target: { value } })
+    expect(mock).toBeCalledWith(value)
   })
 })

yarn.lock

@@ -4527,6 +4527,11 @@ har-validator@~5.1.3:
     ajv "^6.12.3"
     har-schema "^2.0.0"
 
+harmony-reflect@^1.4.6:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
+  integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -4788,6 +4793,13 @@ icss-utils@^5.0.0, icss-utils@^5.1.0:
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
+[email protected]:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
+  integrity sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=
+  dependencies:
+    harmony-reflect "^1.4.6"
+
 ieee754@^1.1.4:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -5298,6 +5310,13 @@ jest-config@^26.6.3:
     micromatch "^4.0.2"
     pretty-format "^26.6.2"
 
+jest-css-modules@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/jest-css-modules/-/jest-css-modules-2.1.0.tgz#9c25ebe9d0214d8f55861a442268fdd4b01b4781"
+  integrity sha512-my3Scnt6l2tOll/eGwNZeh1KLAFkNzdl4MyZRdpl46GO6/93JcKKdTjNqK6Nokg8A8rT84MFLOpY1pzqKBEqMw==
+  dependencies:
+    identity-obj-proxy "3.0.0"
+
 jest-diff@^26.0.0, jest-diff@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"