verify only background in test

Author: diegoasmello

src/components/Modal/ModalHeader.test.tsx

@@ -33,12 +33,13 @@ describe('ModalHeader', () => {
     })
 
     it('should accept "style" prop', () => {
-      const { container } = render(
+      const { getByTestId } = render(
         <ModalContextProvider value={mockContextValue}>
           <ModalHeader title='title' style={{ background: 'red' }} />
         </ModalContextProvider>
       )
-      expect(container).toMatchSnapshot()
+      const header = getByTestId('modal-header')
+      expect(getComputedStyle(header).background).toBe('red')
     })
 
     it('should render correctly with children', () => {

src/components/Modal/__snapshots__/ModalHeader.test.tsx.snap

@@ -1,193 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ModalHeader basic rendering should accept "style" prop 1`] = `
-.emotion-3 {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(min-content,max-content);
-  grid-gap: 1rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-1 {
-  display: inline-block;
-  margin-bottom: 0rem;
-  margin-top: 0rem;
-}
-
-.emotion-1:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-1:last-of-type {
-  margin-bottom: 0;
-}
-
-.emotion-1:empty {
-  display: none;
-}
-
-.emotion-0 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 1.5rem;
-  line-height: 1.5;
-  color: #24252E;
-  font-weight: bold;
-  color: #24252E;
-  font-weight: bold;
-}
-
-.emotion-5 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5rem;
-  color: #24252E;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #24252E;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-}
-
-.emotion-5 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-5:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-5:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-5:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
-.emotion-4 {
-  fill: currentColor;
-  font-size: 1.5rem;
-}
-
-.emotion-6 {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(min-content,max-content);
-  grid-gap: 0.5rem;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  width: 100%;
-  grid-template-columns: 1fr auto;
-  padding: 1.5rem 1rem 1rem 2rem;
-  z-index: 1;
-  background-color: #FFFFFF;
-  border-bottom: none;
-  grid-row: 1;
-  grid-column: 1 / -1;
-  background: red;
-}
-
-<div>
-  <div
-    class="emotion-6"
-    data-testid="modal-header"
-  >
-    <div
-      class="emotion-3"
-    >
-      <div
-        class="emotion-2"
-      >
-        <div
-          class="emotion-1"
-        >
-          <h1
-            class="emotion-0"
-          >
-            title
-          </h1>
-        </div>
-      </div>
-    </div>
-    <button
-      aria-label="Close"
-      class="emotion-5"
-      title="Close"
-      type="button"
-    >
-      <span>
-        <svg
-          aria-hidden="true"
-          class="emotion-4"
-          height="1em"
-          role="img"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M8.071 6.657l4.243 4.242 4.242-4.242c.464-.48.935-.48 1.415 0s.48.95 0 1.414l-4.243 4.243 4.243 4.242c.471.472.471.943 0 1.415-.472.471-.943.471-1.415 0l-4.242-4.243L8.07 17.97c-.46.482-.932.482-1.414 0-.482-.483-.482-.954 0-1.415l4.242-4.242L6.657 8.07c-.472-.47-.472-.942 0-1.414s.943-.472 1.414 0v.001z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
 exports[`ModalHeader basic rendering should render correctly with children 1`] = `
 .emotion-2 {
   display: grid;