diff --git a/src/components/TotalConsumption/TotalConsumption.spec.tsx b/src/components/TotalConsumption/TotalConsumption.spec.tsx
index a427bd1cac2d56d05c8c9eaee6663c9c0fe5597d..de4e50f332f7ea6b6b7b7886b28f3653b5c203e3 100644
--- a/src/components/TotalConsumption/TotalConsumption.spec.tsx
+++ b/src/components/TotalConsumption/TotalConsumption.spec.tsx
@@ -1,10 +1,9 @@
+import { render, screen, waitFor } from '@testing-library/react'
 import { FluidType, TimeStep } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { graphData } from 'tests/__mocks__/chartData.mock'
 import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import TotalConsumption from './TotalConsumption'
 
 const mockChartStore = createMockEcolyoStore({
@@ -15,34 +14,25 @@ const mockChartStore = createMockEcolyoStore({
 })
 
 describe('TotalConsumption component', () => {
-  it('should be rendered correctly', async () => {
-    const component = mount(
+  it('should be rendered correctly and render euro value', async () => {
+    const { container } = render(
       <Provider store={mockChartStore}>
         <TotalConsumption fluidType={FluidType.ELECTRICITY} />
       </Provider>
     )
-    await waitForComponentToPaint(component)
-    expect(component).toMatchSnapshot()
+    await waitFor(() => null, { container })
+    expect(container).toMatchSnapshot()
+    expect(screen.getByText('22,77')).toBeInTheDocument()
   })
-  it('should render euro value', async () => {
-    const component = mount(
-      <Provider store={mockChartStore}>
-        <TotalConsumption fluidType={FluidType.ELECTRICITY} />
-      </Provider>
-    )
-    await waitForComponentToPaint(component)
 
-    expect(component.find('.euro-value').first().text()).toEqual('22,77')
-  })
   it('should format multifluid value', async () => {
-    const component = mount(
+    const { container } = render(
       <Provider store={mockChartStore}>
         <TotalConsumption fluidType={FluidType.MULTIFLUID} />
       </Provider>
     )
-    await waitForComponentToPaint(component)
-
-    expect(component.find('.euro-value').first().text()).toEqual('130,84')
+    await waitFor(() => null, { container })
+    expect(screen.getByText('130,84')).toBeInTheDocument()
   })
   it('should format multifluid value AND compared value', async () => {
     const store = createMockEcolyoStore({
@@ -53,25 +43,23 @@ describe('TotalConsumption component', () => {
         currentTimeStep: TimeStep.DAY,
       },
     })
-    const component = mount(
+    const { container } = render(
       <Provider store={store}>
         <TotalConsumption fluidType={FluidType.MULTIFLUID} />
       </Provider>
     )
-    await waitForComponentToPaint(component)
-
-    expect(component.find('.euro-value').first().text()).toEqual('130,84')
-    expect(component.find('.euro-value').at(1).text()).toEqual('110,66')
+    await waitFor(() => null, { container })
+    expect(screen.getByText('130,84')).toBeInTheDocument()
+    expect(screen.getByText('110,66')).toBeInTheDocument()
   })
   it('should display ----- when half an hour electricity data is not activated', async () => {
     const store = createMockEcolyoStore()
-    const component = mount(
+    const { container } = render(
       <Provider store={store}>
         <TotalConsumption fluidType={FluidType.ELECTRICITY} />
       </Provider>
     )
-    await waitForComponentToPaint(component)
-
-    expect(component.find('.euro-value').first().text()).toEqual('-----')
+    await waitFor(() => null, { container })
+    expect(screen.getByText('-----')).toBeInTheDocument()
   })
 })
diff --git a/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap b/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
index 3a565c6656bae3808174e19bca79707febf5a9be..307e792394c41eb30c0babdebbfae70d8839bc86 100644
--- a/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
+++ b/src/components/TotalConsumption/__snapshots__/TotalConsumption.spec.tsx.snap
@@ -1,3 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TotalConsumption component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`TotalConsumption component should be rendered correctly and render euro value 1`] = `
+<div>
+  <div
+    class="icon-line "
+  >
+    <svg
+      aria-hidden="true"
+      class="pile-icon styles__icon___23x3R"
+      height="36"
+      width="36"
+    >
+      <use
+        xlink:href="#test-file-stub"
+      />
+    </svg>
+    <div>
+      <span
+        class="euro-value"
+      >
+        22,77
+      </span>
+      <span
+        class="euro-symbol"
+      >
+         €
+      </span>
+    </div>
+  </div>
+</div>
+`;