test: migrate tests to React Testing Library

jest.config.js

@@ -1,5 +1,6 @@
 module.exports = {
  roots: ['<rootDir>/src'],
+ setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
  testMatch: ['**/__tests__/**/*.+(ts|tsx)', '**/?(*.)+(spec|test).+(ts|tsx)'],
  coverageDirectory: './coverage',
  testPathIgnorePatterns: ['<rootDir>/jest.config.js'],

package.json

@@ -63,7 +63,8 @@
  "@commitlint/config-conventional": "~11.0.0",
  "@commitlint/core": "~11.0.0",
  "@commitlint/prompt": "~11.0.0",
- "@testing-library/react": "~11.2.0",
+ "@testing-library/jest-dom": "~5.11.6",
+ "@testing-library/react": "~11.2.2",
  "@testing-library/react-hooks": "~3.7.0",
  "@types/enzyme": "^3.10.5",
  "@types/jest": "~26.0.0",
@@ -101,9 +102,8 @@
  "eslint-plugin-react-hooks": "~4.1.0",
  "history": "4.10.1",
  "husky": "~4.3.0",
- "jest": "24.9.0",
- "lint-staged": "~10.5.0",
  "jest-canvas-mock": "~2.3.0",
+ "lint-staged": "~10.5.0",
  "memdown": "~5.1.0",
  "prettier": "~2.2.0",
  "redux-mock-store": "~1.5.4",

src/__tests__/App.test.tsx

@@ -1,11 +1,13 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureStore from 'redux-mock-store'
 
 import App from '../App'
 
-it('renders without crashing', () => {
+// TODO: Causing Cannot log after tests are done. "Did you forget to wait for something async in your test? Attempted to log "Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1133:16)"
+// ? MSW integration with tests
+it('renders without crashing', async () => {
  const mockStore = configureStore()({})
 
  const AppWithStore = () => (
@@ -14,6 +16,7 @@ it('renders without crashing', () => {
  </Provider>
  )
 
- const wrapper = shallow(<AppWithStore />)
- expect(wrapper).toBeDefined()
+ const { container } = render(<AppWithStore />)
+ // ! until the Error mention in above TODO is resolved smoke testing the container is a placeholder
+ expect(container).toBeInTheDocument()
 })

src/setupTests.js

@@ -1,4 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import '@testing-library/jest-dom'
 import Enzyme from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import 'jest-canvas-mock'
@@ -8,3 +9,4 @@ import './__mocks__/matchMediaMock'
 import './__mocks__/react-i18next'
 
 Enzyme.configure({ adapter: new Adapter() })
+// eslint-disable-next-line import/no-extraneous-dependencies

tsconfig.json

@@ -1,7 +1,8 @@
 {
  "include": [
  "src",
- "types"
+ "types",
+ "./setupTests.js"
  ],
  "exclude": [
  "node_modules",