🔧(front) configure for @testing-library/jest-dom version 6

The @testing-library/jest-dom new version has a breaking change. The
type must be included in the tscfong file as explain in this issue
testing-library/jest-dom#517 (comment)

src/frontend/packages/lib_tests/src/imageSnapshot.tsx

@@ -2,13 +2,16 @@ import path from 'path';
 
 import { cleanup, render } from '@testing-library/react';
 import { Grommet } from 'grommet';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import { GenerateImageOptions, generateImage } from 'jsdom-screenshot';
 import { GlobalStyles, theme } from 'lib-common';
 import React from 'react';
 
 import { wrapInIntlProvider } from './intl';
 import { wrapInRouter } from './router';
 
+expect.extend({ toMatchImageSnapshot });
+
 const checkSnapshot = () => {
   // check if test name contains '[screenshot]'
   if (!expect.getState().currentTestName?.includes('[screenshot]')) {

src/frontend/packages/lib_tests/src/wrapper.tsx

@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Fragment, PropsWithChildren } from 'react';
+import 'jest-styled-components';
 
 import { RenderOptions, appendUtilsElement } from './render';
 

src/frontend/packages/marsha-config/jest/testSetup.js

@@ -5,12 +5,9 @@ import '@testing-library/jest-dom';
 // Add TextEncoder & TextDecoder to jsdom
 import { TextEncoder, TextDecoder } from 'util';
 
-import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-expect.extend({ toMatchImageSnapshot });
-
 // see https://github.com/jsdom/jsdom/issues/2524
 global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder;

src/frontend/packages/marsha-config/tsconfig/tsc-base.json

@@ -14,7 +14,8 @@
     "noUnusedParameters": false,
     "preserveWatchOutput": true,
     "skipLibCheck": true,
-    "strict": true
+    "strict": true,
+    "types": ["@testing-library/jest-dom"]
   },
   "exclude": ["node_modules"]
 }