[NO JIRA] Upgrade jest-emotion --> @emotion/jest

25 files changed, 132 insertions, 522 deletions

diff --git a/server/sonar-web/jest.config.js b/server/sonar-web/jest.config.js
index dfe11fab60d..38e2b543ac4 100644
--- a/server/sonar-web/jest.config.js
+++ b/server/sonar-web/jest.config.js
@@ -4,22 +4,22 @@ module.exports = {
   coverageReporters: ['lcovonly', 'text'],
   globals: {
     'ts-jest': {
-      diagnostics: false
-    }
+      diagnostics: false,
+    },
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
   moduleNameMapper: {
     '^.+\\.(md|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/config/jest/FileStub.js',
-    '^.+\\.css$': '<rootDir>/config/jest/CSSStub.js'
+    '^.+\\.css$': '<rootDir>/config/jest/CSSStub.js',
   },
   setupFiles: [
     '<rootDir>/config/polyfills.ts',
     '<rootDir>/config/jest/SetupEnzyme.ts',
-    '<rootDir>/config/jest/SetupTestEnvironment.ts'
+    '<rootDir>/config/jest/SetupTestEnvironment.ts',
   ],
   setupFilesAfterEnv: ['<rootDir>/config/jest/SetupReactTestingLibrary.ts'],
-  snapshotSerializers: ['enzyme-to-json/serializer', 'jest-emotion'],
+  snapshotSerializers: ['enzyme-to-json/serializer', '@emotion/jest/serializer'],
   testEnvironment: 'jsdom',
   testPathIgnorePatterns: ['<rootDir>/config', '<rootDir>/node_modules', '<rootDir>/scripts'],
   testRegex: '(/__tests__/.*|\\-test)\\.(ts|tsx|js)$',
@@ -28,10 +28,10 @@ module.exports = {
       '@swc/jest',
       {
         jsc: {
-          target: 'es2018'
-        }
-      }
-    ]
+          target: 'es2018',
+        },
+      },
+    ],
   },
   transformIgnorePatterns: ['/node_modules/(?!(d3-.+))/'],
   reporters: [
@@ -44,15 +44,15 @@ module.exports = {
         ancestorSeparator: ' > ',
         suiteNameTemplate: '{filename}',
         classNameTemplate: '{classname}',
-        titleTemplate: '{title}'
-      }
+        titleTemplate: '{title}',
+      },
     ],
     [
       './config/jest/ElasticSearchReporter.js',
       {
-        outputFilepath: '/tmp/ut-ts-web-monitoring.log'
-      }
-    ]
+        outputFilepath: '/tmp/ut-ts-web-monitoring.log',
+      },
+    ],
   ],
-  testTimeout: 30000
+  testTimeout: 30000,
 };
diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index 52c98cae9ef..abfbddd7bda 100644
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -86,7 +86,6 @@
     "fs-extra": "11.1.0",
     "http-proxy": "1.18.1",
     "jest": "29.3.1",
-    "jest-emotion": "10.0.32",
     "jest-environment-jsdom": "29.3.1",
     "jest-junit": "13.0.0",
     "jsdom": "20.0.3",
diff --git a/server/sonar-web/src/main/js/app/components/search/__tests__/__snapshots__/SearchShowMore-test.tsx.snap b/server/sonar-web/src/main/js/app/components/search/__tests__/__snapshots__/SearchShowMore-test.tsx.snap
index 85382613b9f..e6cdc125060 100644
--- a/server/sonar-web/src/main/js/app/components/search/__tests__/__snapshots__/SearchShowMore-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/search/__tests__/__snapshots__/SearchShowMore-test.tsx.snap
@@ -10,7 +10,6 @@ exports[`should render 1`] = `
     loading={false}
   >
     <a
-      className=""
       data-qualifier="TRK"
       href="#"
       onClick={[Function]}
diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/ComponentSourceSnippetGroupViewer-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/ComponentSourceSnippetGroupViewer-test.tsx.snap
index 668109f9bab..7f4265201c2 100644
--- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/ComponentSourceSnippetGroupViewer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/__tests__/__snapshots__/ComponentSourceSnippetGroupViewer-test.tsx.snap
@@ -11,7 +11,6 @@ exports[`should render correctly 1`] = `
         "name": "master",
       }
     }
-    className=""
     expandable={true}
     loading={false}
     onExpand={[Function]}
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchListRow-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchListRow-test.tsx.snap
index 5df9d7b064a..944ad428b4f 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchListRow-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchListRow-test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: branch with number of days 1`] = `
-<tr
-  className=""
->
+<tr>
   <td
     className="nowrap"
   >
@@ -53,9 +51,7 @@ exports[`should render correctly: branch with number of days 1`] = `
 `;
 
 exports[`should render correctly: branch with previous version 1`] = `
-<tr
-  className=""
->
+<tr>
   <td
     className="nowrap"
   >
@@ -104,9 +100,7 @@ exports[`should render correctly: branch with previous version 1`] = `
 `;
 
 exports[`should render correctly: branch with reference branch 1`] = `
-<tr
-  className=""
->
+<tr>
   <td
     className="nowrap"
   >
@@ -156,9 +150,7 @@ exports[`should render correctly: branch with reference branch 1`] = `
 `;
 
 exports[`should render correctly: branch with specific analysis 1`] = `
-<tr
-  className=""
->
+<tr>
   <td
     className="nowrap"
   >
@@ -260,9 +252,7 @@ exports[`should render correctly: faulty branch 1`] = `
 `;
 
 exports[`should render correctly: main branch with default 1`] = `
-<tr
-  className=""
->
+<tr>
   <td
     className="nowrap"
   >
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap
index 44825139d16..864ca534348 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap
@@ -80,9 +80,7 @@ exports[`should handle the descending sort direction 1`] = `
       innerRef={[Function]}
       onClick={[Function]}
     >
-      <SortDescIcon
-        className=""
-      />
+      <SortDescIcon />
     </ButtonIcon>
   </Tooltip>
 </div>
@@ -175,9 +173,7 @@ exports[`should render correctly for leak view 1`] = `
       innerRef={[Function]}
       onClick={[Function]}
     >
-      <SortAscIcon
-        className=""
-      />
+      <SortAscIcon />
     </ButtonIcon>
   </Tooltip>
 </div>
@@ -270,9 +266,7 @@ exports[`should render correctly for overall view 1`] = `
       innerRef={[Function]}
       onClick={[Function]}
     >
-      <SortAscIcon
-        className=""
-      />
+      <SortAscIcon />
     </ButtonIcon>
   </Tooltip>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/__snapshots__/ProjectCardMeasures-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/__snapshots__/ProjectCardMeasures-test.tsx.snap
index 20d8cf07dd1..8d9c7eb4cb3 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/__snapshots__/ProjectCardMeasures-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/__snapshots__/ProjectCardMeasures-test.tsx.snap
@@ -34,7 +34,6 @@ exports[`New code measures should be rendered properly 1`] = `
       className="bordered-left little-spacer"
     />
     <ProjectCardMeasure
-      className=""
       key="new_vulnerabilities"
       label="metric.vulnerabilities.name"
       metricKey="new_vulnerabilities"
@@ -57,7 +56,6 @@ exports[`New code measures should be rendered properly 1`] = `
       className="bordered-left little-spacer"
     />
     <ProjectCardMeasure
-      className=""
       iconKey="security_hotspots"
       key="new_security_hotspots_reviewed"
       label="projects.security_hotspots_reviewed"
@@ -78,7 +76,6 @@ exports[`New code measures should be rendered properly 1`] = `
       className="bordered-left little-spacer"
     />
     <ProjectCardMeasure
-      className=""
       key="new_code_smells"
       label="metric.code_smells.name"
       metricKey="new_code_smells"
@@ -196,7 +193,6 @@ exports[`Overall measures should be rendered properly 1`] = `
       className="bordered-left little-spacer"
     />
     <ProjectCardMeasure
-      className=""
       key="vulnerabilities"
       label="metric.vulnerabilities.name"
       metricKey="vulnerabilities"
@@ -219,7 +215,6 @@ exports[`Overall measures should be rendered properly 1`] = `
       className="bordered-left little-spacer"
     />
     <ProjectCardMeasure
-      className=""
       iconKey="security_hotspots"
       key="security_hotspots_reviewed"
       label="projects.security_hotspots_reviewed"
@@ -240,7 +235,6 @@ exports[`Overall measures should be rendered properly 1`] = `
       className="bordered-left little-spacer"
     />
     <ProjectCardMeasure
-      className=""
       key="code_smells"
       label="metric.code_smells.name"
       metricKey="code_smells"
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/Filter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/Filter-test.tsx.snap
index a314e5e8921..a9b455d7bcf 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/Filter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/Filter-test.tsx.snap
@@ -9,7 +9,6 @@ exports[`highlights under 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <li
-      className=""
       key="1"
     >
       <button
@@ -84,7 +83,6 @@ exports[`hightlights under selected 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <li
-      className=""
       key="1"
     >
       <button
@@ -159,7 +157,6 @@ exports[`renders 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <li
-      className=""
       key="1"
     >
       <button
@@ -180,7 +177,6 @@ exports[`renders 1`] = `
       </button>
     </li>
     <li
-      className=""
       key="2"
     >
       <button
@@ -201,7 +197,6 @@ exports[`renders 1`] = `
       </button>
     </li>
     <li
-      className=""
       key="3"
     >
       <button
@@ -234,7 +229,6 @@ exports[`renders facet bar chart 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <li
-      className=""
       key="a"
     >
       <button
@@ -272,7 +266,6 @@ exports[`renders facet bar chart 1`] = `
       </button>
     </li>
     <li
-      className=""
       key="b"
     >
       <button
@@ -310,7 +303,6 @@ exports[`renders facet bar chart 1`] = `
       </button>
     </li>
     <li
-      className=""
       key="c"
     >
       <button
@@ -361,7 +353,6 @@ exports[`renders header and footer 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <li
-      className=""
       key="1"
     >
       <button
@@ -382,7 +373,6 @@ exports[`renders header and footer 1`] = `
       </button>
     </li>
     <li
-      className=""
       key="2"
     >
       <button
@@ -403,7 +393,6 @@ exports[`renders header and footer 1`] = `
       </button>
     </li>
     <li
-      className=""
       key="3"
     >
       <button
@@ -479,7 +468,6 @@ exports[`renders multiple selected 1`] = `
       </button>
     </li>
     <li
-      className=""
       key="3"
     >
       <button
@@ -527,7 +515,6 @@ exports[`renders selected 1`] = `
     className="search-navigator-facet-list projects-facet-list"
   >
     <li
-      className=""
       key="1"
     >
       <button
@@ -569,7 +556,6 @@ exports[`renders selected 1`] = `
       </button>
     </li>
     <li
-      className=""
       key="3"
     >
       <button
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.tsx.snap
index ca075b1de55..e0de880f2c5 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.tsx.snap
@@ -144,7 +144,6 @@ exports[`should render the languages facet with the selected languages 2`] = `
       </button>
     </li>
     <li
-      className=""
       key="js"
     >
       <button
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.tsx.snap
index 9754909b5eb..ee936ccc3b6 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.tsx.snap
@@ -217,7 +217,6 @@ exports[`should render the tags facet with the selected tags 2`] = `
       </button>
     </li>
     <li
-      className=""
       key="csharp"
     >
       <button
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ProfileActions-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ProfileActions-test.tsx.snap
index aa7d7f0de0d..3dfb0960ba5 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ProfileActions-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ProfileActions-test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`renders correctly: all permissions 1`] = `
 <Fragment>
   <ActionsDropdown
-    className=""
     label="quality_profiles.actions.name.JavaScript"
   >
     <ActionsDropdownItem
@@ -78,7 +77,6 @@ exports[`renders correctly: all permissions 1`] = `
 exports[`renders correctly: copy modal 1`] = `
 <Fragment>
   <ActionsDropdown
-    className=""
     label="quality_profiles.actions.name.JavaScript"
   >
     <ActionsDropdownItem
@@ -129,7 +127,6 @@ exports[`renders correctly: copy modal 1`] = `
 exports[`renders correctly: delete modal 1`] = `
 <Fragment>
   <ActionsDropdown
-    className=""
     label="quality_profiles.actions.name.JavaScript"
   >
     <ActionsDropdownItem
@@ -179,7 +176,6 @@ exports[`renders correctly: delete modal 1`] = `
 exports[`renders correctly: edit only 1`] = `
 <Fragment>
   <ActionsDropdown
-    className=""
     label="quality_profiles.actions.name.JavaScript"
   >
     <ActionsDropdownItem
@@ -224,7 +220,6 @@ exports[`renders correctly: edit only 1`] = `
 exports[`renders correctly: extend modal 1`] = `
 <Fragment>
   <ActionsDropdown
-    className=""
     label="quality_profiles.actions.name.JavaScript"
   >
     <ActionsDropdownItem
@@ -275,7 +270,6 @@ exports[`renders correctly: extend modal 1`] = `
 exports[`renders correctly: no permissions 1`] = `
 <Fragment>
   <ActionsDropdown
-    className=""
     label="quality_profiles.actions.name.JavaScript"
   >
     <ActionsDropdownItem
@@ -303,7 +297,6 @@ exports[`renders correctly: no permissions 1`] = `
 exports[`renders correctly: rename modal 1`] = `
 <Fragment>
   <ActionsDropdown
-    className=""
     label="quality_profiles.actions.name.JavaScript"
   >
     <ActionsDropdownItem
@@ -354,7 +347,6 @@ exports[`renders correctly: rename modal 1`] = `
 exports[`should not allow to set a profile as the default if the profile has no active rules 1`] = `
 <Fragment>
   <ActionsDropdown
-    className=""
     label="quality_profiles.actions.name.JavaScript"
   >
     <ActionsDropdownItem
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCommentPopup-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCommentPopup-test.tsx.snap
index 208ccf2633e..b64b02e320e 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCommentPopup-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCommentPopup-test.tsx.snap
@@ -22,9 +22,7 @@ exports[`should render correclty 1`] = `
     >
       <FormattingTips />
     </div>
-    <div
-      className=""
-    >
+    <div>
       <Button
         className="little-spacer-right"
         onClick={[Function]}
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusDescription-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusDescription-test.tsx.snap
index a2062714e3b..c939658a273 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusDescription-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/__tests__/__snapshots__/StatusDescription-test.tsx.snap
@@ -38,9 +38,7 @@ exports[`should render correctly: with title 1`] = `
 exports[`should render correctly: without status in badge 1`] = `
 <Styled(div)>
   <h3>
-    <div
-      className=""
-    >
+    <div>
       hotspots.status_option.TO_REVIEW
     </div>
   </h3>
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/TokensFormItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/TokensFormItem-test.tsx.snap
index 72ac5758063..9f54f8afd36 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/TokensFormItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/TokensFormItem-test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<tr
-  className=""
->
+<tr>
   <td
     className="hide-overflow nowrap"
     title="foo"
@@ -59,9 +57,7 @@ exports[`should render correctly 1`] = `
 `;
 
 exports[`should render correctly 2`] = `
-<tr
-  className=""
->
+<tr>
   <td
     className="hide-overflow nowrap"
     title="foo"
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Action-test.tsx.snap b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Action-test.tsx.snap
index 3bd42dc7b85..6a646251d00 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Action-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/web-api/components/__tests__/__snapshots__/Action-test.tsx.snap
@@ -132,7 +132,6 @@ exports[`should render correctly 1`] = `
     >
       <li>
         <a
-          className=""
           href="#"
           onClick={[Function]}
         >
@@ -141,7 +140,6 @@ exports[`should render correctly 1`] = `
       </li>
       <li>
         <a
-          className=""
           href="#"
           onClick={[Function]}
         >
@@ -150,7 +148,6 @@ exports[`should render correctly 1`] = `
       </li>
       <li>
         <a
-          className=""
           href="#"
           onClick={[Function]}
         >
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineCode-test.tsx.snap b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineCode-test.tsx.snap
index 24aff0fb75d..f1aa3c446c3 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineCode-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineCode-test.tsx.snap
@@ -22,7 +22,6 @@ exports[`render code 1`] = `
         t
       </span>
       <span
-        className=""
         key="2"
       >
          java.util.
@@ -34,7 +33,6 @@ exports[`render code 1`] = `
         ArrayList
       </span>
       <span
-        className=""
         key="4"
       >
         ;
@@ -66,7 +64,6 @@ exports[`render code: with additional child 1`] = `
         t
       </span>
       <span
-        className=""
         key="2"
       >
          java.util.
@@ -78,7 +75,6 @@ exports[`render code: with additional child 1`] = `
         ArrayList
       </span>
       <span
-        className=""
         key="4"
       >
         ;
@@ -134,7 +130,6 @@ exports[`render code: with secondary location 1`] = `
         t
       </span>
       <span
-        className=""
         key="2"
       >
          java.util.
@@ -146,7 +141,6 @@ exports[`render code: with secondary location 1`] = `
         ArrayList
       </span>
       <span
-        className=""
         key="4"
       >
         ;
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DisableableSelectOption-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DisableableSelectOption-test.tsx.snap
index ac1d9597703..5ed0c2ae05a 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DisableableSelectOption-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DisableableSelectOption-test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: default 1`] = `
-<span
-  className=""
->
+<span>
   Foo
 </span>
 `;
@@ -13,9 +11,7 @@ exports[`should render correctly: disabled 1`] = `
   overlay="foo bar"
   placement="left"
 >
-  <span
-    className=""
-  >
+  <span>
     Bar
   </span>
 </Tooltip>
@@ -26,9 +22,7 @@ exports[`should render correctly: disabled, with explanation 1`] = `
   overlay="foo bar"
   placement="left"
 >
-  <span
-    className=""
-  >
+  <span>
     Bar
     <em
       className="small little-spacer-left"
@@ -42,9 +36,7 @@ exports[`should render correctly: disabled, with explanation 1`] = `
 `;
 
 exports[`should render correctly: no label 1`] = `
-<span
-  className=""
->
+<span>
   baz
 </span>
 `;
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap
index bd319c9b038..7ffbbc16664 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap
@@ -8,7 +8,6 @@ exports[`should render correctly with a tooltip 1`] = `
   <li>
     <ButtonPlain
       aria-selected={false}
-      className=""
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -29,7 +28,6 @@ exports[`should render correctly with children 1`] = `
   <li>
     <ButtonPlain
       aria-selected={false}
-      className=""
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -55,7 +53,6 @@ exports[`should render correctly without children 1`] = `
   <li>
     <ButtonPlain
       aria-selected={false}
-      className=""
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BoxedTabs-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BoxedTabs-test.tsx.snap
index c0396689423..804db4b4d9b 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BoxedTabs-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BoxedTabs-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-.emotion-6 {
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -29,7 +29,7 @@ exports[`should render correctly 1`] = `
   border-right: 1px solid #e6e6e6;
 }
 
-.emotion-0 {
+.emotion-2 {
   display: block;
   background-color: #4b9fd5;
   height: 3px;
@@ -62,7 +62,7 @@ exports[`should render correctly 1`] = `
   border-right: 1px solid #e6e6e6;
 }
 
-.emotion-2 {
+.emotion-4 {
   display: none;
   background-color: #4b9fd5;
   height: 3px;
@@ -126,7 +126,7 @@ exports[`should render correctly 1`] = `
                 data-s=""
               >
                 
-                .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
               </style>
               <style
                 data-emotion="css"
@@ -147,7 +147,7 @@ exports[`should render correctly 1`] = `
                 data-s=""
               >
                 
-                .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
               </style>
               <style
                 data-emotion="css"
@@ -175,7 +175,7 @@ exports[`should render correctly 1`] = `
                 data-s=""
               >
                 
-                .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
               </style>
             </head>,
             "ctr": 8,
@@ -190,7 +190,7 @@ exports[`should render correctly 1`] = `
                 data-s=""
               >
                 
-                .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
               </style>,
               <style
                 data-emotion="css"
@@ -211,7 +211,7 @@ exports[`should render correctly 1`] = `
                 data-s=""
               >
                 
-                .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
               </style>,
               <style
                 data-emotion="css"
@@ -239,7 +239,7 @@ exports[`should render correctly 1`] = `
                 data-s=""
               >
                 
-                .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
               </style>,
             ],
           },
@@ -260,7 +260,7 @@ exports[`should render correctly 1`] = `
       }
     />
     <div
-      className="boxed-tabs emotion-6"
+      className="boxed-tabs emotion-0"
       role="tablist"
     >
       <Styled(button)
@@ -296,7 +296,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                    .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                   </style>
                   <style
                     data-emotion="css"
@@ -317,7 +317,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                   <style
                     data-emotion="css"
@@ -345,7 +345,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                 </head>,
                 "ctr": 8,
@@ -360,7 +360,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                    .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                   </style>,
                   <style
                     data-emotion="css"
@@ -381,7 +381,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                   <style
                     data-emotion="css"
@@ -409,7 +409,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                 ],
               },
@@ -480,7 +480,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                        .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                       </style>
                       <style
                         data-emotion="css"
@@ -501,7 +501,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                       <style
                         data-emotion="css"
@@ -529,7 +529,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                     </head>,
                     "ctr": 8,
@@ -544,7 +544,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                        .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                       </style>,
                       <style
                         data-emotion="css"
@@ -565,7 +565,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                       <style
                         data-emotion="css"
@@ -593,7 +593,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                     ],
                   },
@@ -619,7 +619,7 @@ exports[`should render correctly 1`] = `
               }
             />
             <div
-              className="emotion-0"
+              className="emotion-2"
             />
           </Styled(div)>
           labela
@@ -658,7 +658,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                    .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                   </style>
                   <style
                     data-emotion="css"
@@ -679,7 +679,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                   <style
                     data-emotion="css"
@@ -707,7 +707,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                 </head>,
                 "ctr": 8,
@@ -722,7 +722,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                    .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                   </style>,
                   <style
                     data-emotion="css"
@@ -743,7 +743,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                   <style
                     data-emotion="css"
@@ -771,7 +771,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                 ],
               },
@@ -846,7 +846,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                        .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                       </style>
                       <style
                         data-emotion="css"
@@ -867,7 +867,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                       <style
                         data-emotion="css"
@@ -895,7 +895,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                     </head>,
                     "ctr": 8,
@@ -910,7 +910,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                        .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                       </style>,
                       <style
                         data-emotion="css"
@@ -931,7 +931,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                       <style
                         data-emotion="css"
@@ -959,7 +959,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                     ],
                   },
@@ -985,7 +985,7 @@ exports[`should render correctly 1`] = `
               }
             />
             <div
-              className="emotion-2"
+              className="emotion-4"
             />
           </Styled(div)>
           labelb
@@ -1024,7 +1024,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                    .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                   </style>
                   <style
                     data-emotion="css"
@@ -1045,7 +1045,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                   <style
                     data-emotion="css"
@@ -1073,7 +1073,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>
                 </head>,
                 "ctr": 8,
@@ -1088,7 +1088,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                    .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                   </style>,
                   <style
                     data-emotion="css"
@@ -1109,7 +1109,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                   <style
                     data-emotion="css"
@@ -1137,7 +1137,7 @@ exports[`should render correctly 1`] = `
                     data-s=""
                   >
                     
-                    .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                    .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                   </style>,
                 ],
               },
@@ -1212,7 +1212,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                        .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                       </style>
                       <style
                         data-emotion="css"
@@ -1233,7 +1233,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                       <style
                         data-emotion="css"
@@ -1261,7 +1261,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>
                     </head>,
                     "ctr": 8,
@@ -1276,7 +1276,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
+                        .emotion-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
                       </style>,
                       <style
                         data-emotion="css"
@@ -1297,7 +1297,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-0{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-2{display:block;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                       <style
                         data-emotion="css"
@@ -1325,7 +1325,7 @@ exports[`should render correctly 1`] = `
                         data-s=""
                       >
                         
-                        .emotion-2{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
+                        .emotion-4{display:none;background-color:#4b9fd5;height:3px;width:100%;position:absolute;left:0;top:-1px;}
                       </style>,
                     ],
                   },
@@ -1351,7 +1351,7 @@ exports[`should render correctly 1`] = `
               }
             />
             <div
-              className="emotion-2"
+              className="emotion-4"
             />
           </Styled(div)>
           <span>
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ModalValidationField-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ModalValidationField-test.tsx.snap
index 4b4e605c0ad..cc15270b4b8 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ModalValidationField-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ModalValidationField-test.tsx.snap
@@ -47,7 +47,6 @@ exports[`should display the field without any error/validation 1`] = `
     Foo
   </label>
   <input
-    className=""
     type="text"
   />
   <div
@@ -66,7 +65,6 @@ exports[`should display the field without any error/validation 2`] = `
     Foo
   </label>
   <input
-    className=""
     type="text"
   />
 </div>
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap
index d2d9cf30567..1fcb716aab0 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap
@@ -19,7 +19,6 @@ exports[`should be disabled 1`] = `
 
 exports[`should display all selected items 1`] = `
 <FacetBox
-  className=""
   property="foo"
 >
   <FacetHeader
@@ -101,7 +100,6 @@ exports[`should display all selected items 1`] = `
 
 exports[`should render 1`] = `
 <FacetBox
-  className=""
   property="foo"
 >
   <FacetHeader
@@ -170,7 +168,6 @@ exports[`should render 1`] = `
 
 exports[`should search 1`] = `
 <FacetBox
-  className=""
   property="foo"
 >
   <FacetHeader
@@ -230,7 +227,6 @@ exports[`should search 1`] = `
 
 exports[`should search 2`] = `
 <FacetBox
-  className=""
   property="foo"
 >
   <FacetHeader
@@ -301,7 +297,6 @@ exports[`should search 2`] = `
 
 exports[`should search 3`] = `
 <FacetBox
-  className=""
   property="foo"
 >
   <FacetHeader
@@ -370,7 +365,6 @@ exports[`should search 3`] = `
 
 exports[`should search 4`] = `
 <FacetBox
-  className=""
   property="foo"
 >
   <FacetHeader
@@ -404,7 +398,6 @@ exports[`should search 4`] = `
 
 exports[`should search 5`] = `
 <FacetBox
-  className=""
   property="foo"
 >
   <FacetHeader
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/PageShortcutsTooltip-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/PageShortcutsTooltip-test.tsx
index 34de9c12318..8cef344f439 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/PageShortcutsTooltip-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/PageShortcutsTooltip-test.tsx
@@ -17,19 +17,49 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { shallow } from 'enzyme';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
 import PageShortcutsTooltip, { PageShortcutsTooltipProps } from '../PageShortcutsTooltip';
 
-it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot('default');
-  expect(shallowRender({ upAndDownLabel: 'foo', leftAndRightLabel: 'bar' })).toMatchSnapshot(
-    'with up/down and left/right labels'
-  );
-  expect(shallowRender({ leftLabel: 'baz' })).toMatchSnapshot('only left label');
-  expect(shallowRender({ metaModifierLabel: 'funky' })).toMatchSnapshot('with meta label');
+const leftAndRightLabel = 'left & right';
+const leftLabel = 'left';
+const upAndDownLabel = 'up & down';
+const metaModifierLabel = 'meta';
+
+it('should render all the labels', async () => {
+  const user = userEvent.setup();
+
+  renderPageShortcutsTooltip({
+    leftAndRightLabel,
+    leftLabel,
+    upAndDownLabel,
+    metaModifierLabel,
+  });
+
+  await user.hover(screen.getByText('←'));
+
+  expect(await screen.findByText(leftAndRightLabel)).toBeInTheDocument();
+  expect(screen.getByText(leftLabel)).toBeInTheDocument();
+  expect(screen.getByText(upAndDownLabel)).toBeInTheDocument();
+  expect(screen.getByText(metaModifierLabel)).toBeInTheDocument();
+});
+
+it('should render left & right labels without up&down', async () => {
+  const user = userEvent.setup();
+
+  renderPageShortcutsTooltip({
+    leftAndRightLabel,
+    leftLabel,
+  });
+
+  await user.hover(screen.getByText('←'));
+
+  expect(await screen.findByText(leftAndRightLabel)).toBeInTheDocument();
+  expect(screen.getByText(leftLabel)).toBeInTheDocument();
 });
 
-function shallowRender(props: Partial<PageShortcutsTooltipProps> = {}) {
-  return shallow<PageShortcutsTooltipProps>(<PageShortcutsTooltip {...props} />);
+function renderPageShortcutsTooltip(props: Partial<PageShortcutsTooltipProps> = {}) {
+  return renderComponent(<PageShortcutsTooltip {...props} />);
 }
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap
index b6b82635f51..e60826739f7 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Alert-test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render banner alert with correct css 1`] = `
-.emotion-3 {
+.emotion-0 {
   border: 1px solid;
   border-radius: 2px;
   margin-bottom: 8px;
@@ -11,16 +11,16 @@ exports[`should render banner alert with correct css 1`] = `
   display: block;
 }
 
-.emotion-3:empty {
+.emotion-0:empty {
   display: none;
 }
 
-.emotion-3 a,
-.emotion-3 .button-link {
+.emotion-0 a,
+.emotion-0 .button-link {
   border-color: #236a97;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -38,7 +38,7 @@ exports[`should render banner alert with correct css 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-0 {
+.emotion-2 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -59,7 +59,7 @@ exports[`should render banner alert with correct css 1`] = `
   border-color: #f4b1b0;
 }
 
-.emotion-1 {
+.emotion-3 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -70,15 +70,15 @@ exports[`should render banner alert with correct css 1`] = `
 
 <div
   aria-label="alert.tooltip.error"
-  class="alert alert-test emotion-3"
+  class="alert alert-test emotion-0"
   id="error-message"
   role="alert"
 >
   <div
-    class="emotion-2"
+    class="emotion-1"
   >
     <div
-      class="emotion-0"
+      class="emotion-2"
     >
       <svg
         height="16"
@@ -96,7 +96,7 @@ exports[`should render banner alert with correct css 1`] = `
       </svg>
     </div>
     <div
-      class="alert-content emotion-1"
+      class="alert-content emotion-3"
     >
       This is an error!
     </div>
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/PageShortcutsTooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/PageShortcutsTooltip-test.tsx.snap
deleted file mode 100644
index cb4aa6e79b9..00000000000
--- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/PageShortcutsTooltip-test.tsx.snap
+++ /dev/null
@@ -1,268 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly: default 1`] = `
-<Tooltip
-  overlay={
-    <div
-      className="small nowrap"
-    >
-      <div />
-    </div>
-  }
->
-  <div
-    aria-label="
-        shortcuts.on_page.intro
-        
-        
-        
-        
-      "
-    className="page-shortcuts-tooltip note text-center display-inline-block"
-  >
-    <div>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ↑
-      </span>
-    </div>
-    <div>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ←
-      </span>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ↓
-      </span>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        →
-      </span>
-    </div>
-  </div>
-</Tooltip>
-`;
-
-exports[`should render correctly: only left label 1`] = `
-<Tooltip
-  overlay={
-    <div
-      className="small nowrap"
-    >
-      <div>
-        <span
-          className=""
-        >
-          <span
-            className="shortcut-button spacer-right"
-          >
-            ←
-          </span>
-          baz
-        </span>
-      </div>
-    </div>
-  }
->
-  <div
-    aria-label="
-        shortcuts.on_page.intro
-        
-        
-        shortcuts.on_page.left_x.baz
-        
-      "
-    className="page-shortcuts-tooltip note text-center display-inline-block"
-  >
-    <div>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ↑
-      </span>
-    </div>
-    <div>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ←
-      </span>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ↓
-      </span>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        →
-      </span>
-    </div>
-  </div>
-</Tooltip>
-`;
-
-exports[`should render correctly: with meta label 1`] = `
-<Tooltip
-  overlay={
-    <div
-      className="small nowrap"
-    >
-      <div />
-      <div
-        className="big-spacer-top big-padded-top bordered-top"
-      >
-        <span
-          className="shortcut-button little-spacer-right"
-        >
-          alt
-        </span>
-        <span
-          className="little-spacer-right"
-        >
-          +
-        </span>
-        <span
-          className="shortcut-button little-spacer-right"
-        >
-          ↑
-        </span>
-        <span
-          className="shortcut-button spacer-right"
-        >
-          ↓
-        </span>
-        <span
-          className="shortcut-button little-spacer-right"
-        >
-          ←
-        </span>
-        <span
-          className="shortcut-button spacer-right"
-        >
-          →
-        </span>
-        funky
-      </div>
-    </div>
-  }
->
-  <div
-    aria-label="
-        shortcuts.on_page.intro
-        
-        
-        
-        shortcuts.on_page.meta_x.funky
-      "
-    className="page-shortcuts-tooltip note text-center display-inline-block"
-  >
-    <div>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ↑
-      </span>
-    </div>
-    <div>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ←
-      </span>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ↓
-      </span>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        →
-      </span>
-    </div>
-  </div>
-</Tooltip>
-`;
-
-exports[`should render correctly: with up/down and left/right labels 1`] = `
-<Tooltip
-  overlay={
-    <div
-      className="small nowrap"
-    >
-      <div>
-        <span>
-          <span
-            className="shortcut-button little-spacer-right"
-          >
-            ↑
-          </span>
-          <span
-            className="shortcut-button spacer-right"
-          >
-            ↓
-          </span>
-          foo
-        </span>
-        <span
-          className="big-spacer-left"
-        >
-          <span
-            className="shortcut-button little-spacer-right"
-          >
-            ←
-          </span>
-          <span
-            className="shortcut-button spacer-right"
-          >
-            →
-          </span>
-          bar
-        </span>
-      </div>
-    </div>
-  }
->
-  <div
-    aria-label="
-        shortcuts.on_page.intro
-        shortcuts.on_page.up_down_x.foo
-        shortcuts.on_page.left_right_x.bar
-        
-        
-      "
-    className="page-shortcuts-tooltip note text-center display-inline-block"
-  >
-    <div>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ↑
-      </span>
-    </div>
-    <div>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ←
-      </span>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        ↓
-      </span>
-      <span
-        className="shortcut-button shortcut-button-tiny"
-      >
-        →
-      </span>
-    </div>
-  </div>
-</Tooltip>
-`;
diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index c38eee7e38c..c0af7d26fdf 100644
--- a/server/sonar-web/yarn.lock
+++ b/server/sonar-web/yarn.lock
@@ -2370,13 +2370,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jest@npm:^23.0.2":
-  version: 23.3.14
-  resolution: "@types/jest@npm:23.3.14"
-  checksum: 0f8ec7c7ef16c35afb17bb1c83167bb847b2a577e0298caf3d828c43026f7544eb831d63fe71bb0eee28c8724389cbf57402e5b9fe87a22b255bd79ece2c3152
-  languageName: node
-  linkType: hard
-
 "@types/jsdom@npm:^20.0.0":
   version: 20.0.1
   resolution: "@types/jsdom@npm:20.0.1"
@@ -2902,7 +2895,6 @@ __metadata:
     fs-extra: 11.1.0
     http-proxy: 1.18.1
     jest: 29.3.1
-    jest-emotion: 10.0.32
     jest-environment-jsdom: 29.3.1
     jest-junit: 13.0.0
     jsdom: 20.0.3
@@ -3687,7 +3679,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^2.0.0, chalk@npm:^2.4.1":
+"chalk@npm:^2.0.0":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
   dependencies:
@@ -4024,18 +4016,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css@npm:^2.2.1":
-  version: 2.2.4
-  resolution: "css@npm:2.2.4"
-  dependencies:
-    inherits: ^2.0.3
-    source-map: ^0.6.1
-    source-map-resolve: ^0.5.2
-    urix: ^0.1.0
-  checksum: a35d483c5ccc04bcde3b1e7393d58ad3eee1dd6956df0f152de38e46a17c0ee193c30eec6b1e59831ad0e74599385732000e95987fcc9cb2b16c6d951bae49e1
-  languageName: node
-  linkType: hard
-
 "css@npm:^3.0.0":
   version: 3.0.0
   resolution: "css@npm:3.0.0"
@@ -7030,18 +7010,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-emotion@npm:10.0.32":
-  version: 10.0.32
-  resolution: "jest-emotion@npm:10.0.32"
-  dependencies:
-    "@babel/runtime": ^7.5.5
-    "@types/jest": ^23.0.2
-    chalk: ^2.4.1
-    css: ^2.2.1
-  checksum: 9e7cb48bd71c24059d4d6575901ce23f7200d2b6b4b7ea5fe27818fb52bac2adfbe60398be12dc80d51cc5ca8d6d42933a33d118d651acea6793a60ed0b25c94
-  languageName: node
-  linkType: hard
-
 "jest-environment-jsdom@npm:29.3.1":
   version: 29.3.1
   resolution: "jest-environment-jsdom@npm:29.3.1"
@@ -9425,13 +9393,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-url@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "resolve-url@npm:0.2.1"
-  checksum: 7b7035b9ed6e7bc7d289e90aef1eab5a43834539695dac6416ca6e91f1a94132ae4796bbd173cdacfdc2ade90b5f38a3fb6186bebc1b221cd157777a23b9ad14
-  languageName: node
-  linkType: hard
-
 "resolve.exports@npm:^1.1.0":
   version: 1.1.0
   resolution: "resolve.exports@npm:1.1.0"
@@ -9837,19 +9798,6 @@ resolve@^1.2.0:
   languageName: node
   linkType: hard
 
-"source-map-resolve@npm:^0.5.2":
-  version: 0.5.3
-  resolution: "source-map-resolve@npm:0.5.3"
-  dependencies:
-    atob: ^2.1.2
-    decode-uri-component: ^0.2.0
-    resolve-url: ^0.2.1
-    source-map-url: ^0.4.0
-    urix: ^0.1.0
-  checksum: c73fa44ac00783f025f6ad9e038ab1a2e007cd6a6b86f47fe717c3d0765b4a08d264f6966f3bd7cd9dbcd69e4832783d5472e43247775b2a550d6f2155d24bae
-  languageName: node
-  linkType: hard
-
 "source-map-resolve@npm:^0.6.0":
   version: 0.6.0
   resolution: "source-map-resolve@npm:0.6.0"
@@ -9870,13 +9818,6 @@ resolve@^1.2.0:
   languageName: node
   linkType: hard
 
-"source-map-url@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "source-map-url@npm:0.4.0"
-  checksum: 63ed54045fcd7b4ec7ca17513f48fdc23b573eef679326ecf1a31333e1aaecc0a9c085adaa7d118283b160e65b71cc72da9e1385f2de4ac5ed68294e3920d719
-  languageName: node
-  linkType: hard
-
 "source-map@npm:^0.5.0, source-map@npm:^0.5.7":
   version: 0.5.7
   resolution: "source-map@npm:0.5.7"
@@ -10593,13 +10534,6 @@ resolve@^1.2.0:
   languageName: node
   linkType: hard
 
-"urix@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "urix@npm:0.1.0"
-  checksum: 4c076ecfbf3411e888547fe844e52378ab5ada2d2f27625139011eada79925e77f7fbf0e4016d45e6a9e9adb6b7e64981bd49b22700c7c401c5fc15f423303b3
-  languageName: node
-  linkType: hard
-
 "url-parse@npm:^1.5.3":
   version: 1.5.10
   resolution: "url-parse@npm:1.5.10"