test(rtl): welcome modal

src/components/WelcomeModal/WelcomeModal.spec.tsx

-import { Button, IconButton } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as profileActions from 'store/profile/profile.slice'
@@ -41,58 +40,55 @@ jest.mock('services/profile.service')
 const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile')
 
 describe('WelcomeModal component', () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
   const store = createMockEcolyoStore()
   it('should be rendered correctly', () => {
-    const component = mount(
+    const { baseElement } = render(
       <Provider store={store}>
         <WelcomeModal open={true} />
       </Provider>
     )
-    expect(toJson(component)).toMatchSnapshot()
+    expect(baseElement).toMatchSnapshot()
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
   })
 
   it('should not be rendered', () => {
-    const component = mount(
+    const { container } = render(
       <Provider store={store}>
         <WelcomeModal open={false} />
       </Provider>
     )
-    expect(toJson(component)).toMatchSnapshot()
+    expect(container.firstChild).toBeNull()
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
   })
 
-  it('should send mail and update profile when user click on the ok button', async () => {
-    const component = mount(
-      <Provider store={store}>
-        <WelcomeModal open={true} />
-      </Provider>
-    )
-    component.find(Button).first().simulate('click')
-    expect(mockSendMail).toHaveBeenCalled()
-    expect(updateProfileSpy).toHaveBeenCalledWith({
-      isFirstConnection: false,
-      onboarding: {
-        isWelcomeSeen: true,
-      },
+  describe('should test modal interactivity', () => {
+    beforeEach(() => {
+      render(
+        <Provider store={store}>
+          <WelcomeModal open={true} />
+        </Provider>
+      )
+    })
+    it('should send mail and update profile when user click on the ok button', async () => {
+      await userEvent.click(screen.getAllByRole('button')[1])
+      expect(mockSendMail).toHaveBeenCalled()
+      expect(updateProfileSpy).toHaveBeenCalledWith({
+        isFirstConnection: false,
+        onboarding: {
+          isWelcomeSeen: true,
+        },
+      })
     })
-  })
 
-  it('should send mail and update profile when modal is closed by user', async () => {
-    const component = mount(
-      <Provider store={store}>
-        <WelcomeModal open={true} />
-      </Provider>
-    )
-    component.find(IconButton).first().simulate('click')
-    expect(mockSendMail).toHaveBeenCalled()
-    expect(updateProfileSpy).toHaveBeenCalledWith({
-      isFirstConnection: false,
-      onboarding: {
-        isWelcomeSeen: true,
-      },
+    it('should send mail and update profile when modal is closed by user', async () => {
+      await userEvent.click(screen.getAllByRole('button')[0])
+      expect(mockSendMail).toHaveBeenCalled()
+      expect(updateProfileSpy).toHaveBeenCalledWith({
+        isFirstConnection: false,
+        onboarding: {
+          isWelcomeSeen: true,
+        },
+      })
     })
   })
 })