.eslintrc.js

@@ -83,9 +83,15 @@ module.exports = {
     },
     {
       files: ['**/*.spec.{ts,tsx}'],
-      extends: ['plugin:jest/recommended'],
+      extends: ['plugin:jest/recommended', 'plugin:testing-library/react'],
       rules: {
         'jest/no-mocks-import': 0,
+
+        // For testing View components which renders other components -> implementation tests ?
+        'testing-library/no-container': 0,
+
+        // Allows checking classes on containers -> could be fixed
+        'testing-library/no-node-access': 0,
       },
     },
   ],

package.json

@@ -86,9 +86,9 @@
   "devDependencies": {
     "@babel/preset-typescript": "^7.7.4",
     "@eslint-react/eslint-plugin": "^1.14.3",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/d3": "^7.4.3",
     "@types/file-saver": "^2.0.5",
@@ -118,6 +118,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "7.37.1",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-testing-library": "^6.4.0",
     "git-directory-deploy": "1.5.1",
     "jest-canvas-mock": "^2.4.0",
     "jest-junit": "^16.0.0",

src/components/Action/ActionBegin/ActionBegin.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -83,9 +83,7 @@ describe('ActionBegin component', () => {
       </Provider>
     )
     await waitFor(() => null, { container })
-    await act(async () => {
-      await userEvent.click(screen.getByText('action.apply'))
-    })
+    await userEvent.click(screen.getByText('action.apply'))
     expect(await screen.findByRole('dialog')).toBeInTheDocument()
   })
 })

src/components/Action/ActionCard/ActionCard.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -43,9 +43,7 @@ describe('ActionCard component', () => {
       </Provider>
     )
     await waitFor(() => null, { container })
-    await act(async () => {
-      await userEvent.click(await screen.findByRole('button'))
-    })
+    await userEvent.click(await screen.findByRole('button'))
     expect(await screen.findByRole('dialog')).toBeInTheDocument()
   })
 })

src/components/Action/ActionChoose/ActionChoose.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -74,11 +74,7 @@ describe('ActionChoose component', () => {
       </Provider>
     )
     await waitFor(() => null, { container })
-
-    await act(async () => {
-      await userEvent.click(await screen.findByText('action.other'))
-    })
-
+    await userEvent.click(await screen.findByText('action.other'))
     const list = container.getElementsByTagName('mock-ActionList')[0]
     expect(list).toBeInTheDocument()
   })

src/components/Action/ActionDone/ActionDone.spec.tsx

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -35,9 +35,7 @@ describe('ActionDone component', () => {
         <ActionDone currentChallenge={userChallengeData[1]} />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(screen.getByText('action.ok'))
-    })
+    await userEvent.click(screen.getByText('action.ok'))
     expect(updateChallengeSpy).toHaveBeenCalledTimes(1)
   })
 })

src/components/Action/ActionModal/ActionModal.spec.tsx

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -49,9 +49,7 @@ describe('ActionModal component', () => {
         />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(screen.getByText('action_modal.accept'))
-    })
+    await userEvent.click(screen.getByText('action_modal.accept'))
     expect(updateChallengeSpy).toHaveBeenCalledTimes(1)
   })
 })

src/components/Action/ActionOnGoing/ActionOnGoing.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { UserActionState } from 'enums'
 import { DateTime } from 'luxon'
@@ -44,9 +44,7 @@ describe('ActionOnGoing component', () => {
         <ActionOnGoing userAction={userAction1} />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(screen.getByText('action.details'))
-    })
-    expect(screen.findByRole('dialog')).toBeTruthy()
+    await userEvent.click(screen.getByText('action.details'))
+    expect(screen.getByRole('dialog')).toBeTruthy()
   })
 })

src/components/Analysis/Comparison/Comparison.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { FluidType } from 'enums'
 import { PerformanceIndicator } from 'models'
@@ -89,15 +89,11 @@ describe('Comparison component', () => {
       name: `analysis.compare.month_tab`,
     })
 
-    await act(async () => {
-      await userEvent.click(yearlyButton)
-      expect(mockDispatch).toHaveBeenCalledWith(setPeriod('year'))
-    })
+    await userEvent.click(yearlyButton)
+    expect(mockDispatch).toHaveBeenCalledWith(setPeriod('year'))
 
-    await act(async () => {
-      await userEvent.click(monthlyButton)
-      expect(mockDispatch).toHaveBeenCalledWith(setPeriod('month'))
-    })
+    await userEvent.click(monthlyButton)
+    expect(mockDispatch).toHaveBeenCalledWith(setPeriod('month'))
   })
 
   it('renders performance indicators', async () => {

src/components/Analysis/Comparison/FluidPerformanceIndicator.spec.tsx

 import { AnyAction } from '@reduxjs/toolkit'
-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { FluidType } from 'enums'
 import { DateTime } from 'luxon'
@@ -64,9 +64,7 @@ describe('FluidPerformanceIndicator component', () => {
       screen.getByTestId('fluid-comparison-ELECTRICITY')
     ).toHaveTextContent('+10,00 % / avril 2024')
 
-    await act(async () => {
-      await userEvent.click(screen.getByRole('listitem'))
-    })
+    await userEvent.click(screen.getByRole('listitem'))
 
     expect(mockedNavigate).toHaveBeenCalledWith('/consumption/electricity')
     expect(dispatchSpy).toHaveBeenCalledWith({
@@ -103,9 +101,7 @@ describe('FluidPerformanceIndicator component', () => {
       '-10,00 % / avril 2024'
     )
 
-    await act(async () => {
-      await userEvent.click(screen.getByRole('listitem'))
-    })
+    await userEvent.click(screen.getByRole('listitem'))
 
     expect(mockedNavigate).toHaveBeenCalledWith('/consumption/water')
     expect(dispatchSpy).toHaveBeenCalledWith({

src/components/Analysis/Comparison/TemperatureComparison.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { DateTime } from 'luxon'
 import React from 'react'
@@ -80,11 +80,9 @@ describe('TemperatureComparison component', () => {
       </Provider>
     )
     await waitFor(() => container)
-    await act(async () => {
-      await userEvent.click(
-        screen.getByLabelText('analysis.temperature_comparison.info_button')
-      )
-    })
+    await userEvent.click(
+      screen.getByLabelText('analysis.temperature_comparison.info_button')
+    )
     expect(screen.getByRole('dialog')).toBeInTheDocument()
   })
 })

src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.spec.tsx

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -26,9 +26,7 @@ describe('TemperatureComparisonModal component', () => {
         />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(screen.getAllByRole('button')[0])
-    })
+    await userEvent.click(screen.getAllByRole('button')[0])
     expect(mockHandleClose).toHaveBeenCalledTimes(1)
   })
 })

src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap

@@ -106,7 +106,16 @@ exports[`FluidPerformanceIndicator component should render elec indicators corre
     />
     <span
       class="MuiTouchRipple-root"
-    />
+    >
+      <span
+        class="MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
+        style="width: 2.8284271247461903px; height: 2.8284271247461903px; top: -1.4142135623730951px; left: -1.4142135623730951px;"
+      >
+        <span
+          class="MuiTouchRipple-child MuiTouchRipple-childLeaving"
+        />
+      </span>
+    </span>
   </button>
 </div>
 `;

src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { PerformanceIndicator } from 'models'
 import React from 'react'
@@ -100,14 +100,12 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
         <ElecHalfHourMonthlyAnalysis perfIndicator={mockPerfIndicator} />
       </Provider>
     )
-    await waitFor(() =>
+    await screen.findByLabelText(
+      'consumption.accessibility.button_previous_value'
+    )
+    await userEvent.click(
       screen.getByLabelText('consumption.accessibility.button_previous_value')
     )
-    await act(async () => {
-      await userEvent.click(
-        screen.getByLabelText('consumption.accessibility.button_previous_value')
-      )
-    })
     expect(screen.getByText('special_elec.week')).toBeInTheDocument()
   })
 

src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { FluidType } from 'enums'
 import React from 'react'
@@ -59,25 +59,17 @@ describe('MaxConsumptionCard component', () => {
     )
 
     // navigate next
-    await act(async () => {
-      await userEvent.click(nextButton)
-    })
+    await userEvent.click(nextButton)
     expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()
 
-    await act(async () => {
-      await userEvent.click(nextButton)
-    })
+    await userEvent.click(nextButton)
     expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()
 
     // navigate prev
-    await act(async () => {
-      await userEvent.click(prevButton)
-    })
+    await userEvent.click(prevButton)
     expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()
 
-    await act(async () => {
-      await userEvent.click(prevButton)
-    })
+    await userEvent.click(prevButton)
     expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()
   })
 })

src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx

-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -97,9 +97,7 @@ describe('AnalysisConsumption component', () => {
     expect(rows.length).toBe(4)
     expect(screen.getByTestId('iconGoToProfile')).toBeInTheDocument()
     expect(screen.queryByTestId('goToProfile')).not.toBeInTheDocument()
-    await act(async () => {
-      await userEvent.click(screen.getByTestId('iconGoToProfile'))
-    })
+    await userEvent.click(screen.getByTestId('iconGoToProfile'))
     expect(mockedNavigate).toHaveBeenCalledWith('/profileType')
   })
 })

src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import ChallengeCardDone from 'components/Challenge/ChallengeCardDone/ChallengeCardDone'
 import React from 'react'
@@ -45,9 +45,7 @@ describe('ChallengeCardDone component', () => {
         </Provider>
       )
       const resetButton = screen.getByText('challenge.card_done.reset_defi')
-      await act(async () => {
-        await userEvent.click(resetButton)
-      })
+      await userEvent.click(resetButton)
       expect(mockDispatch).toHaveBeenCalledWith({
         type: 'challenge/updateUserChallengeList',
       })

src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import ChallengeCardLast from './ChallengeCardLast'
@@ -16,9 +16,7 @@ describe('ChallengeCardLast component', () => {
     global.open = jest.fn()
 
     render(<ChallengeCardLast />)
-    await act(async () => {
-      await userEvent.click(screen.getByText('challenge.card_last.button'))
-    })
+    await userEvent.click(screen.getByText('challenge.card_last.button'))
     expect(window.open).toHaveBeenCalledTimes(1)
     expect(global.open).toHaveBeenCalledWith(
       `${__SAU_IDEA_DIRECT_LINK__}?version=0.0.0`

src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx

-import { act, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { FluidState, FluidType } from 'enums'
 import React from 'react'
@@ -39,12 +39,10 @@ describe('ChallengeCardUnlocked component', () => {
         <ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(
-        screen.getByText('challenge.card_unlocked.button_launch')
-      )
-    })
-    expect(screen.queryAllByRole('dialog').length).toBeTruthy()
+    await userEvent.click(
+      screen.getByText('challenge.card_unlocked.button_launch')
+    )
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
   })
 
   it('should not display ChallengeNoFluidModal and update userChallenge when launching challenge with configured fluid', async () => {
@@ -64,11 +62,9 @@ describe('ChallengeCardUnlocked component', () => {
         <ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(
-        screen.getByText('challenge.card_unlocked.button_launch')
-      )
-    })
+    await userEvent.click(
+      screen.getByText('challenge.card_unlocked.button_launch')
+    )
     expect(screen.queryAllByRole('dialog').length).toBeFalsy()
     expect(mockStartUserChallenge).toHaveBeenCalledWith(userChallengeData[0])
   })

src/components/Charts/Bar.spec.tsx

-import { act, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { scaleLinear } from 'd3'
 import { FluidType, TimeStep } from 'enums'
@@ -127,9 +127,7 @@ describe('Bar component test', () => {
         </svg>
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(container.querySelector('rect') as Element)
-    })
+    await userEvent.click(container.querySelector('rect') as Element)
     expect(setSelectedDateSpy).toHaveBeenCalledTimes(1)
     expect(setSelectedDateSpy).toHaveBeenCalledWith(
       graphData.actualData[0].date