replaced jest with vitest (#1798)

OperationCode · Feb 29, 2024 · ba4c8f5 · ba4c8f5
1 parent fedf008
commit ba4c8f5
Show file tree

Hide file tree

Showing 99 changed files with 2,404 additions and 1,751 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -66,11 +66,11 @@ jobs:
       - *yarn_install
       - run:
           name: Run tests
-          command: yarn test:ci --silent=false
+          command: yarn test:ci
       - persist_to_workspace:
           root: << pipeline.parameters.workspace_root >>
           paths:
-            - project/jest-coverage
+            - project/vitest-coverage
 
   lint:
     executor: default
@@ -103,7 +103,7 @@ jobs:
             mkdir .nyc_output
             ls -al cypress-coverage
             cp cypress-coverage/coverage.node-*.json reports
-            cp jest-coverage/coverage-final.json reports/from-jest.json
+            cp vitest-coverage/coverage-final.json reports/from-vitest.json
             yarn nyc merge reports
             mv coverage.json .nyc_output/out.json
       - run:

diff --git a/.eslintignore b/.eslintignore
@@ -8,6 +8,6 @@ yarn.lock
 bin
 static
 cypress-coverage
-jest-coverage
+vitest-coverage
 .storybook-dist
 common/styles/themeMap.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,7 +6,6 @@ module.exports = {
     'airbnb',
     'plugin:jsx-a11y/recommended',
     'prettier',
-    'plugin:jest/recommended',
     'plugin:cypress/recommended',
     'plugin:storybook/recommended',
     'plugin:@typescript-eslint/eslint-recommended',
@@ -16,14 +15,12 @@ module.exports = {
     commonjs: true,
     es6: true,
     'cypress/globals': true,
-    jest: true,
     node: true,
   },
   parser: '@babel/eslint-parser',
   plugins: [
     'prettier',
     'unicorn',
-    'jest',
     'cypress',
     '@operation_code/custom-rules',
     'import',
@@ -35,6 +32,26 @@ module.exports = {
     Cypress: true,
   },
   overrides: [
+    {
+      files: ['./**/*.test.js', './**/*.test.jsx', './**/*.test.ts', './**/*.test.tsx'],
+      plugins: ['vitest'],
+      extends: ['plugin:vitest-globals/recommended', 'plugin:vitest/recommended'],
+      env: {
+        'vitest-globals/env': true,
+      },
+      rules: {
+        'vitest/consistent-test-it': ['error', { fn: 'it', withinDescribe: 'it' }],
+        'vitest/expect-expect': [
+          'error',
+          { assertFunctionNames: ['expect', 'createShallowSnapshotTest', 'createSnapshotTest'] },
+        ],
+        'vitest/prefer-lowercase-title': ['error', { ignore: ['describe'] }],
+        'vitest/no-test-prefixes': 'error',
+        'vitest/no-test-return-statement': 'error',
+        'vitest/prefer-strict-equal': 'error',
+        'vitest/valid-describe-callback': 'error',
+      },
+    },
     {
       files: ['./**/*.ts', './**/*.tsx'],
       parser: '@typescript-eslint/parser',
@@ -84,9 +101,8 @@ module.exports = {
       files: ['cypress/**/*.js'],
       rules: {
         'func-names': 'off',
-        'jest/expect-expect': 'off',
-        'jest/valid-expect': 'off',
-        'jest/valid-expect-in-promise': ['off'],
+        'vitest/expect-expect': 'off',
+        'vitest/valid-expect': 'off',
         'no-unused-expressions': ['off'],
       },
     },
@@ -128,19 +144,6 @@ module.exports = {
     // OC eslint Plugin Rules
     '@operation_code/custom-rules/proptype-definition-above-fn': 'error',
 
-    // Jest Plugin Rules
-    'jest/consistent-test-it': ['error', { fn: 'it', withinDescribe: 'it' }],
-    'jest/expect-expect': [
-      'error',
-      { assertFunctionNames: ['expect', 'createShallowSnapshotTest', 'createSnapshotTest'] },
-    ],
-    'jest/prefer-lowercase-title': ['error', { ignore: ['describe'] }],
-    'jest/no-jasmine-globals': 'error',
-    'jest/no-test-prefixes': 'error',
-    'jest/no-test-return-statement': 'error',
-    'jest/prefer-strict-equal': 'error',
-    'jest/valid-describe-callback': 'error',
-
     // JSX-A11Y Plugin Rules
     'jsx-a11y/anchor-is-valid': [
       'error',
@@ -244,6 +247,5 @@ module.exports = {
     ],
     'no-use-before-define': 'off',
   },
-
   root: true,
 };
diff --git a/.gitignore b/.gitignore
@@ -25,7 +25,7 @@ lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 cypress-coverage
-jest-coverage
+vitest-coverage
 reports
 
 # nyc test coverage

diff --git a/.prettierignore b/.prettierignore
@@ -8,7 +8,7 @@ yarn.lock
 bin
 static
 cypress-coverage
-jest-coverage
+vitest-coverage
 .storybook-dist
 common/styles/themeMap.js
 **/*.snap

diff --git a/.stylelintrc b/.stylelintrc
@@ -5,7 +5,7 @@
     "**/*.js",
     "coverage/**/*",
     "cypress-coverage/**/*",
-    "jest-coverage/**/*",
+    "vitest-coverage/**/*",
     "node_modules/**/*"
   ],
   "rules": {

diff --git a/common/utils/__tests__/__snapshots__/next-utils.test.js.snap b/common/utils/__tests__/__snapshots__/next-utils.test.js.snap
@@ -1,26 +1,26 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Next.js Utilities getPlaceholder defines a valid base64 string 1`] = `"data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMzMzIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzIyMiIgb2Zmc2V0PSI1MCUiIC8+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzMzMiIG9mZnNldD0iNzAlIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiMzMzMiIC8+CiAgPHJlY3QgaWQ9InIiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSJ1cmwoI2cpIiAvPgogIDxhbmltYXRlCiAgICB4bGluazpocmVmPSIjciIKICAgIGF0dHJpYnV0ZU5hbWU9IngiCiAgICBmcm9tPSItMjAwIgogICAgdG89IjIwMCIKICAgIGR1cj0iMXMiCiAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKICAvPgo8L3N2Zz4="`;
+exports[`Next.js Utilities > getPlaceholder > defines a valid base64 string 1`] = `"data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMzMzIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzIyMiIgb2Zmc2V0PSI1MCUiIC8+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzMzMiIG9mZnNldD0iNzAlIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiMzMzMiIC8+CiAgPHJlY3QgaWQ9InIiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSJ1cmwoI2cpIiAvPgogIDxhbmltYXRlCiAgICB4bGluazpocmVmPSIjciIKICAgIGF0dHJpYnV0ZU5hbWU9IngiCiAgICBmcm9tPSItMjAwIgogICAgdG89IjIwMCIKICAgIGR1cj0iMXMiCiAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIKICAvPgo8L3N2Zz4="`;
 
-exports[`Next.js Utilities getShimmerSVG renders a valid SVG 1`] = `
+exports[`Next.js Utilities > getShimmerSVG > renders a valid SVG 1`] = `
 "
-<svg width=\\"200\\" height=\\"200\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
+<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
-    <linearGradient id=\\"g\\">
-      <stop stop-color=\\"#333\\" offset=\\"20%\\" />
-      <stop stop-color=\\"#222\\" offset=\\"50%\\" />
-      <stop stop-color=\\"#333\\" offset=\\"70%\\" />
+    <linearGradient id="g">
+      <stop stop-color="#333" offset="20%" />
+      <stop stop-color="#222" offset="50%" />
+      <stop stop-color="#333" offset="70%" />
     </linearGradient>
   </defs>
-  <rect width=\\"200\\" height=\\"200\\" fill=\\"#333\\" />
-  <rect id=\\"r\\" width=\\"200\\" height=\\"200\\" fill=\\"url(#g)\\" />
+  <rect width="200" height="200" fill="#333" />
+  <rect id="r" width="200" height="200" fill="url(#g)" />
   <animate
-    xlink:href=\\"#r\\"
-    attributeName=\\"x\\"
-    from=\\"-200\\"
-    to=\\"200\\"
-    dur=\\"1s\\"
-    repeatCount=\\"indefinite\\"
+    xlink:href="#r"
+    attributeName="x"
+    from="-200"
+    to="200"
+    dur="1s"
+    repeatCount="indefinite"
   />
 </svg>"
 `;
diff --git a/common/utils/thirdParty/gtag.js b/common/utils/thirdParty/gtag.js
@@ -1,5 +1,5 @@
-const snakeCase = require('lodash/snakeCase');
-const { clientTokens } = require('common/config/environment');
+import snakeCase from 'lodash/snakeCase';
+import { clientTokens } from 'common/config/environment';
 
 // TODO: Leverage prod-build-time-only env vars instead NODE_ENV for prod check
 const isProduction = process.env.NODE_ENV === 'production';

diff --git a/components/Accordion/__tests__/Accordion.test.js b/components/Accordion/__tests__/Accordion.test.js
@@ -1,6 +1,10 @@
 import { fireEvent, render } from '@testing-library/react';
 
-import { ACCORDION_CONTENT, ACCORDION_TOGGLE_BUTTON } from 'common/constants/testIDs';
+import {
+  ACCORDION_CONTENT,
+  ACCORDION_TOGGLE_BUTTON,
+  SCREEN_READER_ONLY,
+} from 'common/constants/testIDs';
 import { Default } from '../__stories__/Accordion.stories';
 import { toggleMessages } from '../../ScreenReaderOnly/ScreenReaderOnly';
 
@@ -20,7 +24,7 @@ describe('Accordion', () => {
 describe('Accordion Accessibility', () => {
   it('should display the correct screenReader text for toggle button', async () => {
     const component = render(<Default {...Default.args} />);
-    const Button = component.queryByTestId(ACCORDION_TOGGLE_BUTTON);
+    const Button = component.queryByTestId(SCREEN_READER_ONLY);
 
     expect(Button.textContent).toBe(toggleMessages.open);
 

diff --git a/components/Alert/__tests__/Alert.test.js b/components/Alert/__tests__/Alert.test.js
@@ -10,7 +10,7 @@ describe('Alert', () => {
   });
 
   it('should call close handler when close alert button clicked', () => {
-    const onCloseMock = jest.fn();
+    const onCloseMock = vi.fn();
 
     const { queryByTestId } = render(<SuccessAlert {...SuccessAlert.args} onClose={onCloseMock} />);
 

diff --git a/components/Alert/__tests__/__snapshots__/Alert.test.js.snap b/components/Alert/__tests__/__snapshots__/Alert.test.js.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Alert should render error alert with required props 1`] = `
+exports[`Alert > should render error alert with required props 1`] = `
 <div
   className="Alert error"
   data-testid="ALERT"

diff --git a/components/Badge/__tests__/__snapshots__/Badge.test.js.snap b/components/Badge/__tests__/__snapshots__/Badge.test.js.snap
@@ -1,10 +1,17 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Badge should render with many props assigned 1`] = `
+exports[`Badge > should render with many props assigned 1`] = `
 <figure
   className="flex flex-col justify-items-center place-content-start m-2 [&>svg]:fill-current [&>svg]:my-4 [&>img]:mx-0 [&>img]:h-24 [&>svg]:mx-0 [&>svg]:h-24 test-class"
 >
-  <svg />
+  <svg
+    dangerouslySetInnerHTML={
+      {
+        "__html": "<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" id="7e6684a5"><title>GitHub Logo</title><path fill-rule="evenodd" d="M51.03 2.97C49.047.99 46.663 0 43.874 0h-33.75C7.336 0 4.95.99 2.97 2.97.99 4.951 0 7.336 0 10.125v33.75c0 2.79.99 5.174 2.97 7.154C4.951 53.01 7.336 54 10.125 54H18c.515 0 .902-.018 1.16-.052.257-.036.515-.188.773-.458s.387-.662.387-1.178l-.018-2.39c-.012-1.524-.018-2.731-.018-3.622l-.808.14c-.516.095-1.166.136-1.952.124-.785-.012-1.6-.094-2.443-.246a5.472 5.472 0 0 1-2.355-1.055 4.457 4.457 0 0 1-1.547-2.162l-.352-.809c-.234-.538-.603-1.136-1.107-1.792-.504-.656-1.013-1.102-1.53-1.336l-.245-.176a2.57 2.57 0 0 1-.457-.422 1.936 1.936 0 0 1-.316-.492c-.07-.164-.012-.3.175-.405.188-.106.528-.158 1.02-.158l.703.106c.468.093 1.048.374 1.74.843a5.67 5.67 0 0 1 1.705 1.828c.54.961 1.19 1.693 1.951 2.197.762.504 1.53.756 2.303.756.773 0 1.441-.058 2.004-.175a6.97 6.97 0 0 0 1.582-.528c.21-1.57.785-2.778 1.722-3.621-1.336-.141-2.537-.352-3.603-.633-1.067-.282-2.168-.739-3.305-1.372-1.137-.633-2.08-1.417-2.83-2.355s-1.365-2.169-1.846-3.692c-.48-1.523-.72-3.281-.72-5.273 0-2.836.926-5.25 2.777-7.243-.867-2.132-.785-4.523.246-7.171.68-.211 1.688-.053 3.024.474 1.336.528 2.314.98 2.935 1.354.622.375 1.12.691 1.495.95 2.18-.61 4.43-.915 6.75-.915 2.32 0 4.57.305 6.75.914l1.336-.843c.915-.563 1.992-1.079 3.235-1.547 1.242-.469 2.191-.598 2.848-.387 1.054 2.649 1.148 5.04.28 7.172 1.852 1.992 2.778 4.406 2.778 7.242 0 1.992-.24 3.756-.72 5.291-.48 1.535-1.102 2.766-1.864 3.692-.761.926-1.71 1.705-2.847 2.338-1.137.632-2.238 1.09-3.305 1.37-1.067.282-2.268.493-3.604.634 1.219 1.055 1.828 2.719 1.828 4.992v8.403c0 .398.058.72.176.967a.967.967 0 0 0 .562.51c.259.093.487.151.686.175.2.023.487.035.862.035h7.875c2.788 0 5.173-.99 7.153-2.97C53.01 49.047 54 46.662 54 43.873v-33.75c0-2.788-.99-5.173-2.97-7.154z"/></symbol><use href='#7e6684a5'/>",
+      }
+    }
+    viewBox="0 0 54 54"
+  />
   <figcaption
     className="text-center whitespace-nowrap"
   >
@@ -13,11 +20,18 @@ exports[`Badge should render with many props assigned 1`] = `
 </figure>
 `;
 
-exports[`Badge should render with required props 1`] = `
+exports[`Badge > should render with required props 1`] = `
 <figure
   className="flex flex-col justify-items-center place-content-start m-2 [&>svg]:fill-current [&>svg]:my-4 [&>img]:mx-0 [&>img]:h-24 [&>svg]:mx-0 [&>svg]:h-24"
 >
-  <svg />
+  <svg
+    dangerouslySetInnerHTML={
+      {
+        "__html": "<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" id="7e6684a5"><title>GitHub Logo</title><path fill-rule="evenodd" d="M51.03 2.97C49.047.99 46.663 0 43.874 0h-33.75C7.336 0 4.95.99 2.97 2.97.99 4.951 0 7.336 0 10.125v33.75c0 2.79.99 5.174 2.97 7.154C4.951 53.01 7.336 54 10.125 54H18c.515 0 .902-.018 1.16-.052.257-.036.515-.188.773-.458s.387-.662.387-1.178l-.018-2.39c-.012-1.524-.018-2.731-.018-3.622l-.808.14c-.516.095-1.166.136-1.952.124-.785-.012-1.6-.094-2.443-.246a5.472 5.472 0 0 1-2.355-1.055 4.457 4.457 0 0 1-1.547-2.162l-.352-.809c-.234-.538-.603-1.136-1.107-1.792-.504-.656-1.013-1.102-1.53-1.336l-.245-.176a2.57 2.57 0 0 1-.457-.422 1.936 1.936 0 0 1-.316-.492c-.07-.164-.012-.3.175-.405.188-.106.528-.158 1.02-.158l.703.106c.468.093 1.048.374 1.74.843a5.67 5.67 0 0 1 1.705 1.828c.54.961 1.19 1.693 1.951 2.197.762.504 1.53.756 2.303.756.773 0 1.441-.058 2.004-.175a6.97 6.97 0 0 0 1.582-.528c.21-1.57.785-2.778 1.722-3.621-1.336-.141-2.537-.352-3.603-.633-1.067-.282-2.168-.739-3.305-1.372-1.137-.633-2.08-1.417-2.83-2.355s-1.365-2.169-1.846-3.692c-.48-1.523-.72-3.281-.72-5.273 0-2.836.926-5.25 2.777-7.243-.867-2.132-.785-4.523.246-7.171.68-.211 1.688-.053 3.024.474 1.336.528 2.314.98 2.935 1.354.622.375 1.12.691 1.495.95 2.18-.61 4.43-.915 6.75-.915 2.32 0 4.57.305 6.75.914l1.336-.843c.915-.563 1.992-1.079 3.235-1.547 1.242-.469 2.191-.598 2.848-.387 1.054 2.649 1.148 5.04.28 7.172 1.852 1.992 2.778 4.406 2.778 7.242 0 1.992-.24 3.756-.72 5.291-.48 1.535-1.102 2.766-1.864 3.692-.761.926-1.71 1.705-2.847 2.338-1.137.632-2.238 1.09-3.305 1.37-1.067.282-2.268.493-3.604.634 1.219 1.055 1.828 2.719 1.828 4.992v8.403c0 .398.058.72.176.967a.967.967 0 0 0 .562.51c.259.093.487.151.686.175.2.023.487.035.862.035h7.875c2.788 0 5.173-.99 7.153-2.97C53.01 49.047 54 46.662 54 43.873v-33.75c0-2.788-.99-5.173-2.97-7.154z"/></symbol><use href='#7e6684a5'/>",
+      }
+    }
+    viewBox="0 0 54 54"
+  />
   <figcaption
     className="text-center whitespace-nowrap"
   >

diff --git a/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.js.snap b/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.js.snap
@@ -1,11 +1,11 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ColorSection should render with required props 1`] = `
+exports[`ColorSection > should render with required props 1`] = `
 <React.Fragment>
   <Content
     className=""
     columns={
-      Array [
+      [
         <div>
           <h3
             className="text-center"
@@ -38,7 +38,7 @@ exports[`ColorSection should render with required props 1`] = `
   <Content
     className=""
     columns={
-      Array [
+      [
         <Swatch
           colorName="gray"
           hexCode="#e2e2e2"

diff --git a/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.js.snap b/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.js.snap
@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`FontSection should render with required props 1`] = `
+exports[`FontSection > should render with required props 1`] = `
 <Content
   className=""
   columns={
-    Array [
+    [
       <ul
         className="list-none w-full [&>li]:m-4"
       >
@@ -14,7 +14,7 @@ exports[`FontSection should render with required props 1`] = `
           >
             <h6
               style={
-                Object {
+                {
                   "fontFamily": "DIN Condensed Bold",
                 }
               }
@@ -23,7 +23,7 @@ exports[`FontSection should render with required props 1`] = `
             </h6>
             <p
               style={
-                Object {
+                {
                   "fontFamily": "DIN Condensed Bold",
                 }
               }
@@ -38,7 +38,7 @@ exports[`FontSection should render with required props 1`] = `
           >
             <h6
               style={
-                Object {
+                {
                   "fontFamily": "Encode Sans",
                 }
               }
@@ -47,7 +47,7 @@ exports[`FontSection should render with required props 1`] = `
             </h6>
             <p
               style={
-                Object {
+                {
                   "fontFamily": "Encode Sans",
                 }
               }

diff --git a/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.js.snap b/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.js.snap
@@ -1,25 +1,23 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`LogoSection should render with required props 1`] = `
+exports[`LogoSection > should render with required props 1`] = `
 <Content
   className=""
   columns={
-    Array [
+    [
       <ul
         className="logoSizeList"
       >
         <li
-          className="logoSizeListItem smallLogos"
+          className="logoSizeListItem"
         >
           <h5>
             Small Logos
           </h5>
           <p>
             For use when Operation Code's logo name is between 0-1 inch in height. In most cases, use the Original Small Logo. The Stacked Small Logo is to be used where graphics needs are larger in vertical height than horizontal width with the Operation Code logo name still under 1 inch in height.
           </p>
-          <ul
-            className="logoTypeList"
-          >
+          <ul>
             <li
               className="logoTypeListItem"
             >
@@ -266,9 +264,7 @@ exports[`LogoSection should render with required props 1`] = `
           <p>
             Use the Original Large Logo in almost all cases above 1 inch in height. The Red Large Logo is to be used in special events (such as Thanksgiving, fall or Christmas), and the Light Large Logo is to be used with dark backgrounds or bright colored backgrounds.
           </p>
-          <ul
-            className="logoTypeList"
-          >
+          <ul>
             <li
               className="logoTypeListItem"
             >