🔀 Merge pull request #47 from alexlee-dev/feature/test-redux

✅ Update Test Strategy

package.json

@@ -48,8 +48,8 @@
     "build": "react-scripts build",
     "eject": "react-scripts eject",
     "test": "react-scripts test",
-    "test:coverage": "yarn test --coverage --watchAll=false",
-    "test:coveralls": "yarn test --coverage --watchAll=false --coverageReporters=text-lcov | coveralls"
+    "test:coverage": "yarn test --coverage --watchAll=false --collectCoverageFrom=src/components/**/* --collectCoverageFrom=src/views/**/*",
+    "test:coveralls": "yarn test --coverage --watchAll=false --collectCoverageFrom=src/components/**/* --collectCoverageFrom=src/views/**/* --coverageReporters=text-lcov | coveralls"
   },
   "eslintConfig": {
     "extends": "react-app"

src/__tests__/App.test.js

@@ -1,16 +1,9 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { Provider } from 'react-redux'
-import { defaultState, mockStore } from '../fixtures'
+import { customRender } from '../test-utils'
 import App from '../App'
 
 describe('<App />', () => {
   it('Should render the <App /> component.', () => {
-    const container = render(
-      <Provider store={mockStore(defaultState)}>
-        <App />
-      </Provider>
-    )
+    const container = customRender({ component: App })
     expect(container.asFragment()).toMatchSnapshot()
   })
 })

src/__tests__/__snapshots__/App.test.js.snap

@@ -30,7 +30,9 @@ exports[`<App /> Should render the <App /> component. 1`] = `
     <div
       class="StyledBox-sc-13pk1d4-0 dfMVfp"
     >
-      <select>
+      <select
+        data-testid="view-selector"
+      >
         <option>
           Ship
         </option>

src/__tests__/components/CashDisplay.test.js

@@ -1,16 +1,9 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { Provider } from 'react-redux'
-import { defaultState, mockStore } from '../../fixtures'
+import { customRender } from '../../test-utils'
 import CashDisplay from '../../components/CashDisplay'
 
 describe('<CashDisplay />', () => {
   it('Should render the <CashDisplay /> component.', () => {
-    const container = render(
-      <Provider store={mockStore(defaultState)}>
-        <CashDisplay />
-      </Provider>
-    )
+    const container = customRender({ component: CashDisplay })
     expect(container.asFragment()).toMatchSnapshot()
   })
 })

src/__tests__/components/ItemTimer.test.js

@@ -1,16 +1,9 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { Provider } from 'react-redux'
-import { defaultState, mockStore } from '../../fixtures'
+import { customRender } from '../../test-utils'
 import ItemTimer from '../../components/ItemTimer'
 
 describe('<ItemTimer />', () => {
   it('Should render the <ItemTimer /> component.', () => {
-    const container = render(
-      <Provider store={mockStore(defaultState)}>
-        <ItemTimer />
-      </Provider>
-    )
+    const container = customRender({ component: ItemTimer })
     expect(container.asFragment()).toMatchSnapshot()
   })
 })

src/__tests__/components/Title.test.js

@@ -1,10 +1,9 @@
-import React from 'react'
-import { render } from '@testing-library/react'
 import Title from '../../components/Title'
+import { customRender } from '../../test-utils'
 
 describe('<Title />', () => {
   it('Should render the <Title /> component.', () => {
-    const container = render(<Title />)
+    const container = customRender({ component: Title })
     expect(container.asFragment()).toMatchSnapshot()
   })
 })

src/__tests__/components/ViewSelector.test.js

@@ -1,16 +1,20 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { Provider } from 'react-redux'
-import { defaultState, mockStore } from '../../fixtures'
+import { fireEvent, waitForElement } from '@testing-library/react'
+import { customRender } from '../../test-utils'
 import ViewSelector from '../../components/ViewSelector'
 
 describe('<ViewSelector />', () => {
   it('Should render the <ViewSelector /> component.', () => {
-    const container = render(
-      <Provider store={mockStore(defaultState)}>
-        <ViewSelector />
-      </Provider>
-    )
+    const container = customRender({ component: ViewSelector })
     expect(container.asFragment()).toMatchSnapshot()
   })
+
+  it('Should handle changing the ViewSelector.', async () => {
+    const { getByTestId } = customRender({ component: ViewSelector })
+
+    const selector = await waitForElement(() => getByTestId('view-selector'))
+
+    expect(getByTestId('view-selector').value).toBe('Ship')
+    fireEvent.change(selector, { target: { value: 'Planets' } })
+    expect(getByTestId('view-selector').value).toBe('Planets')
+  })
 })

src/__tests__/components/__snapshots__/ViewSelector.test.js.snap

@@ -5,7 +5,9 @@ exports[`<ViewSelector /> Should render the <ViewSelector /> component. 1`] = `
   <div
     class="StyledBox-sc-13pk1d4-0 dfMVfp"
   >
-    <select>
+    <select
+      data-testid="view-selector"
+    >
       <option>
         Ship
       </option>