feat(tests): migrate from enzyme to RTL

Author: alexandr-g

src/components/counter/Counter.spec.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import { Provider } from 'react-redux'
-import { mount } from 'enzyme'
 import configureStore from 'redux-mock-store'
 
 import { actionTypes } from '../../features/counter'
@@ -17,47 +16,43 @@ describe('Counter', () => {
   // Add jest mock spy to watch for store.dispatch method. See https://jestjs.io/docs/en/jest-object#jestspyonobject-methodname for more info
   jest.spyOn(store, 'dispatch')
 
-  it('renders without crashing.', () => {
-    const wrapper = mount(
+  test('renders without crashing.', () => {
+    render(
       <Provider store={store}>
         <Counter />
       </Provider>
     )
 
-    const countValue = wrapper.find('strong').text()
-    expect(countValue).toBe('42')
+    const countValue = screen.getByText('42')
+    expect(countValue).toBeInTheDocument()
   })
 
-  it('should be possible to increment counter.', () => {
-    const wrapper = mount(
+  test('should be possible to increment counter.', () => {
+    render(
       <Provider store={store}>
         <Counter />
       </Provider>
     )
 
-    wrapper
-      .find('button')
-      .filter({ 'data-qa': 'increment-counter' })
-      .simulate('click')
+    const incrementButton = screen.getByRole('button', { name: 'increment' })
+    fireEvent.click(incrementButton)
 
-    expect(store.dispatch).toBeCalledTimes(1)
+    expect(store.dispatch).toHaveBeenCalledTimes(1)
 
-    expect(store.dispatch).toBeCalledWith({
+    expect(store.dispatch).toHaveBeenCalledWith({
       type: actionTypes.INCREMENT_COUNTER,
     })
   })
 
-  it('should be possible to decrement counter.', () => {
-    const wrapper = mount(
+  test('should be possible to decrement counter.', () => {
+    render(
       <Provider store={store}>
         <Counter />
       </Provider>
     )
 
-    wrapper
-      .find('button')
-      .filter({ 'data-qa': 'decrement-counter' })
-      .simulate('click')
+    const decrementButton = screen.getByRole('button', { name: 'decrement' })
+    fireEvent.click(decrementButton)
 
     expect(store.dispatch).toHaveBeenCalledTimes(1)
 

src/features/counter/counterReducer.spec.ts

@@ -3,7 +3,7 @@ import counterReducer from './counterReducer'
 import { CounterActionTypes } from './types'
 
 describe('features > counter > counterReducer', () => {
-  it(`increments value, if ${INCREMENT_COUNTER} action is provided`, () => {
+  test(`increments value, if ${INCREMENT_COUNTER} action is provided`, () => {
     const initialState = {
       value: 0,
     }
@@ -19,7 +19,7 @@ describe('features > counter > counterReducer', () => {
     expect(counterReducer(initialState, action)).toEqual(expectedState)
   })
 
-  it(`increments value, if ${DECREMENT_COUNTER} action is provided`, () => {
+  test(`increments value, if ${DECREMENT_COUNTER} action is provided`, () => {
     const initialState = {
       value: 0,
     }

src/setupTests.ts

@@ -1,4 +1 @@
-import { configure } from 'enzyme'
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
-
-configure({ adapter: new Adapter() })
+import '@testing-library/jest-dom'