Reducing the snapshot output of EuiMark unit tests. (#5772)

* Reducing the snapshot output of EuiMark unit tests. * Refactoring EuiMark test for smaller output. * Updating two snapshot tests. * Adding Emotion matchers to config, consolidating test blocks.
elastic · Apr 8, 2022 · 7aa5510 · 7aa5510
1 parent f0c17ae
commit 7aa5510
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 56 deletions.
diff --git a/scripts/jest/setup/emotion.js b/scripts/jest/setup/emotion.js
@@ -1,4 +1,6 @@
-import { createSerializer } from "@emotion/jest";
+import { createSerializer, matchers } from "@emotion/jest";
+
+expect.extend(matchers);
 
 module.exports = createSerializer({
   classNameReplacer: (className) => className,

diff --git a/src/components/mark/__snapshots__/mark.test.tsx.snap b/src/components/mark/__snapshots__/mark.test.tsx.snap
@@ -9,53 +9,3 @@ exports[`EuiMark is rendered 1`] = `
   Marked
 </mark>
 `;
-
-exports[`EuiMark is rendered: renders with emotion styles 1`] = `
-.css-b9vly9-euiMarkStyles-EuiMark {
-  background-color: rgba(0,119,204,0.1);
-  font-weight: 700;
-  color: #343741;
-}
-
-.css-b9vly9-euiMarkStyles-EuiMark:before,
-.css-b9vly9-euiMarkStyles-EuiMark:after {
-  -webkit-clip-path: inset(100%);
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.css-b9vly9-euiMarkStyles-EuiMark:before {
-  content: ' [highlight start] ';
-}
-
-.css-b9vly9-euiMarkStyles-EuiMark:after {
-  content: ' [highlight end] ';
-}
-
-<mark
-  class="euiMark css-b9vly9-euiMarkStyles-EuiMark"
->
-  Marked
-</mark>
-`;
-
-exports[`No screen reader helper text is rendered without CSS :before and :after text 1`] = `
-.css-dtzpxu-euiMarkStyles-EuiMark {
-  background-color: rgba(0,119,204,0.1);
-  font-weight: 700;
-  color: #343741;
-}
-
-<mark
-  aria-label="aria-label"
-  class="euiMark testClass1 testClass2 css-dtzpxu-euiMarkStyles-EuiMark"
-  data-test-subj="test subject string"
->
-  Marked
-</mark>
-`;
diff --git a/src/components/mark/mark.test.tsx b/src/components/mark/mark.test.tsx
@@ -21,18 +21,24 @@ describe('EuiMark', () => {
       render(<EuiMark {...requiredProps}>Marked</EuiMark>)
     ).toMatchSnapshot();
   });
-});
 
-describe('No screen reader helper text', () => {
-  renderWithStyles(<EuiMark>Marked</EuiMark>);
+  test('is rendered without CSS :before', () => {
+    expect(
+      render(
+        <EuiMark hasScreenReaderHelpText={false} {...requiredProps}>
+          Marked
+        </EuiMark>
+      )
+    ).not.toHaveStyleRule('content', "' [highlight start] '");
+  });
 
-  test('is rendered without CSS :before and :after text', () => {
+  test('is rendered without CSS :after', () => {
     expect(
       render(
         <EuiMark hasScreenReaderHelpText={false} {...requiredProps}>
           Marked
         </EuiMark>
       )
-    ).toMatchSnapshot();
+    ).not.toHaveStyleRule('content', "' [highlight end] '");
   });
 });