From 64e6d9028588aa15de23de5d982e19f08648e137 Mon Sep 17 00:00:00 2001
From: omsaggau <omsaggau@gmail.com>
Date: Mon, 27 Nov 2023 09:29:08 +0100
Subject: [PATCH] finish converting all tests. remove enzyme

---
 README.md                                     |   4 +-
 jest.config.js                                |   3 +-
 package-lock.json                             | 890 +++++-------------
 package.json                                  |   5 +-
 src/components/Accordion/accordion.test.jsx   |  42 +-
 .../BlockContent/blockContent.test.jsx        |  14 +-
 .../__snapshots__/breadcrumb.test.jsx.snap    |  66 +-
 src/components/Breadcrumb/breadcrumb.test.jsx |  12 +-
 .../Button/__snapshots__/button.test.jsx.snap |  27 +
 src/components/Button/button.test.jsx         |  31 +-
 .../buttonTertiary.test.jsx.snap              | 108 ++-
 .../ButtonTertiary/buttonTertiary.test.jsx    |  47 +-
 .../Card/__snapshots__/card.test.jsx.snap     | 127 +++
 src/components/Card/card.test.jsx             |  51 +-
 .../CategoryLink/categorylink.test.jsx        |   4 +-
 src/components/Checkbox/checkbox.test.jsx     |  23 +-
 .../CheckboxGroup/checkboxgroup.test.jsx      |  18 +-
 .../Dialog/__snapshots__/dialog.test.jsx.snap |  55 ++
 src/components/Dialog/dialog.test.jsx         |  10 +-
 .../__snapshots__/divider.test.jsx.snap       |  18 +
 src/components/Divider/divider.test.jsx       |  14 +-
 src/components/Dropdown/dropdown.test.jsx     |  76 +-
 src/components/FactBox/factbox.test.jsx       |  14 +-
 src/components/Footer/footer.test.jsx         |   4 +-
 src/components/FormError/formError.test.jsx   |   4 +-
 src/components/Glossary/glossary.test.jsx     |   4 +-
 src/components/Header/header.test.jsx         |   4 +-
 .../__snapshots__/highlight.test.jsx.snap     |  10 +
 src/components/Highlight/highlight.test.jsx   |   9 +-
 .../Input/__snapshots__/input.test.jsx.snap   |  69 ++
 src/components/Input/input.test.jsx           |  62 +-
 .../__snapshots__/input-error.test.jsx.snap   |  14 +
 .../InputError/input-error.test.jsx           |   9 +-
 .../__snapshots__/keyFigures.test.jsx.snap    | 307 +++++-
 src/components/KeyFigures/keyFigures.test.jsx |  44 +-
 .../__snapshots__/leadParagraph.test.jsx.snap |  10 +
 .../LeadParagraph/leadParagraph.test.jsx      |   9 +-
 .../Link/__snapshots__/link.test.jsx.snap     |  57 ++
 src/components/Link/link.test.jsx             |  20 +-
 .../NestedAccordion/nestet-accordion.test.jsx |  23 +-
 .../Number/__snapshots__/number.test.jsx.snap |  10 +
 src/components/Number/number.test.jsx         |  10 +-
 src/components/Pagination/pagination.test.jsx |  53 +-
 .../__snapshots__/paragraph.test.jsx.snap     |  10 +
 src/components/Paragraph/paragraph.test.jsx   |  10 +-
 .../__snapshots__/pictureCard.test.jsx.snap   | 179 +++-
 .../PictureCard/pictureCard.test.jsx          |  14 +-
 .../Quote/__snapshots__/quote.test.jsx.snap   |  10 +
 src/components/Quote/quote.test.jsx           |  10 +-
 .../RadioButton/radio-button.test.jsx         |  17 +-
 .../__snapshots__/radio-group.test.jsx.snap   |  70 ++
 .../RadioGroup/radio-group.test.jsx           |   9 +-
 src/components/References/references.test.jsx |   4 +-
 src/components/StickyMenu/stickymenu.test.jsx |   5 +-
 .../__snapshots__/tableLink.test.jsx.snap     | 119 ++-
 src/components/TableLink/tableLink.test.jsx   |  18 +-
 src/components/Tabs/tabs.test.jsx             |  23 +-
 .../Tag/__snapshots__/tag.test.jsx.snap       |  25 +
 src/components/Tag/tag.test.jsx               |  26 +-
 .../Text/__snapshots__/text.test.jsx.snap     |  10 +
 src/components/Text/text.test.jsx             |  10 +-
 .../__snapshots__/textArea.test.jsx.snap      |  16 +
 src/components/TextArea/textArea.test.jsx     |  43 +-
 .../Title/__snapshots__/title.test.jsx.snap   |  90 ++
 src/components/Title/title.test.jsx           |  47 +-
 src/setupTests.js                             |   4 +-
 src/utils/test.js                             |  18 +
 67 files changed, 2017 insertions(+), 1161 deletions(-)
 create mode 100644 src/utils/test.js

diff --git a/README.md b/README.md
index 8ab7b635..c8327381 100644
--- a/README.md
+++ b/README.md
@@ -108,13 +108,13 @@ Every new instance of `storiesOf` creates a new menu item in the storybook. When
 a sub menu. 
 
 #### Testing
-Testing is done with [Jest](https://jestjs.io/en/) and Enzyme. Write unit tests for all components and aim for a 100% test coverage. 
+Testing is done with [Jest](https://jestjs.io/en/) and React testing library. Write unit tests for all components and aim for a 100% test coverage. [Do no test component internals and state. Test on actual ouput on what user experiences.](https://testing-library.com/docs/guiding-principles)
 To run the tests, simply run `npm test`. To run tests without using any cache, run `npm run clean-test`.
 If you need to replace outdated screenshots, run `npm run clear-tests`.
 
 [Here is a cheat sheet for Jest](https://github.com/sapegin/jest-cheat-sheet).
 
-[Here is a cheat sheet for Enzyme](https://devhints.io/enzyme). 
+[Here is a cheat sheet for Testing library](https://testing-library.com/docs/react-testing-library/cheatsheet/). 
 
 #### Styling
 Styling is done with SCSS. You should familiarise yourself just a bit with the [stylelint](./.stylelintrc) configuration,
diff --git a/jest.config.js b/jest.config.js
index 21e415c5..29b09dbf 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -21,8 +21,7 @@ module.exports = {
 	modulePaths: [
 		'<rootDir>/src/scripts/atoms',
 	],
-	snapshotSerializers: ['enzyme-to-json/serializer'],
-	setupFiles: ['<rootDir>/src/setupTests.js'],
+	setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
 	testMatch: ['**/*.test.jsx'],
 	transform: { '^.+\\.jsx?$': 'babel-jest' },
 	transformIgnorePatterns: ['<rootDir>/node_modules/'],
diff --git a/package-lock.json b/package-lock.json
index 2fa6fbd0..24f5bf97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,6 @@
         "@babel/eslint-parser": "^7.23.3",
         "@babel/preset-env": "~7.23.2",
         "@babel/preset-react": "~7.22.15",
-        "@cfaester/enzyme-adapter-react-18": "^0.7.1",
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -32,7 +31,9 @@
         "@storybook/react-webpack5": "^7.5.3",
         "@svgr/rollup": "^8.1.0",
         "@svgr/webpack": "^8.1.0",
+        "@testing-library/jest-dom": "^6.1.4",
         "@testing-library/react": "^14.1.2",
+        "@testing-library/user-event": "^14.5.1",
         "babel-jest": "^29.7.0",
         "babel-loader": "^9.1.3",
         "babel-plugin-module-resolver": "^5.0.0",
@@ -40,8 +41,6 @@
         "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
         "cross-env": "^7.0.3",
         "css-loader": "^6.8.1",
-        "enzyme": "^3.11.0",
-        "enzyme-to-json": "^3.6.2",
         "eslint": "^8.53.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-plugin-import": "^2.29.0",
@@ -79,6 +78,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
+      "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==",
+      "dev": true
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -2219,28 +2224,6 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
-    "node_modules/@cfaester/enzyme-adapter-react-18": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@cfaester/enzyme-adapter-react-18/-/enzyme-adapter-react-18-0.7.1.tgz",
-      "integrity": "sha512-Z3m1qNSlQdrcXdnPSGOAysLdgJFSowu7sbK1cHRcWXuZGS3WOTFOS0kIXbWMa1FnkEbswlIU6KgS+8qKgM6Kqw==",
-      "dev": true,
-      "dependencies": {
-        "enzyme-shallow-equal": "^1.0.0",
-        "react-is": "^18.2.0",
-        "react-test-renderer": "^18.2.0"
-      },
-      "peerDependencies": {
-        "enzyme": "^3.11.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
-    },
-    "node_modules/@cfaester/enzyme-adapter-react-18/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -5755,6 +5738,127 @@
         "node": ">=8"
       }
     },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.1.4.tgz",
+      "integrity": "sha512-wpoYrCYwSZ5/AxcrjLxJmCU6I5QAJXslEeSiMQqaWmP2Kzpd1LvF/qxmAIW2qposULGWq2gw30GgVNFLSc2Jnw==",
+      "dev": true,
+      "dependencies": {
+        "@adobe/css-tools": "^4.3.1",
+        "@babel/runtime": "^7.9.2",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.5.6",
+        "lodash": "^4.17.15",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      },
+      "peerDependencies": {
+        "@jest/globals": ">= 28",
+        "@types/jest": ">= 28",
+        "jest": ">= 28",
+        "vitest": ">= 0.32"
+      },
+      "peerDependenciesMeta": {
+        "@jest/globals": {
+          "optional": true
+        },
+        "@types/jest": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@testing-library/react": {
       "version": "14.1.2",
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.1.2.tgz",
@@ -5773,6 +5877,19 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.5.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz",
+      "integrity": "sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -5848,15 +5965,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/cheerio": {
-      "version": "0.22.31",
-      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.31.tgz",
-      "integrity": "sha512-Kt7Cdjjdi2XWSfrZ53v4Of0wG3ZcmaegFXjMmz9tfNrZSkzzo36G0AL1YqSdcIA78Etjt6E609pt5h1xnQkPUw==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/connect": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -6770,25 +6878,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/array.prototype.filter": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.filter/-/array.prototype.filter-1.0.2.tgz",
-      "integrity": "sha512-us+UrmGOilqttSOgoWZTpOvHu68vZT2YCjc/H4vhu56vzZpaDFBhB+Se2UwqWzMKbDv7Myq5M5pcZLAtUvTQdQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "es-array-method-boxes-properly": "^1.0.0",
-        "is-string": "^1.0.7"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/array.prototype.findlastindex": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
@@ -8170,44 +8259,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/cheerio": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
-      "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
-      "dev": true,
-      "dependencies": {
-        "cheerio-select": "^2.1.0",
-        "dom-serializer": "^2.0.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1",
-        "htmlparser2": "^8.0.1",
-        "parse5": "^7.0.0",
-        "parse5-htmlparser2-tree-adapter": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
-      }
-    },
-    "node_modules/cheerio-select": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
-      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-select": "^5.1.0",
-        "css-what": "^6.1.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -8913,6 +8964,12 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -9325,12 +9382,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/discontinuous-range": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
-      "integrity": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==",
-      "dev": true
-    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -9630,69 +9681,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/enzyme": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.11.0.tgz",
-      "integrity": "sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==",
-      "dev": true,
-      "dependencies": {
-        "array.prototype.flat": "^1.2.3",
-        "cheerio": "^1.0.0-rc.3",
-        "enzyme-shallow-equal": "^1.0.1",
-        "function.prototype.name": "^1.1.2",
-        "has": "^1.0.3",
-        "html-element-map": "^1.2.0",
-        "is-boolean-object": "^1.0.1",
-        "is-callable": "^1.1.5",
-        "is-number-object": "^1.0.4",
-        "is-regex": "^1.0.5",
-        "is-string": "^1.0.5",
-        "is-subset": "^0.1.1",
-        "lodash.escape": "^4.0.1",
-        "lodash.isequal": "^4.5.0",
-        "object-inspect": "^1.7.0",
-        "object-is": "^1.0.2",
-        "object.assign": "^4.1.0",
-        "object.entries": "^1.1.1",
-        "object.values": "^1.1.1",
-        "raf": "^3.4.1",
-        "rst-selector-parser": "^2.2.3",
-        "string.prototype.trim": "^1.2.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/enzyme-shallow-equal": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.5.tgz",
-      "integrity": "sha512-i6cwm7hN630JXenxxJFBKzgLC3hMTafFQXflvzHgPmDhOBhxUWDe8AeRv1qp2/uWJ2Y8z5yLWMzmAfkTOiOCZg==",
-      "dev": true,
-      "dependencies": {
-        "has": "^1.0.3",
-        "object-is": "^1.1.5"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/enzyme-to-json": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz",
-      "integrity": "sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg==",
-      "dev": true,
-      "dependencies": {
-        "@types/cheerio": "^0.22.22",
-        "lodash": "^4.17.21",
-        "react-is": "^16.12.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "peerDependencies": {
-        "enzyme": "^3.4.0"
-      }
-    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -9764,12 +9752,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/es-array-method-boxes-properly": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
-      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
-      "dev": true
-    },
     "node_modules/es-get-iterator": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
@@ -11999,19 +11981,6 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
-    "node_modules/html-element-map": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.3.1.tgz",
-      "integrity": "sha512-6XMlxrAFX4UEEGxctfFnmrFaaZFNf9i5fNuV5wZ3WWQ4FVaNP1aX1LkX9j2mfEx1NpjeE/rL3nmgEn23GdFmrg==",
-      "dev": true,
-      "dependencies": {
-        "array.prototype.filter": "^1.0.0",
-        "call-bind": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -12111,25 +12080,6 @@
         "webpack": "^5.20.0"
       }
     },
-    "node_modules/htmlparser2": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
-      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
-      "dev": true,
-      "funding": [
-        "https://github.com/fb55/htmlparser2?sponsor=1",
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "domutils": "^3.0.1",
-        "entities": "^4.3.0"
-      }
-    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -12875,12 +12825,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-subset": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
-      "integrity": "sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==",
-      "dev": true
-    },
     "node_modules/is-symbol": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
@@ -15337,24 +15281,6 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "dev": true
     },
-    "node_modules/lodash.escape": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
-      "integrity": "sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw==",
-      "dev": true
-    },
-    "node_modules/lodash.flattendeep": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
-      "integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==",
-      "dev": true
-    },
-    "node_modules/lodash.isequal": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
-      "dev": true
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -15945,12 +15871,6 @@
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
       "dev": true
     },
-    "node_modules/moo": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
-      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==",
-      "dev": true
-    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -15990,34 +15910,6 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
-    "node_modules/nearley": {
-      "version": "2.20.1",
-      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
-      "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
-      "dev": true,
-      "dependencies": {
-        "commander": "^2.19.0",
-        "moo": "^0.5.0",
-        "railroad-diagrams": "^1.0.0",
-        "randexp": "0.4.6"
-      },
-      "bin": {
-        "nearley-railroad": "bin/nearley-railroad.js",
-        "nearley-test": "bin/nearley-test.js",
-        "nearley-unparse": "bin/nearley-unparse.js",
-        "nearleyc": "bin/nearleyc.js"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://nearley.js.org/#give-to-nearley"
-      }
-    },
-    "node_modules/nearley/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
-    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -16586,19 +16478,6 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
-    "node_modules/parse5-htmlparser2-tree-adapter": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
-      "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
-      "dev": true,
-      "dependencies": {
-        "domhandler": "^5.0.2",
-        "parse5": "^7.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -16730,12 +16609,6 @@
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
       "dev": true
     },
-    "node_modules/performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "dev": true
-    },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -17347,21 +17220,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/raf": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "dev": true,
-      "dependencies": {
-        "performance-now": "^2.1.0"
-      }
-    },
-    "node_modules/railroad-diagrams": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
-      "integrity": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==",
-      "dev": true
-    },
     "node_modules/ramda": {
       "version": "0.29.0",
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz",
@@ -17372,19 +17230,6 @@
         "url": "https://opencollective.com/ramda"
       }
     },
-    "node_modules/randexp": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
-      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
-      "dev": true,
-      "dependencies": {
-        "discontinuous-range": "1.0.0",
-        "ret": "~0.1.10"
-      },
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -17536,39 +17381,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-shallow-renderer": {
-      "version": "16.15.0",
-      "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
-      "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==",
-      "dev": true,
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/react-test-renderer": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz",
-      "integrity": "sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==",
-      "dev": true,
-      "dependencies": {
-        "react-is": "^18.2.0",
-        "react-shallow-renderer": "^16.15.0",
-        "scheduler": "^0.23.0"
-      },
-      "peerDependencies": {
-        "react": "^18.2.0"
-      }
-    },
-    "node_modules/react-test-renderer/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -18104,15 +17916,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ret": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -18190,16 +17993,6 @@
       "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
       "dev": true
     },
-    "node_modules/rst-selector-parser": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
-      "integrity": "sha512-nDG1rZeP6oFTLN6yNDV/uiAvs1+FS/KlrEwh7+y7dpuApDBy6bI2HTBcc0/V8lv9OTqfyD34eF7au2pm8aBbhA==",
-      "dev": true,
-      "dependencies": {
-        "lodash.flattendeep": "^4.4.0",
-        "nearley": "^2.7.10"
-      }
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -21018,6 +20811,12 @@
       "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
       "dev": true
     },
+    "@adobe/css-tools": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
+      "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==",
+      "dev": true
+    },
     "@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -22495,25 +22294,6 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
-    "@cfaester/enzyme-adapter-react-18": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@cfaester/enzyme-adapter-react-18/-/enzyme-adapter-react-18-0.7.1.tgz",
-      "integrity": "sha512-Z3m1qNSlQdrcXdnPSGOAysLdgJFSowu7sbK1cHRcWXuZGS3WOTFOS0kIXbWMa1FnkEbswlIU6KgS+8qKgM6Kqw==",
-      "dev": true,
-      "requires": {
-        "enzyme-shallow-equal": "^1.0.0",
-        "react-is": "^18.2.0",
-        "react-test-renderer": "^18.2.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "18.2.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-          "dev": true
-        }
-      }
-    },
     "@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -24971,6 +24751,83 @@
         }
       }
     },
+    "@testing-library/jest-dom": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.1.4.tgz",
+      "integrity": "sha512-wpoYrCYwSZ5/AxcrjLxJmCU6I5QAJXslEeSiMQqaWmP2Kzpd1LvF/qxmAIW2qposULGWq2gw30GgVNFLSc2Jnw==",
+      "dev": true,
+      "requires": {
+        "@adobe/css-tools": "^4.3.1",
+        "@babel/runtime": "^7.9.2",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.5.6",
+        "lodash": "^4.17.15",
+        "redent": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "redent": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+          "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+          "dev": true,
+          "requires": {
+            "indent-string": "^4.0.0",
+            "strip-indent": "^3.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "@testing-library/react": {
       "version": "14.1.2",
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.1.2.tgz",
@@ -24982,6 +24839,13 @@
         "@types/react-dom": "^18.0.0"
       }
     },
+    "@testing-library/user-event": {
+      "version": "14.5.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz",
+      "integrity": "sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==",
+      "dev": true,
+      "requires": {}
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -25051,15 +24915,6 @@
         "@types/node": "*"
       }
     },
-    "@types/cheerio": {
-      "version": "0.22.31",
-      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.31.tgz",
-      "integrity": "sha512-Kt7Cdjjdi2XWSfrZ53v4Of0wG3ZcmaegFXjMmz9tfNrZSkzzo36G0AL1YqSdcIA78Etjt6E609pt5h1xnQkPUw==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      }
-    },
     "@types/connect": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -25859,19 +25714,6 @@
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true
     },
-    "array.prototype.filter": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.filter/-/array.prototype.filter-1.0.2.tgz",
-      "integrity": "sha512-us+UrmGOilqttSOgoWZTpOvHu68vZT2YCjc/H4vhu56vzZpaDFBhB+Se2UwqWzMKbDv7Myq5M5pcZLAtUvTQdQ==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "es-array-method-boxes-properly": "^1.0.0",
-        "is-string": "^1.0.7"
-      }
-    },
     "array.prototype.findlastindex": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
@@ -26926,35 +26768,6 @@
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
       "dev": true
     },
-    "cheerio": {
-      "version": "1.0.0-rc.12",
-      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
-      "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
-      "dev": true,
-      "requires": {
-        "cheerio-select": "^2.1.0",
-        "dom-serializer": "^2.0.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1",
-        "htmlparser2": "^8.0.1",
-        "parse5": "^7.0.0",
-        "parse5-htmlparser2-tree-adapter": "^7.0.0"
-      }
-    },
-    "cheerio-select": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
-      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
-      "dev": true,
-      "requires": {
-        "boolbase": "^1.0.0",
-        "css-select": "^5.1.0",
-        "css-what": "^6.1.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1"
-      }
-    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -27493,6 +27306,12 @@
       "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
       "dev": true
     },
+    "css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -27802,12 +27621,6 @@
         "path-type": "^4.0.0"
       }
     },
-    "discontinuous-range": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
-      "integrity": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==",
-      "dev": true
-    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -28043,57 +27856,6 @@
       "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
       "dev": true
     },
-    "enzyme": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.11.0.tgz",
-      "integrity": "sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==",
-      "dev": true,
-      "requires": {
-        "array.prototype.flat": "^1.2.3",
-        "cheerio": "^1.0.0-rc.3",
-        "enzyme-shallow-equal": "^1.0.1",
-        "function.prototype.name": "^1.1.2",
-        "has": "^1.0.3",
-        "html-element-map": "^1.2.0",
-        "is-boolean-object": "^1.0.1",
-        "is-callable": "^1.1.5",
-        "is-number-object": "^1.0.4",
-        "is-regex": "^1.0.5",
-        "is-string": "^1.0.5",
-        "is-subset": "^0.1.1",
-        "lodash.escape": "^4.0.1",
-        "lodash.isequal": "^4.5.0",
-        "object-inspect": "^1.7.0",
-        "object-is": "^1.0.2",
-        "object.assign": "^4.1.0",
-        "object.entries": "^1.1.1",
-        "object.values": "^1.1.1",
-        "raf": "^3.4.1",
-        "rst-selector-parser": "^2.2.3",
-        "string.prototype.trim": "^1.2.1"
-      }
-    },
-    "enzyme-shallow-equal": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.5.tgz",
-      "integrity": "sha512-i6cwm7hN630JXenxxJFBKzgLC3hMTafFQXflvzHgPmDhOBhxUWDe8AeRv1qp2/uWJ2Y8z5yLWMzmAfkTOiOCZg==",
-      "dev": true,
-      "requires": {
-        "has": "^1.0.3",
-        "object-is": "^1.1.5"
-      }
-    },
-    "enzyme-to-json": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz",
-      "integrity": "sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg==",
-      "dev": true,
-      "requires": {
-        "@types/cheerio": "^0.22.22",
-        "lodash": "^4.17.21",
-        "react-is": "^16.12.0"
-      }
-    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -28159,12 +27921,6 @@
         "which-typed-array": "^1.1.10"
       }
     },
-    "es-array-method-boxes-properly": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
-      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
-      "dev": true
-    },
     "es-get-iterator": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
@@ -29870,16 +29626,6 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
-    "html-element-map": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.3.1.tgz",
-      "integrity": "sha512-6XMlxrAFX4UEEGxctfFnmrFaaZFNf9i5fNuV5wZ3WWQ4FVaNP1aX1LkX9j2mfEx1NpjeE/rL3nmgEn23GdFmrg==",
-      "dev": true,
-      "requires": {
-        "array.prototype.filter": "^1.0.0",
-        "call-bind": "^1.0.2"
-      }
-    },
     "html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -29943,18 +29689,6 @@
         "tapable": "^2.0.0"
       }
     },
-    "htmlparser2": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
-      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
-      "dev": true,
-      "requires": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "domutils": "^3.0.1",
-        "entities": "^4.3.0"
-      }
-    },
     "http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -30469,12 +30203,6 @@
         "has-tostringtag": "^1.0.0"
       }
     },
-    "is-subset": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
-      "integrity": "sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==",
-      "dev": true
-    },
     "is-symbol": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
@@ -32301,24 +32029,6 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "dev": true
     },
-    "lodash.escape": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
-      "integrity": "sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw==",
-      "dev": true
-    },
-    "lodash.flattendeep": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
-      "integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==",
-      "dev": true
-    },
-    "lodash.isequal": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
-      "dev": true
-    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -32767,12 +32477,6 @@
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
       "dev": true
     },
-    "moo": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
-      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==",
-      "dev": true
-    },
     "mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -32797,26 +32501,6 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
-    "nearley": {
-      "version": "2.20.1",
-      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
-      "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
-      "dev": true,
-      "requires": {
-        "commander": "^2.19.0",
-        "moo": "^0.5.0",
-        "railroad-diagrams": "^1.0.0",
-        "randexp": "0.4.6"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "dev": true
-        }
-      }
-    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -33245,16 +32929,6 @@
         "entities": "^4.4.0"
       }
     },
-    "parse5-htmlparser2-tree-adapter": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
-      "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
-      "dev": true,
-      "requires": {
-        "domhandler": "^5.0.2",
-        "parse5": "^7.0.0"
-      }
-    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -33364,12 +33038,6 @@
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
       "dev": true
     },
-    "performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "dev": true
-    },
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -33791,37 +33459,12 @@
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
       "dev": true
     },
-    "raf": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "dev": true,
-      "requires": {
-        "performance-now": "^2.1.0"
-      }
-    },
-    "railroad-diagrams": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
-      "integrity": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==",
-      "dev": true
-    },
     "ramda": {
       "version": "0.29.0",
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz",
       "integrity": "sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==",
       "dev": true
     },
-    "randexp": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
-      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
-      "dev": true,
-      "requires": {
-        "discontinuous-range": "1.0.0",
-        "ret": "~0.1.10"
-      }
-    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -33944,35 +33587,6 @@
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
       "dev": true
     },
-    "react-shallow-renderer": {
-      "version": "16.15.0",
-      "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
-      "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4.1.1",
-        "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "react-test-renderer": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz",
-      "integrity": "sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==",
-      "dev": true,
-      "requires": {
-        "react-is": "^18.2.0",
-        "react-shallow-renderer": "^16.15.0",
-        "scheduler": "^0.23.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "18.2.0",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-          "dev": true
-        }
-      }
-    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -34375,12 +33989,6 @@
         "signal-exit": "^3.0.2"
       }
     },
-    "ret": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
-      "dev": true
-    },
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -34443,16 +34051,6 @@
         }
       }
     },
-    "rst-selector-parser": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
-      "integrity": "sha512-nDG1rZeP6oFTLN6yNDV/uiAvs1+FS/KlrEwh7+y7dpuApDBy6bI2HTBcc0/V8lv9OTqfyD34eF7au2pm8aBbhA==",
-      "dev": true,
-      "requires": {
-        "lodash.flattendeep": "^4.4.0",
-        "nearley": "^2.7.10"
-      }
-    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index 79b1fbf0..7ad96c32 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,6 @@
     "@babel/eslint-parser": "^7.23.3",
     "@babel/preset-env": "~7.23.2",
     "@babel/preset-react": "~7.22.15",
-    "@cfaester/enzyme-adapter-react-18": "^0.7.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -58,7 +57,9 @@
     "@storybook/react-webpack5": "^7.5.3",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
@@ -66,8 +67,6 @@
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
     "eslint": "^8.53.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.29.0",
diff --git a/src/components/Accordion/accordion.test.jsx b/src/components/Accordion/accordion.test.jsx
index c3b4113d..464f8a9b 100644
--- a/src/components/Accordion/accordion.test.jsx
+++ b/src/components/Accordion/accordion.test.jsx
@@ -1,31 +1,33 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { screen, render } from '../../utils/test'
 import Accordion from './index';
 
+const headerText = "This is a accordion title"
+const bodyText = "This is paragraph text"
+
 describe('Accordion component', () => {
 	test('Matches the snapshot', () => {
-		const { asFragment } = render(<Accordion header="This is a accordion title">Accordion</Accordion>);
+		const { asFragment } = render(<Accordion header={headerText}>Accordion</Accordion>);
 		expect(asFragment()).toMatchSnapshot();
 	});
-	test('Toggles classNames correctly', () => {
-		const wrapper = shallow(<Accordion header="This is a accordion title">This is paragraph text</Accordion>);
-		expect(wrapper.find('.accordion-header').hasClass('closed')).toEqual(true);
-		expect(wrapper.find('.accordion-body').hasClass('closed')).toEqual(true);
-	});
-	test('Change classname to open on click', () => {
-		const wrapper = shallow(<Accordion header="This is a accordion title">This is paragraph text</Accordion>);
-		wrapper.find('.accordion-header').simulate('click');
-		expect(wrapper.find('.accordion-header').hasClass('open')).toEqual(true);
-		expect(wrapper.find('.accordion-body').hasClass('open')).toEqual(true);
+	test('Starts closed', async () => {
+		render(<Accordion header={headerText}>{bodyText}</Accordion>);
+		expect(await screen.findByText(bodyText)).not.toBeVisible();
 	});
-	test('Accordion with sub-header', () => {
-		const wrapper = shallow(<Accordion header="This is a accordion title" subHeader="Subheader">This is paragraph text</Accordion>);
-		expect(wrapper.hasClass('with-sub-header')).toEqual(true);
-		expect(wrapper.find('.sub-header').length).toBe(1);
+	test('Open on click when starting closed', async () => {
+		const user = userEvent.setup();
+		render(<Accordion header={headerText}>{bodyText}</Accordion>);
+
+		const button = await screen.findByText(headerText)
+		await user.click(button.parentElement)
+
+		expect(await screen.findByText(bodyText)).toBeVisible();
 	});
-	test('Accordion with id', () => {
-		const wrapper = shallow(<Accordion id="test-id" header="This is a accordion title">This is paragraph text</Accordion>);
-		expect(wrapper.prop('id')).toEqual('test-id');
+	test('Accordion with sub-header', async () => {
+		const subheader = "Subheader"
+		render(<Accordion header={headerText} subHeader={subheader}>{bodyText}</Accordion>);
+		expect(await screen.findByText(subheader)).toBeVisible();
 	});
 });
diff --git a/src/components/BlockContent/blockContent.test.jsx b/src/components/BlockContent/blockContent.test.jsx
index 4d635116..6e31462b 100644
--- a/src/components/BlockContent/blockContent.test.jsx
+++ b/src/components/BlockContent/blockContent.test.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import { screen, render } from '../../utils/test'
 import BlockContent from './index';
 
 describe('BlockContent component', () => {
@@ -8,8 +7,13 @@ describe('BlockContent component', () => {
 		const { asFragment } = render(<BlockContent>BlockContent</BlockContent>);
 		expect(asFragment()).toMatchSnapshot();
 	});
-	test('Toggles classNames correctly', () => {
-		const wrapper = shallow(<BlockContent sectionNumber={1}>BlockContent</BlockContent>);
-		expect(wrapper.find('.section-number').length).toBe(1);
+	test('Add 0 infront of sectionnumbers under 10', async () => {
+		render(<BlockContent sectionNumber={5}>BlockContent</BlockContent>);
+		expect(await screen.findByText('05')).toBeVisible();
+	});
+	test('Not add 0 infront of sectionnumbers above 9', async () => {
+		render(<BlockContent sectionNumber={22}>BlockContent</BlockContent>);
+		expect(await screen.queryByText('022')).toBeNull()
+		expect(await screen.findByText('22')).toBeVisible();
 	});
 });
diff --git a/src/components/Breadcrumb/__snapshots__/breadcrumb.test.jsx.snap b/src/components/Breadcrumb/__snapshots__/breadcrumb.test.jsx.snap
index 9499b193..9a8f9b66 100644
--- a/src/components/Breadcrumb/__snapshots__/breadcrumb.test.jsx.snap
+++ b/src/components/Breadcrumb/__snapshots__/breadcrumb.test.jsx.snap
@@ -1,41 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Breadcrumb component Matches the snapshot 1`] = `
-<div
-  className="ssb-breadcrumbs"
->
+<DocumentFragment>
   <div
-    key="breadcrumb 1"
+    class="ssb-breadcrumbs"
   >
-    <Link
-      className=""
-      href=" "
-      isExternal={false}
-      negative={false}
-      onClick={[Function]}
-    >
-      breadcrumb 1
-    </Link>
-     / 
+    <div>
+      <a
+        class="ssb-link"
+        href=" "
+      >
+        <span
+          class="link-text"
+        >
+          breadcrumb 1
+        </span>
+      </a>
+       / 
+    </div>
+    <div>
+      <a
+        class="ssb-link"
+        href=" "
+      >
+        <span
+          class="link-text"
+        >
+          breadcrumb 2
+        </span>
+      </a>
+       / 
+    </div>
+    <span>
+      breadcrumb 3
+    </span>
   </div>
-  <div
-    key="breadcrumb 2"
-  >
-    <Link
-      className=""
-      href=" "
-      isExternal={false}
-      negative={false}
-      onClick={[Function]}
-    >
-      breadcrumb 2
-    </Link>
-     / 
-  </div>
-  <span
-    key="breadcrumb 3"
-  >
-    breadcrumb 3
-  </span>
-</div>
+</DocumentFragment>
 `;
diff --git a/src/components/Breadcrumb/breadcrumb.test.jsx b/src/components/Breadcrumb/breadcrumb.test.jsx
index a275acb8..1d110a2f 100644
--- a/src/components/Breadcrumb/breadcrumb.test.jsx
+++ b/src/components/Breadcrumb/breadcrumb.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {shallow} from 'enzyme';
+import { screen, render } from '../../utils/test'
 import Breadcrumb from './index';
 
 const items = [
@@ -18,7 +18,13 @@ const items = [
 
 describe('Breadcrumb component', () => {
 	test('Matches the snapshot', () => {
-		const wrapper = shallow(<Breadcrumb items={items} />);
-		expect(wrapper).toMatchSnapshot();
+		const { asFragment } = render(<Breadcrumb items={items} />);
+		expect(asFragment()).toMatchSnapshot();
 	});
+	test('Renders all items', async () => {
+		render(<Breadcrumb items={items} />);
+		expect(await screen.findByText(items[0].text)).toBeVisible();
+		expect(await screen.findByText(items[1].text)).toBeVisible();
+		expect(await screen.findByText(items[2].text)).toBeVisible();
+	})
 });
diff --git a/src/components/Button/__snapshots__/button.test.jsx.snap b/src/components/Button/__snapshots__/button.test.jsx.snap
index 3b2b6858..276cbac5 100644
--- a/src/components/Button/__snapshots__/button.test.jsx.snap
+++ b/src/components/Button/__snapshots__/button.test.jsx.snap
@@ -10,3 +10,30 @@ exports[`Button component Matches the snapshot 1`] = `
   </button>
 </DocumentFragment>
 `;
+
+exports[`Button component Renders icon 1`] = `
+<DocumentFragment>
+  <button
+    class="ssb-btn secondary-btn"
+    type="button"
+  >
+    <div
+      class="sb-icon"
+    >
+      <i />
+    </div>
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <button
+    class="ssb-btn negative primary-btn"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
diff --git a/src/components/Button/button.test.jsx b/src/components/Button/button.test.jsx
index 46e70158..c9bb5fa7 100644
--- a/src/components/Button/button.test.jsx
+++ b/src/components/Button/button.test.jsx
@@ -1,32 +1,33 @@
 import React from 'react';
-import {render} from '@testing-library/react'
-import {shallow} from 'enzyme';
+import userEvent from '@testing-library/user-event'
+import { screen, render } from '../../utils/test'
 import Button from './index';
 
 describe('Button component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Button>Button</Button>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles classNames correctly', () => {
-		const wrapper = shallow(<Button primary negative>Button</Button>);
-		expect(wrapper.find('.ssb-btn').hasClass('negative')).toEqual(true);
-		expect(wrapper.find('.ssb-btn').hasClass('primary-btn')).toEqual(true);
+		const { asFragment } = render(<Button primary negative>Button</Button>);
+		expect(asFragment()).toMatchSnapshot();
 	});
-	test('Sets aria-label correctly', () => {
-		const wrapper = shallow(<Button primary ariaLabel={'test text'}>Button</Button>);
-		expect(wrapper.find('.ssb-btn').prop('aria-label')).toEqual('test text');
+	test('Sets aria-label correctly', async () => {
+		render(<Button primary ariaLabel={'test text'}>Button</Button>);
+		expect(await screen.findByLabelText('test text')).toBeVisible();
 	});
 	test('Renders icon', () => {
-		const wrapper = shallow(<Button icon={<i />}>Button</Button>);
-		expect(wrapper.find('.ssb-btn').containsMatchingElement(<i />)).toEqual(true);
+		const { asFragment } = render(<Button icon={<i />}>Button</Button>);
+		expect(asFragment()).toMatchSnapshot();
 	});
-	test('Sends callback', () => {
+	test('Sends callback', async () => {
+		const user = userEvent.setup()
 		const onClick = jest.fn();
-		const wrapper = shallow(<Button onClick={onClick}>Tests</Button>);
-		wrapper.find('button').simulate('click');
+		render(<Button onClick={onClick}>Tests</Button>);
+		const button = await screen.findByRole('button', {name: 'Tests'})
+		await user.click(button)
+		await user.click(button)
 		expect(onClick).toBeCalled();
-		wrapper.find('button').simulate('click');
 		expect(onClick).toBeCalledTimes(2);
 	});
 });
diff --git a/src/components/ButtonTertiary/__snapshots__/buttonTertiary.test.jsx.snap b/src/components/ButtonTertiary/__snapshots__/buttonTertiary.test.jsx.snap
index c734716f..2c3c3986 100644
--- a/src/components/ButtonTertiary/__snapshots__/buttonTertiary.test.jsx.snap
+++ b/src/components/ButtonTertiary/__snapshots__/buttonTertiary.test.jsx.snap
@@ -1,5 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Button Tertiary component Applies negative class correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-btn-tertiary negative"
+  >
+    <button
+      aria-controls="accordion-section"
+      aria-disabled="false"
+      aria-expanded="false"
+      class="button-header closed icon"
+      id="accordion-button-undefined"
+      tabindex="0"
+    >
+      <span
+        class="button-grid"
+      >
+        <span
+          class="header-text"
+        >
+          Click Me!
+        </span>
+        <svg
+          class="expand-icon"
+          fill="none"
+          height="22"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="22"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline
+            points="6 9 12 15 18 9"
+          />
+        </svg>
+      </span>
+    </button>
+    <div
+      aria-labelledby="accordion-button-undefined"
+      class="accordion-body closed"
+      id="accordion-section"
+      role="region"
+    >
+      Body
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Button Tertiary component Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
@@ -18,7 +69,60 @@ exports[`Button Tertiary component Matches the snapshot 1`] = `
       >
         <span
           class="header-text"
-        />
+        >
+          Click Me!
+        </span>
+        <svg
+          class="expand-icon"
+          fill="none"
+          height="22"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="22"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline
+            points="6 9 12 15 18 9"
+          />
+        </svg>
+      </span>
+    </button>
+    <div
+      aria-labelledby="accordion-button-undefined"
+      class="accordion-body closed"
+      id="accordion-section"
+      role="region"
+    >
+      Body
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Button Tertiary component Renders toggle icon when accordion prop is true 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-btn-tertiary"
+  >
+    <button
+      aria-controls="accordion-section"
+      aria-disabled="false"
+      aria-expanded="false"
+      class="button-header closed icon"
+      id="accordion-button-undefined"
+      tabindex="0"
+    >
+      <span
+        class="button-grid"
+      >
+        <span
+          class="header-text"
+        >
+          Click Me!
+        </span>
         <svg
           class="expand-icon"
           fill="none"
@@ -43,7 +147,7 @@ exports[`Button Tertiary component Matches the snapshot 1`] = `
       id="accordion-section"
       role="region"
     >
-      Button
+      Body
     </div>
   </div>
 </DocumentFragment>
diff --git a/src/components/ButtonTertiary/buttonTertiary.test.jsx b/src/components/ButtonTertiary/buttonTertiary.test.jsx
index 35cb7196..a49e235c 100644
--- a/src/components/ButtonTertiary/buttonTertiary.test.jsx
+++ b/src/components/ButtonTertiary/buttonTertiary.test.jsx
@@ -1,35 +1,42 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {expect} from '@jest/globals'
+import { screen, render } from '../../utils/test'
 import ButtonTertiary from './index';
 
+const header = 'Click Me!'
+
 describe('Button Tertiary component', () => {
 	test('Matches the snapshot', () => {
-		const { asFragment } = render(<ButtonTertiary>Button</ButtonTertiary>);
-		expect(asFragment()).toMatchSnapshot ();
+		const { asFragment } = render(<ButtonTertiary header={header}>Body</ButtonTertiary>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Applies negative class correctly', () => {
-    const wrapper = shallow(<ButtonTertiary negative={true}>Button</ButtonTertiary>);
-    expect(wrapper.find('.ssb-btn-tertiary').hasClass('negative')).toEqual(true);
+    const { asFragment } = render(<ButtonTertiary header={header} negative={true}>Body</ButtonTertiary>);
+		expect(asFragment()).toMatchSnapshot();
   });
-	test('Disables button when prop is true', () => {
-    const wrapper = shallow(<ButtonTertiary id={'1'} disabled={true}>Button</ButtonTertiary>);
-    expect(wrapper.find('button#accordion-button-1').props().disabled).toEqual(true);
+	test('Disables button when prop is true', async () => {
+    render(<ButtonTertiary id={'1'} disabled={true} header={header}>Body</ButtonTertiary>);
+    const button = await screen.findByRole('button', { text: header })
+    expect(button.disabled).toEqual(true);
   });
-  test('Renders correct header text', () => {
-    const wrapper = shallow(<ButtonTertiary header='Click Me!'>Button</ButtonTertiary>);
-    expect(wrapper.find('.header-text').text()).toEqual('Click Me!');
+  test('Renders correct header text', async () => {
+    render(<ButtonTertiary header={header}>Button</ButtonTertiary>);
+    const el = await screen.findByText(header)
+    expect(el.parentElement).toBeVisible();
   });
-  
-	test('Manages open/close state', () => {
-    const wrapper = shallow(<ButtonTertiary id={'1'} openByDefault={true}>Button</ButtonTertiary>);
-    expect(wrapper.find('.accordion-body').hasClass('open')).toEqual(true);
+	test('Closes after click when starting open', async () => {
+    const user = userEvent.setup()
+    render(<ButtonTertiary id={'1'} openByDefault={true} header={header}>Body</ButtonTertiary>);
+    expect(await screen.findByText('Body')).toBeVisible();
+
+    const button = await screen.findByRole('button')
+		await user.click(button)
     
-    wrapper.find('button#accordion-button-1').simulate('click');
-    expect(wrapper.find('.accordion-body').hasClass('closed')).toEqual(true);
+    expect(await screen.findByText('Body')).not.toBeVisible();
   });
   test('Renders toggle icon when accordion prop is true', () => {
-    const wrapper = shallow(<ButtonTertiary accordion={true}>Button</ButtonTertiary>);
-    expect(wrapper.find('.expand-icon').exists()).toEqual(true);
+    const { asFragment } = render(<ButtonTertiary header={header} accordion={true}>Body</ButtonTertiary>);
+		expect(asFragment()).toMatchSnapshot();
   });
 });
\ No newline at end of file
diff --git a/src/components/Card/__snapshots__/card.test.jsx.snap b/src/components/Card/__snapshots__/card.test.jsx.snap
index 4df25860..0d2c47df 100644
--- a/src/components/Card/__snapshots__/card.test.jsx.snap
+++ b/src/components/Card/__snapshots__/card.test.jsx.snap
@@ -44,3 +44,130 @@ exports[`Card component Matches the snapshot 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Card component Show image orientation correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-card"
+  >
+    <div
+      class="clickable left-orientation"
+    >
+      <div
+        class="card-image"
+      >
+        <img
+          alt="testImage"
+          src="testImage"
+        />
+      </div>
+      <div
+        class="card-content with-image"
+      >
+        <div
+          class="card-text"
+        >
+          ProfileBox
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card component Toggles classNames icon correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-card"
+  >
+    <div
+      class="clickable top-orientation"
+    >
+      <div
+        class="card-content"
+      >
+        <div
+          class="card-icon"
+        >
+          <i
+            src="testIcon"
+          />
+        </div>
+        <div
+          class="card-text"
+        >
+          ProfileBox
+        </div>
+        <svg
+          aria-hidden="true"
+          class="arrow-icon"
+          fill="none"
+          height="22"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="22"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <line
+            x1="5"
+            x2="19"
+            y1="12"
+            y2="12"
+          />
+          <polyline
+            points="12 5 19 12 12 19"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card component Toggles classNames profiled correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-card"
+  >
+    <div
+      class="clickable top-orientation"
+    >
+      <div
+        class="card-content profiled"
+      >
+        <div
+          class="card-text"
+        >
+          ProfileBox
+        </div>
+        <svg
+          aria-hidden="true"
+          class="arrow-icon"
+          fill="none"
+          height="22"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="22"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <line
+            x1="5"
+            x2="19"
+            y1="12"
+            y2="12"
+          />
+          <polyline
+            points="12 5 19 12 12 19"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/components/Card/card.test.jsx b/src/components/Card/card.test.jsx
index 116a0b81..f17e5d8a 100644
--- a/src/components/Card/card.test.jsx
+++ b/src/components/Card/card.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+
+import { screen, render } from '../../utils/test'
 import Card from './index';
 
 jest.mock("../../utils/useId", () => {
@@ -10,40 +10,39 @@ jest.mock("../../utils/useId", () => {
 describe('Card component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Card href="">ProfileBox</Card>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles classNames profiled correctly', () => {
-		const wrapper = shallow(<Card href="" profiled>ProfileBox</Card>);
-		expect(wrapper.find('.card-content').hasClass('profiled')).toEqual(true);
+		const { asFragment } = render(<Card href="" profiled>ProfileBox</Card>);
+		expect(asFragment()).toMatchSnapshot();
 	});
-	test('Toggles classNames image correctly', () => {
-		const wrapper = shallow(<Card href="" image={<img src="testImage" alt="testImage" />}>ProfileBox</Card>);
-		expect(wrapper.find('div.clickable').containsMatchingElement(<img/>)).toEqual(true);
+	test('Toggles classNames image correctly', async () => {
+		const testId = 'testId';
+		render(<Card href="" image={<img data-testid={testId} src="testImage" alt="testImage" />}>ProfileBox</Card>);
+		expect(await screen.findByTestId(testId)).toBeVisible();
 	});
 	test('Show image orientation correctly', () => {
-		const wrapper = shallow(<Card href="" image={<img src="testImage" alt="testImage" />} imagePlacement="left">ProfileBox</Card>);
-		expect(wrapper.find('div.clickable').hasClass('left-orientation')).toEqual(true);
+		const { asFragment } = render(<Card href="" image={<img src="testImage" alt="testImage" />} imagePlacement="left">ProfileBox</Card>);
+		expect(asFragment()).toMatchSnapshot();
 	});
-	test('Show download link if fileLocation', () => {
-		const wrapper = shallow(<Card href="" fileLocation="./not_a_file.md" downloadText="Download">ProfileBox</Card>);
-		expect(wrapper.find('.download-section').exists()).toEqual(true);
-		expect(wrapper.containsMatchingElement(<span>Download</span>)).toEqual(true);
+	test('Show download link if fileLocation', async () => {
+		render(<Card href="" fileLocation="./not_a_file.md" downloadText="Download">ProfileBox</Card>);
+		expect(await screen.findByText('Download')).toBeVisible();
 	});
   test('Toggles classNames icon correctly', () => {
-    const wrapper = shallow(<Card href="" icon={<i src="testIcon"/>}>ProfileBox</Card>);
-    expect(wrapper.find('.card-icon').exists()).toEqual(true);
+    const { asFragment } = render(<Card href="" icon={<i src="testIcon"/>}>ProfileBox</Card>);
+    expect(asFragment()).toMatchSnapshot();
   });
-  test('Render subtitle', () => {
-    const wrapper = shallow(<Card href="" subTitle="Subtitle">ProfileBox</Card>);
-    expect(wrapper.find('.card-subtitle').render().text()).toBe('Subtitle');
+  test('Render subtitle', async () => {
+    render(<Card href="" subTitle="Subtitle">ProfileBox</Card>);
+    expect(await screen.findByText('Subtitle')).toBeVisible();
   });
-  test('Render title', () => {
-    const wrapper = shallow(<Card href="" title="Tittel">ProfileBox</Card>);
-    expect(wrapper.find('.card-title').render().text()).toBe('Tittel');
+  test('Render title', async () => {
+    render(<Card href="" title="Tittel">ProfileBox</Card>);
+    expect(await screen.findByText('Tittel')).toBeVisible();
   });
-  test('Render hrefText', () => {
-    const wrapper = shallow(<Card href="" hrefText="Handling">ProfileBox</Card>);
-    expect(wrapper.find('.card-action').find('.href-text').render().text()).toBe('Handling');
+  test('Render hrefText', async () => {
+		render(<Card href="" hrefText="Handling">ProfileBox</Card>);
+    expect(await screen.findByText('Handling')).toBeVisible();
   });
-
 });
diff --git a/src/components/CategoryLink/categorylink.test.jsx b/src/components/CategoryLink/categorylink.test.jsx
index 3a36cfaf..f7694931 100644
--- a/src/components/CategoryLink/categorylink.test.jsx
+++ b/src/components/CategoryLink/categorylink.test.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import CategoryLink from './index';
 
 describe('CategoryLink component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<CategoryLink href="" titleText="Category link with description" subText="Description goes here" />);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
diff --git a/src/components/Checkbox/checkbox.test.jsx b/src/components/Checkbox/checkbox.test.jsx
index ceee6027..e5dbba87 100644
--- a/src/components/Checkbox/checkbox.test.jsx
+++ b/src/components/Checkbox/checkbox.test.jsx
@@ -1,23 +1,28 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { screen, render } from '../../utils/test'
 import Checkbox from './index';
 
 describe('Checkbox component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Checkbox value="item">Item</Checkbox>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 
-	test('Sets selected state by default prop', () => {
-		const wrapper = shallow(<Checkbox value="item" selected>Item</Checkbox>);
-		expect(wrapper.find('input').props().checked).toEqual(true);
+	test('Sets selected state by default prop', async () => {
+		render(<Checkbox value="item" selected>Item</Checkbox>);
+		expect(await screen.getByRole('checkbox')).toBeChecked();
 	});
 
-	test('Sends callback', () => {
+	test('Sends callback', async () => {
 		const onClick = jest.fn();
-		const wrapper = shallow(<Checkbox callback={onClick} value="item">Item</Checkbox>);
-		wrapper.find('input').simulate('change', {target: {checked: true}});
+		const user = userEvent.setup()
+
+		render(<Checkbox callback={onClick} value="item">Item</Checkbox>);
+
+		const checkbox = await screen.getByRole('checkbox');
+		await user.click(checkbox)
 		expect(onClick).toBeCalled();
 	});
 });
diff --git a/src/components/CheckboxGroup/checkboxgroup.test.jsx b/src/components/CheckboxGroup/checkboxgroup.test.jsx
index f80aa8d2..43b8813c 100644
--- a/src/components/CheckboxGroup/checkboxgroup.test.jsx
+++ b/src/components/CheckboxGroup/checkboxgroup.test.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import {mount, shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { screen, render } from '../../utils/test'
 import CheckboxGroup from './index';
-import Checkbox from '../Checkbox';
 
 const items = [
 	{
@@ -21,13 +21,17 @@ const items = [
 describe('CheckboxGroup component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<CheckboxGroup header="Header" items={items} />);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 
-	test('OnChange in child triggers parent', () => {
+	test('OnChange in child triggers parent', async () => {
 		const onChange = jest.fn();
-		const wrapper = mount(<CheckboxGroup header="Header" onChange={onChange} items={items} />);
-		wrapper.find(Checkbox).first().find('input').simulate('change', {target: {checked: true}});
+		const user = userEvent.setup();
+
+		render(<CheckboxGroup header="Header" onChange={onChange} items={items} />);
+		const checkbox = await screen.findByRole('checkbox', {name: 'Item 1'});
+
+		await user.click(checkbox);
 		expect(onChange).toBeCalled();
 	});
 });
diff --git a/src/components/Dialog/__snapshots__/dialog.test.jsx.snap b/src/components/Dialog/__snapshots__/dialog.test.jsx.snap
index a113672a..aca84bc1 100644
--- a/src/components/Dialog/__snapshots__/dialog.test.jsx.snap
+++ b/src/components/Dialog/__snapshots__/dialog.test.jsx.snap
@@ -1,5 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Dialog component Change dialog type Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-dialog warning"
+  >
+    <div
+      class="icon-panel"
+    >
+      <svg
+        class="icon"
+        fill="none"
+        height="45"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="45"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+        />
+        <line
+          x1="12"
+          x2="12"
+          y1="9"
+          y2="13"
+        />
+        <line
+          x1="12"
+          x2="12.01"
+          y1="17"
+          y2="17"
+        />
+      </svg>
+    </div>
+    <div
+      class="dialog-content"
+    >
+      <span
+        class="dialog-title"
+      >
+        Dialog Title
+      </span>
+      <div
+        class="content"
+      >
+        Dialog
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Dialog component Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
diff --git a/src/components/Dialog/dialog.test.jsx b/src/components/Dialog/dialog.test.jsx
index 0f635c81..7749d66c 100644
--- a/src/components/Dialog/dialog.test.jsx
+++ b/src/components/Dialog/dialog.test.jsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+
+import { render } from '../../utils/test'
 import Dialog from './index';
 
 describe('Dialog component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Dialog	title="Dialog Title">Dialog</Dialog>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Change dialog type Toggles classNames correctly', () => {
-		const wrapper = shallow(<Dialog	title="Dialog Title" type="warning">Dialog</Dialog>);
-		expect(wrapper.hasClass('warning')).toEqual(true);
+		const { asFragment } = render(<Dialog	title="Dialog Title" type="warning">Dialog</Dialog>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
diff --git a/src/components/Divider/__snapshots__/divider.test.jsx.snap b/src/components/Divider/__snapshots__/divider.test.jsx.snap
index 1de67882..53f5ec0c 100644
--- a/src/components/Divider/__snapshots__/divider.test.jsx.snap
+++ b/src/components/Divider/__snapshots__/divider.test.jsx.snap
@@ -8,3 +8,21 @@ exports[`Divider component Matches the snapshot 1`] = `
   />
 </DocumentFragment>
 `;
+
+exports[`Divider component set Dark color and optional className 1`] = `
+<DocumentFragment>
+  <hr
+    aria-hidden="true"
+    class="ssb-divider mt-3 type-dark"
+  />
+</DocumentFragment>
+`;
+
+exports[`Divider component set Light color 1`] = `
+<DocumentFragment>
+  <hr
+    aria-hidden="true"
+    class="ssb-divider type-light"
+  />
+</DocumentFragment>
+`;
diff --git a/src/components/Divider/divider.test.jsx b/src/components/Divider/divider.test.jsx
index b18a1d60..c440902b 100644
--- a/src/components/Divider/divider.test.jsx
+++ b/src/components/Divider/divider.test.jsx
@@ -1,20 +1,18 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test';
 import Divider from './index';
 
 describe('Divider component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Divider />);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('set Light color', () => {
-		const wrapper = shallow(<Divider light />);
-		expect(wrapper.hasClass('type-light')).toEqual(true);
+		const { asFragment } = render(<Divider light />);
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('set Dark color and optional className', () => {
-		const wrapper = shallow(<Divider dark className="mt-3"/>);
-		expect(wrapper.hasClass('type-dark')).toEqual(true);
-		expect(wrapper.hasClass('mt-3')).toEqual(true);
+		const { asFragment } = render(<Divider dark className="mt-3" />);
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
diff --git a/src/components/Dropdown/dropdown.test.jsx b/src/components/Dropdown/dropdown.test.jsx
index ee0775c4..f1ca176a 100644
--- a/src/components/Dropdown/dropdown.test.jsx
+++ b/src/components/Dropdown/dropdown.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { screen, render } from '../../utils/test'
 import Dropdown from './index';
 
 const items = [
@@ -24,42 +25,65 @@ jest.mock("../../utils/useId", () => {
 describe('Dropdown component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Dropdown header="Menu header" items={items} />);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 
-	test('Sets pre-selected value', () => {
-		const wrapper = shallow(<Dropdown header="Menu header" selectedItem={{ title: 'Ocean', id: 'item3' }} items={items} />);
-		expect(wrapper.find('.dropdown-interactive-area').find('button').text()).toEqual('Ocean');
+	test('Sets pre-selected value', async () => {
+		render(<Dropdown header="Menu header" selectedItem={{ title: 'Ocean', id: 'item3' }} items={items} />);
+		expect((await screen.findByRole('button')).textContent).toEqual('Ocean');
 	});
 
-	test('Searchable dropdown', () => {
-		const wrapper = shallow(<Dropdown header="Menu header" searchable items={items} placeholder="Search and select" />);
-		expect(wrapper.find('.dropdown-interactive-area').find('input').props().disabled).toEqual(false);
+	test('Searchable dropdown', async () => {
+		render(<Dropdown header="Menu header" searchable items={items} placeholder="Search and select" />);
+		expect(await screen.findByPlaceholderText('Search and select')).toBeVisible();
+		expect((await screen.findByRole('combobox')).disabled).toEqual(false);
 	});
 
-	test('Change classname to open on click', () => {
-		const wrapper = shallow(<Dropdown header="Menu header" items={items} />);
-		wrapper.find('button').first().simulate('click');
-		expect(wrapper.find('button').first().hasClass('focused')).toEqual(true);
-		expect(wrapper.exists('.list-of-options')).toEqual(true);
+	test('Change classname to open on click', async () => {
+		const user = userEvent.setup();
+		render(<Dropdown header="Menu header" items={items} />);
+
+		const button = await screen.findByRole('button');
+		await user.click(button);
+
+		expect(await screen.findByRole('listbox')).toBeVisible();
+		expect(await screen.findByText(items[0].title)).toBeVisible();
+		expect(await screen.findByText(items[1].title)).toBeVisible();
+		expect(await screen.findByText(items[2].title)).toBeVisible();
 	});
 
-	test('Choose first item', () => {
-		const wrapper = shallow(<Dropdown header="Menu header" items={items} open />);
-		wrapper.find('.list-of-options').find('li').first().simulate('click');
-		expect(wrapper.find('.dropdown-interactive-area').find('button').text()).toEqual('Apples');
+	test('Choose first item', async () => {
+		const user = userEvent.setup();
+		Element.prototype.scrollIntoView = jest.fn();
+
+		render(<Dropdown header="Menu header" items={items} open />);
+
+		const option = await screen.findByRole('option', {name: items[0].title});
+		await user.click(option);
+		expect((await screen.findByRole('button')).textContent).toEqual(items[0].title);
 	});
 
-	test('Verify disabled item', () => {
-		const wrapper = shallow(<Dropdown header="Menu header" items={items} open />);
-		expect(wrapper.find('.list-of-options').find('li').find({ id: 'item2' }).hasClass('disabled')).toBe(true);
+	test('Verify disabled item', async () => {
+		render(<Dropdown header="Menu header" items={items} open />);
+		const option = await screen.findByRole('option', {name: items[1].title});
+		expect(option.getAttribute("aria-disabled")).toEqual('true');
 	});
 
-	test('Triggers filter function on search', () => {
-		const wrapper = shallow(<Dropdown searchField searchable items={items} open />);
-		expect(wrapper.find('.option-list-element')).toHaveLength(3);
-		wrapper.find('input').simulate('change', {target: {value: 'oc'}});
-		expect(wrapper.find('.option-list-element')).toHaveLength(1);
+	test('Triggers filter function on search', async () => {
+		const user = userEvent.setup();
+		render(<Dropdown searchField searchable items={items} open />);
+
+		expect(await screen.findByText(items[0].title)).toBeVisible();
+		expect(await screen.findByText(items[1].title)).toBeVisible();
+		expect(await screen.findByText(items[2].title)).toBeVisible();
+
+		const input = await screen.findByRole('combobox');
+		await user.click(input);
+		await user.keyboard('oc')
+
+		expect(await screen.queryByText(items[0].title)).toBeNull();
+		expect(await screen.queryByText(items[1].title)).toBeNull();
+		expect(await screen.queryByText(items[2].title)).toBeVisible();
 	});
 
 });
diff --git a/src/components/FactBox/factbox.test.jsx b/src/components/FactBox/factbox.test.jsx
index a97311b7..f10bb664 100644
--- a/src/components/FactBox/factbox.test.jsx
+++ b/src/components/FactBox/factbox.test.jsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import { screen, render } from '../../utils/test'
 import FactBox from './index';
 
 describe('FactBox component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<FactBox header="fact box header" text="fact box Text"  />);
-		expect(asFragment()).toMatchSnapshot ();
-	});
-	test('set openByDefault', () => {
-		const wrapper = shallow(<FactBox header="fact box header" text="fact box Text" openByDefault />);
-		expect(wrapper.find('Accordion').props().openByDefault).toEqual(true);
+		expect(asFragment()).toMatchSnapshot();
 	});
+	test('set openByDefault', async () => {
+		const text = 'fact box Text';
+		render(<FactBox header="fact box header" text={text} openByDefault />);
 
+		expect(await screen.findByText(text)).toBeVisible();
+	});
 });
diff --git a/src/components/Footer/footer.test.jsx b/src/components/Footer/footer.test.jsx
index 2de92773..2afd0ce9 100644
--- a/src/components/Footer/footer.test.jsx
+++ b/src/components/Footer/footer.test.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import Footer from './index';
 
 describe('Footer', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Footer><div>Content</div></Footer>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
diff --git a/src/components/FormError/formError.test.jsx b/src/components/FormError/formError.test.jsx
index 96553aff..69f9d9d4 100644
--- a/src/components/FormError/formError.test.jsx
+++ b/src/components/FormError/formError.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test';
 import FormError from './index';
 
 const errorMessages = [
@@ -11,7 +11,7 @@ const errorMessages = [
 describe('FormError component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<FormError errorMessages={errorMessages} title="Some fields are not right!" />);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 });
diff --git a/src/components/Glossary/glossary.test.jsx b/src/components/Glossary/glossary.test.jsx
index 65b8580b..0785c4eb 100644
--- a/src/components/Glossary/glossary.test.jsx
+++ b/src/components/Glossary/glossary.test.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import Glossary from './index';
 
 describe('Glossary', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Glossary explanation="placeholderText">Glossary</Glossary>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
\ No newline at end of file
diff --git a/src/components/Header/header.test.jsx b/src/components/Header/header.test.jsx
index 71290e85..0de3e437 100644
--- a/src/components/Header/header.test.jsx
+++ b/src/components/Header/header.test.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import Header from './index';
 
 describe('Header', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Header><div>Content</div></Header>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
diff --git a/src/components/Highlight/__snapshots__/highlight.test.jsx.snap b/src/components/Highlight/__snapshots__/highlight.test.jsx.snap
index 5fc35f7c..cc28c48b 100644
--- a/src/components/Highlight/__snapshots__/highlight.test.jsx.snap
+++ b/src/components/Highlight/__snapshots__/highlight.test.jsx.snap
@@ -9,3 +9,13 @@ exports[`Highlight component Matches the snapshot 1`] = `
   </mark>
 </DocumentFragment>
 `;
+
+exports[`Highlight component Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <mark
+    class="ssb-mark negative"
+  >
+     «Highlight» 
+  </mark>
+</DocumentFragment>
+`;
diff --git a/src/components/Highlight/highlight.test.jsx b/src/components/Highlight/highlight.test.jsx
index efd70ee1..78099bc6 100644
--- a/src/components/Highlight/highlight.test.jsx
+++ b/src/components/Highlight/highlight.test.jsx
@@ -1,16 +1,15 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import Highlight from './index';
 
 describe('Highlight component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Highlight>«Highlight»</Highlight>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles classNames correctly', () => {
-		const wrapper = shallow(<Highlight negative>«Highlight»</Highlight>);
-		expect(wrapper.hasClass('negative')).toEqual(true);
+		const { asFragment } = render(<Highlight negative>«Highlight»</Highlight>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 });
diff --git a/src/components/Input/__snapshots__/input.test.jsx.snap b/src/components/Input/__snapshots__/input.test.jsx.snap
index a6945e77..f5a5c774 100644
--- a/src/components/Input/__snapshots__/input.test.jsx.snap
+++ b/src/components/Input/__snapshots__/input.test.jsx.snap
@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Input component Adds optional classes to wrapper 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-input negative error"
+  >
+    <div
+      class="input-wrapper"
+    >
+      <input
+        class=" with-icon"
+        id="1"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Input component Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
@@ -18,3 +37,53 @@ exports[`Input component Matches the snapshot 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Input component Searchable input renders search icon 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-input"
+  >
+    <div
+      class="input-wrapper"
+      role="search"
+    >
+      <input
+        aria-label="Input field Search"
+        class=" with-icon"
+        id="1"
+        placeholder="Search text"
+        type="text"
+        value=""
+      />
+      <button
+        aria-label="search"
+        class="icon-wrapper search-icon"
+      >
+        <svg
+          fill="none"
+          height="18"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="11"
+            cy="11"
+            r="8"
+          />
+          <line
+            x1="21"
+            x2="16.65"
+            y1="21"
+            y2="16.65"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/components/Input/input.test.jsx b/src/components/Input/input.test.jsx
index 7ecc073d..c7f44d57 100644
--- a/src/components/Input/input.test.jsx
+++ b/src/components/Input/input.test.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import {mount, shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { screen, render } from '../../utils/test'
 import Input from './index';
-import InputError from '../InputError';
 
 jest.mock("../../utils/useId", () => {
 	return { useId: () => 1};
@@ -11,49 +11,57 @@ jest.mock("../../utils/useId", () => {
 describe('Input component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Input>Input</Input>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 
-	test('Renders label if added', () => {
-		const wrapper = shallow(<Input label="Label" />);
-		expect(wrapper.find('label').exists()).toEqual(true);
+	test('Renders label if added', async () => {
+		render(<Input label="Label 123" />);
+		expect(await screen.findByText('Label 123')).toBeVisible();
 	});
 
 	test('Adds optional classes to wrapper', () => {
-		const wrapper = shallow(<Input negative error />);
-		expect(wrapper.find('.ssb-input').hasClass('negative')).toEqual(true);
-		expect(wrapper.find('.ssb-input').hasClass('error')).toEqual(true);
+		const { asFragment } = render(<Input negative error />);
+		expect(asFragment()).toMatchSnapshot();
 	});
-
-	test('Type is customizable', () => {
-		const wrapper = mount(<Input type="email" />);
-		expect(wrapper.find('input').props().type).toEqual('email');
+	
+	test('Type is customizable', async () => {
+		render(<Input type="email" />);
+		// default role of type=email input is textbox
+		const input = await screen.findByRole('textbox');
+		expect(input.type).toEqual('email');
 	});
 
 	test('Searchable input renders search icon', () => {
-		const wrapper = shallow(<Input ariaLabel="Input field Search" searchField placeholder="Search text" />);
-		expect(wrapper.find('button').hasClass('search-icon')).toEqual(true);
+		const { asFragment } = render(<Input ariaLabel="Input field Search" searchField placeholder="Search text" />);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
-	test('handleInputChange', () => {
+	test('handleInputChange', async () => {
 		const handleChange = jest.fn();
-		const wrapper = shallow(<Input handleChange={handleChange} />);
-		wrapper.find('input').simulate('change', {
-			target: { value: 'hello' }
-		});
+		const user = userEvent.setup();
+
+		render(<Input handleChange={handleChange} />);
+		const input = screen.getByRole('textbox');
+		await user.click(input)
+		await user.keyboard('hello')
+
 		expect(handleChange).toBeCalledWith('hello');
 	});
 
-	test('handle submit', () => {
+	test('handle submit', async () => {
 		const handleSubmit = jest.fn();
-		const wrapper = shallow(<Input searchField submitCallback={handleSubmit} />);
-		wrapper.find('.icon-wrapper').simulate('click');
+		const user = userEvent.setup();
+
+		render(<Input searchField submitCallback={handleSubmit} />);
+		const button = await screen.findByRole('button');
+		await user.click(button)
+
 		expect(handleSubmit).toBeCalled();
 	});
 
-	test('Renders an error message on error', () => {
-		const wrapper = shallow(<Input error errorMessage="An error" />);
-		expect(wrapper.find(InputError)).toHaveLength(1);
+	test('Renders an error message on error', async () => {
+		render(<Input error errorMessage="An error" />);
+		expect(await screen.findByText('An error')).toBeVisible();
 	})
 
 });
diff --git a/src/components/InputError/__snapshots__/input-error.test.jsx.snap b/src/components/InputError/__snapshots__/input-error.test.jsx.snap
index 18c05e3e..439b6ff4 100644
--- a/src/components/InputError/__snapshots__/input-error.test.jsx.snap
+++ b/src/components/InputError/__snapshots__/input-error.test.jsx.snap
@@ -13,3 +13,17 @@ exports[`InputError component Matches the snapshot 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`InputError component Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-input-error negative"
+  >
+    <span
+      aria-live="assertive"
+    >
+      Insert error message
+    </span>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/components/InputError/input-error.test.jsx b/src/components/InputError/input-error.test.jsx
index 9a5d121f..ddeb72cb 100644
--- a/src/components/InputError/input-error.test.jsx
+++ b/src/components/InputError/input-error.test.jsx
@@ -1,15 +1,14 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import InputError from './index';
 
 describe('InputError component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<InputError errorMessage="Insert error message" />);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles classNames correctly', () => {
-		const wrapper = shallow(<InputError errorMessage="Insert error message" negative />);
-		expect(wrapper.hasClass('negative')).toEqual(true);
+		const { asFragment } = render(<InputError errorMessage="Insert error message" negative />);
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
diff --git a/src/components/KeyFigures/__snapshots__/keyFigures.test.jsx.snap b/src/components/KeyFigures/__snapshots__/keyFigures.test.jsx.snap
index fa017c6b..e5953456 100644
--- a/src/components/KeyFigures/__snapshots__/keyFigures.test.jsx.snap
+++ b/src/components/KeyFigures/__snapshots__/keyFigures.test.jsx.snap
@@ -1,46 +1,295 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KeyFigures component Matches the snapshot 1`] = `
-<div
-  className="ssb-key-figures large"
->
+<DocumentFragment>
   <div
-    className="kf-icon large"
+    class="ssb-key-figures large"
   >
-    <Home
-      className="feather-home"
-    />
-  </div>
-  <div>
-    <Glossary
-      closeText="Lukk"
-      explanation="Explain something"
+    <div
+      class="kf-icon large"
     >
+      <svg
+        class="feather-home"
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+        />
+        <polyline
+          points="9 22 9 12 15 12 15 22"
+        />
+      </svg>
+    </div>
+    <div>
       <span
-        className="kf-title"
+        class="ssb-glossary"
       >
-        Antall husholdninger
+        <button
+          aria-expanded="false"
+          aria-label="[object Object]"
+          class="glossary-button"
+        >
+          <span
+            class="glossary-text-wrap"
+          >
+            <span
+              class="kf-title"
+            >
+              Antall husholdninger
+            </span>
+          </span>
+          <svg
+            aria-hidden="true"
+            class="glossary-logo"
+            fill="none"
+            height="12"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"
+            />
+            <path
+              d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
+            />
+          </svg>
+        </button>
+        <span
+          class="glossary-popup"
+        >
+          <span
+            class="content-box"
+          >
+            <span
+              class="info-text"
+            >
+              Explain something
+            </span>
+            <span
+              class="glossary-closing"
+            >
+              <button>
+                <svg
+                  aria-hidden="true"
+                  class="icon"
+                  fill="none"
+                  height="16"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="12"
+                    cy="12"
+                    r="10"
+                  />
+                  <line
+                    x1="15"
+                    x2="9"
+                    y1="9"
+                    y2="15"
+                  />
+                  <line
+                    x1="9"
+                    x2="15"
+                    y1="9"
+                    y2="15"
+                  />
+                </svg>
+                <span>
+                  Lukk
+                </span>
+              </button>
+            </span>
+          </span>
+        </span>
       </span>
-    </Glossary>
-    <div
-      className="kf-time"
-    >
-      2018
+      <div
+        class="kf-time"
+      >
+        2018
+      </div>
+      <div
+        class="number-section"
+      >
+        <div
+          class="ssb-number large"
+        >
+          789 398
+        </div>
+        <span
+          class="kf-title subtitle"
+        >
+          husholdninger
+        </span>
+      </div>
     </div>
-    <div
-      className="number-section"
-    >
-      <Number
-        size="large"
+  </div>
+</DocumentFragment>
+`;
+
+exports[`KeyFigures component Render green box variation 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-key-figures medium green-box"
+  >
+    <div>
+      <span
+        class="kf-title"
       >
-        789 398
-      </Number>
+        Keyfigure with green box variation
+      </span>
+      <div
+        class="kf-time"
+      >
+        2018
+      </div>
+      <div
+        class="number-section"
+      >
+        <div
+          class="ssb-number medium"
+        >
+          72,6
+        </div>
+        <span
+          class="kf-title subtitle"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`KeyFigures component Renders Glossary 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-key-figures undefined"
+  >
+    <div>
       <span
-        className="kf-title subtitle"
+        class="ssb-glossary"
       >
-        husholdninger
+        <button
+          aria-expanded="false"
+          aria-label="[object Object]"
+          class="glossary-button"
+        >
+          <span
+            class="glossary-text-wrap"
+          >
+            <span
+              class="kf-title"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="glossary-logo"
+            fill="none"
+            height="12"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"
+            />
+            <path
+              d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
+            />
+          </svg>
+        </button>
+        <span
+          class="glossary-popup"
+        >
+          <span
+            class="content-box"
+          >
+            <span
+              class="info-text"
+            >
+              Explain something
+            </span>
+            <span
+              class="glossary-closing"
+            >
+              <button>
+                <svg
+                  aria-hidden="true"
+                  class="icon"
+                  fill="none"
+                  height="16"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="12"
+                    cy="12"
+                    r="10"
+                  />
+                  <line
+                    x1="15"
+                    x2="9"
+                    y1="9"
+                    y2="15"
+                  />
+                  <line
+                    x1="9"
+                    x2="15"
+                    y1="9"
+                    y2="15"
+                  />
+                </svg>
+                <span>
+                  Lukk
+                </span>
+              </button>
+            </span>
+          </span>
+        </span>
       </span>
+      <div
+        class="kf-time"
+      />
+      <div
+        class="number-section"
+      >
+        <div
+          class="ssb-number small"
+        >
+          789 398
+        </div>
+        <span
+          class="kf-title subtitle"
+        />
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/src/components/KeyFigures/keyFigures.test.jsx b/src/components/KeyFigures/keyFigures.test.jsx
index 82823db5..367fc266 100644
--- a/src/components/KeyFigures/keyFigures.test.jsx
+++ b/src/components/KeyFigures/keyFigures.test.jsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import { Home } from 'react-feather';
+import { screen, render } from '../../utils/test'
+import { Home } from 'react-feather';
 import KeyFigures from './index';
-import Glossary from '../Glossary';
 
 const title = 'Antall husholdninger';
 
 describe('KeyFigures component', () => {
 	test('Matches the snapshot', () => {
-		const wrapper = shallow(
+		const { asFragment } = render(
 			<KeyFigures
 				number="789 398"
 				title={title}
@@ -19,31 +18,26 @@ describe('KeyFigures component', () => {
 				glossary={'Explain something'}
 			/>
 		);
-		expect(wrapper).toMatchSnapshot();
+		expect(asFragment()).toMatchSnapshot();
 	});
 
-	test('Renders Glossary conditionally', () => {
-		const wrapper = shallow(
+	test('Renders Glossary', () => {
+		const { asFragment } = render(
 			<KeyFigures number="789 398" glossary={'Explain something'} />
 		);
-		expect(wrapper.find(Glossary)).toHaveLength(1);
-
-		const wrapper2 = shallow(
-			<KeyFigures number="789 398" />
-		);
-		expect(wrapper2.find(Glossary)).toHaveLength(0);
+		expect(asFragment()).toMatchSnapshot();
 	});
-	test('Renders time and number', () => {
-		const wrapper = shallow(<KeyFigures number="789 398" time="2018" />);
-		expect(wrapper.find('.kf-time').render().text()).toBe('2018');
-		expect(wrapper.find('Number').render().text()).toBe('789 398');
+	test('Renders time and number', async () => {
+		render(<KeyFigures number="789 398" time="2018" />);
+		expect(screen.getByText('2018')).toBeVisible();
+		expect(screen.getByText('789 398')).toBeVisible();
 	});
 	test('Render no number text', () => {
-		const wrapper = shallow(<KeyFigures title="KeyFigure without number" time="2018" noNumberText="Ingen tall"/>);
-		expect(wrapper.find('.no-number').render().text()).toBe('Ingen tall');
+		render(<KeyFigures title="KeyFigure without number" time="2018" noNumberText="Ingen tall"/>);
+		expect(screen.getByText('Ingen tall')).toBeVisible();
 	});
 	test('Render changes', () => {
-		const wrapper = shallow(<KeyFigures
+		render(<KeyFigures
 			title="KeyFigure without number"
 			time="2018"
 				changes={{
@@ -52,13 +46,11 @@ describe('KeyFigures component', () => {
 				changePeriod: 'fra året før',
 			}}
 		/>);
-		// console.log(wrapper.debug());
-		expect(wrapper.find('.kf-changes').exists()).toEqual(true);
-		expect(wrapper.find('ArrowDown').exists()).toEqual(true);
-		// expect(wrapper.find('.kf-changes').render().text()).toBe('Ingen tall');
+		expect(screen.getByText('Ned 1 prosentpoeng')).toBeVisible();
+		expect(screen.getByText('fra året før')).toBeVisible();
 	});
 	test('Render green box variation', () => {
-		const wrapper = shallow(<KeyFigures title="Keyfigure with green box variation" time="2018" number="72,6" greenBox size="medium"/>);
-		expect(wrapper.find('.green-box').exists()).toEqual(true);
+		const { asFragment } = render(<KeyFigures title="Keyfigure with green box variation" time="2018" number="72,6" greenBox size="medium"/>);
+		expect(asFragment()).toMatchSnapshot();
 	})
 });
diff --git a/src/components/LeadParagraph/__snapshots__/leadParagraph.test.jsx.snap b/src/components/LeadParagraph/__snapshots__/leadParagraph.test.jsx.snap
index 38c8d5c6..41413a33 100644
--- a/src/components/LeadParagraph/__snapshots__/leadParagraph.test.jsx.snap
+++ b/src/components/LeadParagraph/__snapshots__/leadParagraph.test.jsx.snap
@@ -9,3 +9,13 @@ exports[`LeadParagraph component Matches the snapshot 1`] = `
   </p>
 </DocumentFragment>
 `;
+
+exports[`LeadParagraph component Toggles className correctly 1`] = `
+<DocumentFragment>
+  <p
+    class="ssb-lead-paragraph negative"
+  >
+    Leading paragraph
+  </p>
+</DocumentFragment>
+`;
diff --git a/src/components/LeadParagraph/leadParagraph.test.jsx b/src/components/LeadParagraph/leadParagraph.test.jsx
index c9d510e3..d1e5f482 100644
--- a/src/components/LeadParagraph/leadParagraph.test.jsx
+++ b/src/components/LeadParagraph/leadParagraph.test.jsx
@@ -1,15 +1,14 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import LeadParagraph from './index';
 
 describe('LeadParagraph component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<LeadParagraph>Leading paragraph</LeadParagraph>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles className correctly', () => {
-		const wrapper = shallow(<LeadParagraph negative>Leading paragraph</LeadParagraph>);
-		expect(wrapper.find('.ssb-lead-paragraph').hasClass('negative')).toEqual(true);
+		const { asFragment } = render(<LeadParagraph negative>Leading paragraph</LeadParagraph>);
+		expect(asFragment()).toMatchSnapshot();
 	})
 });
diff --git a/src/components/Link/__snapshots__/link.test.jsx.snap b/src/components/Link/__snapshots__/link.test.jsx.snap
index 9c8777bf..078a91a6 100644
--- a/src/components/Link/__snapshots__/link.test.jsx.snap
+++ b/src/components/Link/__snapshots__/link.test.jsx.snap
@@ -14,3 +14,60 @@ exports[`Link component Matches the snapshot 1`] = `
   </a>
 </DocumentFragment>
 `;
+
+exports[`Link component Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <a
+    class="ssb-link profiled negative mt-3"
+    href=""
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <span
+      class="link-text"
+    >
+      Profile link
+    </span>
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Link component render icon 1`] = `
+<DocumentFragment>
+  <a
+    class="ssb-link profiled with-icon"
+    href=" "
+  >
+    <div
+      class="icon-wrapper"
+    >
+      <svg
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="5"
+          x2="19"
+          y1="12"
+          y2="12"
+        />
+        <polyline
+          points="12 5 19 12 12 19"
+        />
+      </svg>
+    </div>
+    <span
+      class="link-text"
+    >
+      A profiled link with icon
+    </span>
+  </a>
+</DocumentFragment>
+`;
diff --git a/src/components/Link/link.test.jsx b/src/components/Link/link.test.jsx
index b9c9a7cf..be001903 100644
--- a/src/components/Link/link.test.jsx
+++ b/src/components/Link/link.test.jsx
@@ -1,25 +1,19 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
-import { ArrowRight } from 'react-feather';
+import { render } from '../../utils/test'
+import { ArrowRight } from 'react-feather';
 import Link from './index';
 
 describe('Link component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Link href="">A regular link</Link>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles classNames correctly', () => {
-		const wrapper = shallow(<Link className="mt-3" isExternal href="" negative linkType="profiled">Profile link</Link>);
-		expect(wrapper.hasClass('mt-3')).toEqual(true);
-		expect(wrapper.hasClass('negative')).toEqual(true);
-		expect(wrapper.hasClass('profiled')).toEqual(true);
-		expect(wrapper.props().rel).toEqual('noopener noreferrer');
+		const { asFragment } = render(<Link className="mt-3" isExternal href="" negative linkType="profiled">Profile link</Link>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('render icon', () => {
-		const wrapper = shallow(<Link href=" " linkType="profiled" icon={<ArrowRight />}>A profiled link with icon</Link>);
-		expect(wrapper.hasClass('with-icon')).toEqual(true);
-		expect(wrapper.containsMatchingElement(<ArrowRight />)).toEqual(true);
+		const { asFragment } = render(<Link href=" " linkType="profiled" icon={<ArrowRight />}>A profiled link with icon</Link>);
+		expect(asFragment()).toMatchSnapshot();
 	});
-
 });
diff --git a/src/components/NestedAccordion/nestet-accordion.test.jsx b/src/components/NestedAccordion/nestet-accordion.test.jsx
index 9aa7675b..b6e16781 100644
--- a/src/components/NestedAccordion/nestet-accordion.test.jsx
+++ b/src/components/NestedAccordion/nestet-accordion.test.jsx
@@ -1,18 +1,23 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { screen, render } from '../../utils/test'
 import NestedAccordion from './index';
 
 describe('NestedAccordion component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<NestedAccordion header="A nested accordion header">Nestet accordion</NestedAccordion>);
-		expect(asFragment()).toMatchSnapshot ();
-	});
-	test('Change classname to open on click', () => {
-		const wrapper = shallow(<NestedAccordion header="A nested accordion header">Nestet accordion</NestedAccordion>);
-		wrapper.find('.nested-accordion-header').simulate('click');
-		expect(wrapper.find('.nested-accordion-header').hasClass('open')).toEqual(true);
-		expect(wrapper.find('.nested-accordion-body').hasClass('open')).toEqual(true);
+		expect(asFragment()).toMatchSnapshot();
 	});
+	test('Change to open on click', async () => {
+		const user = userEvent.setup();
+		const headerText = "A nested accordion header"
+		const bodyText = "Nestet accordion"
+		render(<NestedAccordion header={headerText}>{bodyText}</NestedAccordion>);
+		const wrapper = screen.getByText(headerText);
 
+		await user.click(wrapper.parentElement);
+
+		expect(await screen.findByText(bodyText)).toBeVisible();
+	});
 });
diff --git a/src/components/Number/__snapshots__/number.test.jsx.snap b/src/components/Number/__snapshots__/number.test.jsx.snap
index 1c46fbae..39b0c194 100644
--- a/src/components/Number/__snapshots__/number.test.jsx.snap
+++ b/src/components/Number/__snapshots__/number.test.jsx.snap
@@ -9,3 +9,13 @@ exports[`Number component Matches the snapshot 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Number component Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-number small"
+  >
+    599 246 391
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/components/Number/number.test.jsx b/src/components/Number/number.test.jsx
index f4d96109..39119032 100644
--- a/src/components/Number/number.test.jsx
+++ b/src/components/Number/number.test.jsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+
+import { render } from '../../utils/test'
 import Number from './index';
 
 describe('Number component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Number>599 246 391</Number>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles classNames correctly', () => {
-		const wrapper = shallow(<Number size="small">599 246 391</Number>);
-		expect(wrapper.hasClass('small')).toEqual(true);
+		const { asFragment } = render(<Number size="small">599 246 391</Number>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 });
diff --git a/src/components/Pagination/pagination.test.jsx b/src/components/Pagination/pagination.test.jsx
index ac9949eb..c94b55ff 100644
--- a/src/components/Pagination/pagination.test.jsx
+++ b/src/components/Pagination/pagination.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import {render} from '@testing-library/react'
-import { act } from 'react-dom/test-utils';
+import userEvent from '@testing-library/user-event'
+
+import { screen, render } from '../../utils/test'
 import Pagination from './index';
 
 const items = [
@@ -30,48 +30,61 @@ const items = [
 describe('Pagination component', () => {
 	test('Matches snapshot', () => {
 		const { asFragment } = render(<Pagination items={items} />);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 	test('Sets correct default selection', () => {
-		const wrapper = shallow(<Pagination selectedPage={items[0]} items={items} />);
-		expect(wrapper.find('.nav-button-square').first().hasClass('selected')).toEqual(true);
+		render(<Pagination selectedPage={items[0]} items={items} />);
+		const first = screen.getByText('1');
+		expect(first.classList.contains('selected')).toEqual(true);
 	});
 
 	describe('handleSelection function', () => {
 		let callback;
 		let useStateSpy;
+		let user;
 
 		beforeEach(() => {
+			user = userEvent.setup();
 			callback = jest.fn();
 			useStateSpy = jest.spyOn(React, 'useState');
 			useStateSpy.mockImplementation(init => [init, callback]);
 		});
 
-		test('First direction button onClick', () => {
-			const wrapper = shallow(<Pagination onSelect={callback} items={items} />);
-			wrapper.find('.direction-button').first().props().onClick();
+		test('First direction button onClick', async () => {
+			render(<Pagination onSelect={callback} selectedPage={items[2]} items={items} />);
+			const button = screen.getByText('Previous');
+			await user.click(button.parentElement);
+
 			expect(callback).toHaveBeenCalledTimes(1);
 		});
 
-		test('Next direction button', () => {
-			const wrapper = shallow(<Pagination onSelect={callback} items={items} />);
-			wrapper.find('.direction-button').last().props().onClick();
+		test('Next direction button', async () => {
+			render(<Pagination onSelect={callback} items={items} />);
+			const button = screen.getByText('Next');
+			await user.click(button.parentElement);
+
 			expect(callback).toHaveBeenCalledTimes(1);
 		});
 
-		test('Last nav button', () => {
-			const wrapper = shallow(<Pagination onSelect={callback} items={items} />);
-			wrapper.find('.nav-button-square').last().props().onClick();
+		test('Last nav button', async () => {
+			render(<Pagination onSelect={callback} items={items} />);
+
+			const button = screen.getByText('20');
+			await user.click(button);
+			
 			expect(callback).toHaveBeenCalledTimes(1);
-			expect(wrapper.find('.nav-button-square').last().hasClass('selected')).toEqual(true);
+			expect(button.classList.contains('selected')).toEqual(true);
 		});
 
-		test('Clicking first item', () => {
-			const wrapper = shallow(<Pagination onSelect={callback} selectedPage={items[4]} items={items} />);
-			wrapper.find('.nav-button-square').first().props().onClick();
+		test('Clicking first item', async () => {
+			render(<Pagination onSelect={callback} selectedPage={items[4]} items={items} />);
+
+			const button = screen.getByText('1');
+			await user.click(button);
+			
 			expect(callback).toHaveBeenCalledTimes(1);
-			expect(wrapper.find('.nav-button-square').first().hasClass('selected')).toEqual(true);
+			expect(button.classList.contains('selected')).toEqual(true);
 		});
 	});
 });
diff --git a/src/components/Paragraph/__snapshots__/paragraph.test.jsx.snap b/src/components/Paragraph/__snapshots__/paragraph.test.jsx.snap
index 22841c4e..871c2db4 100644
--- a/src/components/Paragraph/__snapshots__/paragraph.test.jsx.snap
+++ b/src/components/Paragraph/__snapshots__/paragraph.test.jsx.snap
@@ -9,3 +9,13 @@ exports[`Paragraph component Matches the snapshot 1`] = `
   </p>
 </DocumentFragment>
 `;
+
+exports[`Paragraph component Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <p
+    class="ssb-paragraph negative mt-3"
+  >
+    Paragraph
+  </p>
+</DocumentFragment>
+`;
diff --git a/src/components/Paragraph/paragraph.test.jsx b/src/components/Paragraph/paragraph.test.jsx
index 9336fa38..ba297988 100644
--- a/src/components/Paragraph/paragraph.test.jsx
+++ b/src/components/Paragraph/paragraph.test.jsx
@@ -1,17 +1,15 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import Paragraph from './index';
 
 describe('Paragraph component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Paragraph>Paragraph</Paragraph>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles classNames correctly', () => {
-		const wrapper = shallow(<Paragraph className="mt-3" negative>Paragraph</Paragraph>);
-		expect(wrapper.hasClass('mt-3')).toEqual(true);
-		expect(wrapper.hasClass('negative')).toEqual(true);
+		const { asFragment } = render(<Paragraph className="mt-3" negative>Paragraph</Paragraph>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 });
diff --git a/src/components/PictureCard/__snapshots__/pictureCard.test.jsx.snap b/src/components/PictureCard/__snapshots__/pictureCard.test.jsx.snap
index b703c80f..1f646972 100644
--- a/src/components/PictureCard/__snapshots__/pictureCard.test.jsx.snap
+++ b/src/components/PictureCard/__snapshots__/pictureCard.test.jsx.snap
@@ -1,35 +1,160 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ImageLink component Matches the snapshot 1`] = `
-<a
-  className="ssb-picture-card vertical "
-  onClick={[Function]}
->
-  <div
-    className="image-background"
+<DocumentFragment>
+  <a
+    class="ssb-picture-card vertical "
   >
-    <img
-      alt="img alt"
-      src=""
-    />
-  </div>
-  <div
-    className="overlay"
+    <div
+      class="image-background"
+    >
+      <img
+        alt="img alt"
+        src=""
+      />
+    </div>
+    <div
+      class="overlay"
+    >
+      <span
+        class="il-type"
+      >
+        Type
+      </span>
+      <span
+        class="il-title"
+      >
+        Tittel
+      </span>
+      <svg
+        class="arrow-icon"
+        fill="none"
+        height="32"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="5"
+          x2="19"
+          y1="12"
+          y2="12"
+        />
+        <polyline
+          points="12 5 19 12 12 19"
+        />
+      </svg>
+    </div>
+  </a>
+</DocumentFragment>
+`;
+
+exports[`ImageLink component Sets default orientation className 1`] = `
+<DocumentFragment>
+  <a
+    class="ssb-picture-card vertical "
+  >
+    <div
+      class="image-background"
+    >
+      <img
+        alt="alt img"
+        src=""
+      />
+    </div>
+    <div
+      class="overlay"
+    >
+      <span
+        class="il-type"
+      >
+        Type
+      </span>
+      <span
+        class="il-title"
+      >
+        Tittel
+      </span>
+      <svg
+        class="arrow-icon"
+        fill="none"
+        height="32"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="5"
+          x2="19"
+          y1="12"
+          y2="12"
+        />
+        <polyline
+          points="12 5 19 12 12 19"
+        />
+      </svg>
+    </div>
+  </a>
+</DocumentFragment>
+`;
+
+exports[`ImageLink component Switches className on orientation change 1`] = `
+<DocumentFragment>
+  <a
+    class="ssb-picture-card horizontal "
   >
-    <span
-      className="il-type"
+    <div
+      class="image-background"
     >
-      Type
-    </span>
-    <span
-      className="il-title"
+      <img
+        alt="alt img"
+        src=""
+      />
+    </div>
+    <div
+      class="overlay"
     >
-      Tittel
-    </span>
-    <ArrowRight
-      className="arrow-icon"
-      size={32}
-    />
-  </div>
-</a>
+      <span
+        class="il-type"
+      >
+        Type
+      </span>
+      <span
+        class="il-title"
+      >
+        Tittel
+      </span>
+      <svg
+        class="arrow-icon"
+        fill="none"
+        height="32"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="5"
+          x2="19"
+          y1="12"
+          y2="12"
+        />
+        <polyline
+          points="12 5 19 12 12 19"
+        />
+      </svg>
+    </div>
+  </a>
+</DocumentFragment>
 `;
diff --git a/src/components/PictureCard/pictureCard.test.jsx b/src/components/PictureCard/pictureCard.test.jsx
index bc812dae..24b525b9 100644
--- a/src/components/PictureCard/pictureCard.test.jsx
+++ b/src/components/PictureCard/pictureCard.test.jsx
@@ -1,21 +1,21 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '../../utils/test'
 import PictureCard from './index';
 import cardImage from './cards_bilde.jpg';
 
 describe('ImageLink component', () => {
 	test('Matches the snapshot', () => {
-		const wrapper = shallow(
+		const { asFragment } = render(
 			<PictureCard imageSrc={cardImage} onClick={() => {}} type="Type" altText="img alt" title="Tittel" />
 		);
-		expect(wrapper).toMatchSnapshot();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Sets default orientation className', () => {
-		const wrapper = shallow(<PictureCard imageSrc={cardImage} altText="alt img" onClick={() => {}} type="Type" title="Tittel" />);
-		expect(wrapper.hasClass('vertical')).toEqual(true);
+		const { asFragment } = render(<PictureCard imageSrc={cardImage} altText="alt img" onClick={() => {}} type="Type" title="Tittel" />);
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Switches className on orientation change', () => {
-		const wrapper = shallow(<PictureCard orientation="horizontal" imageSrc={cardImage} altText="alt img" onClick={() => {}} type="Type" title="Tittel" />);
-		expect(wrapper.hasClass('horizontal')).toEqual(true);
+		const { asFragment } = render(<PictureCard orientation="horizontal" imageSrc={cardImage} altText="alt img" onClick={() => {}} type="Type" title="Tittel" />);
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
diff --git a/src/components/Quote/__snapshots__/quote.test.jsx.snap b/src/components/Quote/__snapshots__/quote.test.jsx.snap
index 204f1a36..c816bfff 100644
--- a/src/components/Quote/__snapshots__/quote.test.jsx.snap
+++ b/src/components/Quote/__snapshots__/quote.test.jsx.snap
@@ -9,3 +9,13 @@ exports[`Quote component Matches the snapshot 1`] = `
   </span>
 </DocumentFragment>
 `;
+
+exports[`Quote component Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <span
+    class="ssb-quote negative"
+  >
+    «Quote»
+  </span>
+</DocumentFragment>
+`;
diff --git a/src/components/Quote/quote.test.jsx b/src/components/Quote/quote.test.jsx
index 0f9cefb3..8b32ab5c 100644
--- a/src/components/Quote/quote.test.jsx
+++ b/src/components/Quote/quote.test.jsx
@@ -1,16 +1,14 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import Quote from './index';
 
 describe('Quote component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Quote>«Quote»</Quote>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles classNames correctly', () => {
-		const wrapper = shallow(<Quote negative>«Quote»</Quote>);
-		expect(wrapper.hasClass('negative')).toEqual(true);
+		const { asFragment } = render(<Quote negative>«Quote»</Quote>);
+		expect(asFragment()).toMatchSnapshot();
 	});
-
 });
diff --git a/src/components/RadioButton/radio-button.test.jsx b/src/components/RadioButton/radio-button.test.jsx
index 8eb0ea9e..e61a8273 100644
--- a/src/components/RadioButton/radio-button.test.jsx
+++ b/src/components/RadioButton/radio-button.test.jsx
@@ -1,17 +1,22 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { screen, render } from '../../utils/test'
 import RadioButton from './index';
 
 describe('RadioButton component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<RadioButton value="item">Item</RadioButton>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
-	test('Callback is triggered', () => {
+	test('Callback is triggered', async () => {
 		const callback = jest.fn();
-		const wrapper = shallow(<RadioButton callback={callback} value="item">Item</RadioButton>);
-		wrapper.find('input').simulate('change', { target: { checked: true}});
+		const user = userEvent.setup();
+
+		render(<RadioButton callback={callback} value="item">Item</RadioButton>);
+		const input = screen.getByRole('radio');
+		await user.click(input)
+
 		expect(callback).toBeCalled();
 	})
 });
diff --git a/src/components/RadioGroup/__snapshots__/radio-group.test.jsx.snap b/src/components/RadioGroup/__snapshots__/radio-group.test.jsx.snap
index 0278146a..7bcd68e2 100644
--- a/src/components/RadioGroup/__snapshots__/radio-group.test.jsx.snap
+++ b/src/components/RadioGroup/__snapshots__/radio-group.test.jsx.snap
@@ -69,3 +69,73 @@ exports[`RadioGroup component Matches the snapshot 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`RadioGroup component Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-radio-group"
+  >
+    <div
+      class="radio-group-header"
+    >
+      Header
+    </div>
+    <div
+      class="boxes flex-row"
+    >
+      <div
+        class="ssb-radio"
+      >
+        <input
+          id="item1"
+          name="Header"
+          tabindex="0"
+          type="radio"
+          value="item1"
+        />
+        <label
+          class="radio-label"
+          for="item1"
+        >
+          Item 1
+        </label>
+      </div>
+      <div
+        class="ssb-radio"
+      >
+        <input
+          id="item2"
+          name="Header"
+          tabindex="0"
+          type="radio"
+          value="item2"
+        />
+        <label
+          class="radio-label"
+          for="item2"
+        >
+          Item 2
+        </label>
+      </div>
+      <div
+        class="ssb-radio"
+      >
+        <input
+          disabled=""
+          id="item3"
+          name="Header"
+          tabindex="0"
+          type="radio"
+          value="item3"
+        />
+        <label
+          class="radio-label"
+          for="item3"
+        >
+          Item 3
+        </label>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/components/RadioGroup/radio-group.test.jsx b/src/components/RadioGroup/radio-group.test.jsx
index b2376e5b..55dc4585 100644
--- a/src/components/RadioGroup/radio-group.test.jsx
+++ b/src/components/RadioGroup/radio-group.test.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import RadioGroup from './index';
 
 const radioItems = [
@@ -20,10 +19,10 @@ const radioItems = [
 describe('RadioGroup component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<RadioGroup header="Header" items={radioItems} />);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles classNames correctly', () => {
-		const wrapper = shallow(<RadioGroup header="Header" items={radioItems} orientation="row" />);
-		expect(wrapper.find('.boxes').hasClass('flex-row')).toEqual(true);
+		const { asFragment } = render(<RadioGroup header="Header" items={radioItems} orientation="row" />);
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
diff --git a/src/components/References/references.test.jsx b/src/components/References/references.test.jsx
index 8024c546..422f975e 100644
--- a/src/components/References/references.test.jsx
+++ b/src/components/References/references.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import References from './index';
 
 const referenceList = [
@@ -19,6 +19,6 @@ const referenceList = [
 describe('References component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<References title="Source" referenceList={referenceList} />);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
diff --git a/src/components/StickyMenu/stickymenu.test.jsx b/src/components/StickyMenu/stickymenu.test.jsx
index 47c9cf10..03e0ce9e 100644
--- a/src/components/StickyMenu/stickymenu.test.jsx
+++ b/src/components/StickyMenu/stickymenu.test.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import StickyMenu from './index';
 
 describe('StickyMenu component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<StickyMenu>StickyMenu</StickyMenu>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
diff --git a/src/components/TableLink/__snapshots__/tableLink.test.jsx.snap b/src/components/TableLink/__snapshots__/tableLink.test.jsx.snap
index 68959c96..46f9355e 100644
--- a/src/components/TableLink/__snapshots__/tableLink.test.jsx.snap
+++ b/src/components/TableLink/__snapshots__/tableLink.test.jsx.snap
@@ -1,32 +1,103 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TableLink component Matches the snapshot 1`] = `
-<a
-  className="ssb-table-link"
-  href=""
-  rel="noopener noreferrer"
-  target="_blank"
->
-  <div
-    className="tl-icon"
+<DocumentFragment>
+  <a
+    class="ssb-table-link"
+    href=""
+    rel="noopener noreferrer"
+    target="_blank"
   >
-    <ArrowRight
-      size={22}
-    />
-  </div>
-  <div
-    className="tl-info"
+    <div
+      class="tl-icon"
+    >
+      <svg
+        fill="none"
+        height="22"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="22"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="5"
+          x2="19"
+          y1="12"
+          y2="12"
+        />
+        <polyline
+          points="12 5 19 12 12 19"
+        />
+      </svg>
+    </div>
+    <div
+      class="tl-info"
+    >
+      <span
+        class="tl-text"
+      >
+        Tabell 1
+      </span>
+      <span
+        class="tl-description"
+      >
+        TableLink
+      </span>
+    </div>
+  </a>
+</DocumentFragment>
+`;
+
+exports[`TableLink component Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <a
+    class="ssb-table-link mb-2"
+    href=""
+    rel="noopener noreferrer"
+    target="_blank"
   >
-    <span
-      className="tl-text"
+    <div
+      class="tl-icon"
     >
-      Tabell 1
-    </span>
-    <span
-      className="tl-description"
+      <svg
+        fill="none"
+        height="22"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="22"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="5"
+          x2="19"
+          y1="12"
+          y2="12"
+        />
+        <polyline
+          points="12 5 19 12 12 19"
+        />
+      </svg>
+    </div>
+    <div
+      class="tl-info"
     >
-      TableLink
-    </span>
-  </div>
-</a>
+      <span
+        class="tl-text"
+      >
+        Tabell 1
+      </span>
+      <span
+        class="tl-description"
+      >
+        TableLink
+      </span>
+    </div>
+  </a>
+</DocumentFragment>
 `;
diff --git a/src/components/TableLink/tableLink.test.jsx b/src/components/TableLink/tableLink.test.jsx
index 5bc0f0e3..6cd84193 100644
--- a/src/components/TableLink/tableLink.test.jsx
+++ b/src/components/TableLink/tableLink.test.jsx
@@ -1,19 +1,21 @@
 import React from 'react';
-import {shallow} from 'enzyme';
+
+import { screen, render } from '../../utils/test'
 import TableLink from './index';
 
 describe('TableLink component', () => {
     test('Matches the snapshot', () => {
-        const wrapper = shallow(<TableLink text="Tabell 1" href="" description="TableLink" />);
-        expect(wrapper).toMatchSnapshot();
+        const { asFragment } = render(<TableLink text="Tabell 1" href="" description="TableLink" />);
+        expect(asFragment()).toMatchSnapshot();
     });
     test('Toggles classNames correctly', () => {
-        const wrapper = shallow(<TableLink className="mb-2" text="Tabell 1" href="" description="TableLink" />);
-        expect(wrapper.hasClass('mb-2')).toEqual(true);
+        const { asFragment } = render(<TableLink className="mb-2" text="Tabell 1" href="" description="TableLink" />);
+        expect(asFragment()).toMatchSnapshot();
     });
     test('Render link Text', () => {
-        const wrapper = shallow(<TableLink text="Tabell 1" href="" description="TableLink text" />);
-        expect(wrapper.find('.tl-description').render().text()).toBe('TableLink text');
-    });
+        render(<TableLink text="Tabell 1" href="" description="TableLink text" />);
 
+        expect(screen.getByText('Tabell 1')).toBeInTheDocument();
+        expect(screen.getByText('TableLink text')).toBeInTheDocument();
+    });
 });
diff --git a/src/components/Tabs/tabs.test.jsx b/src/components/Tabs/tabs.test.jsx
index 88e57668..6b348cee 100644
--- a/src/components/Tabs/tabs.test.jsx
+++ b/src/components/Tabs/tabs.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { screen, render } from '../../utils/test'
 import Tabs from './index';
 
 const items = [
@@ -21,16 +22,22 @@ const items = [
 describe('Tabs component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Tabs items={items}/>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
-	test('Sends callback', () => {
+	test('Sends callback', async () => {
 		const onClick = jest.fn();
-		const wrapper = shallow(<Tabs onClick={onClick} items={items}/>);
-		wrapper.find('.navigation-item').first().simulate('click');
+		const user = userEvent.setup();
+
+		render(<Tabs onClick={onClick} items={items}/>);
+		const tabButton = screen.getByText(items[0].title);
+		await user.click(tabButton);
+
 		expect(onClick).toBeCalled();
 	});
 	test('Sets correct init state', () => {
-		const wrapper = shallow(<Tabs items={items} activeOnInit={items[2].path}/>);
-		expect(wrapper.find('.navigation-item').last().hasClass('active')).toEqual(true);
+		render(<Tabs items={items} activeOnInit={items[2].path}/>);
+
+		const buttonSpan = screen.getByText(items[2].title);
+		expect(buttonSpan.parentElement.getAttribute('aria-selected')).toEqual('true');
 	});
 });
diff --git a/src/components/Tag/__snapshots__/tag.test.jsx.snap b/src/components/Tag/__snapshots__/tag.test.jsx.snap
index 1ccbd57a..4c336396 100644
--- a/src/components/Tag/__snapshots__/tag.test.jsx.snap
+++ b/src/components/Tag/__snapshots__/tag.test.jsx.snap
@@ -9,3 +9,28 @@ exports[`Tag component Matches the snapshot 1`] = `
   </button>
 </DocumentFragment>
 `;
+
+exports[`Tag component Renders icon 1`] = `
+<DocumentFragment>
+  <button
+    class="ssb-tag"
+  >
+    <div
+      class="st-icon"
+    >
+      <i />
+    </div>
+    Tag
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Tag component Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <button
+    class="ssb-tag mr-4"
+  >
+    Tag
+  </button>
+</DocumentFragment>
+`;
diff --git a/src/components/Tag/tag.test.jsx b/src/components/Tag/tag.test.jsx
index 4bca9995..68bcb6f1 100644
--- a/src/components/Tag/tag.test.jsx
+++ b/src/components/Tag/tag.test.jsx
@@ -1,27 +1,31 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { screen, render } from '../../utils/test'
 import Tag from './index';
 
 describe('Tag component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Tag>Tag</Tag>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles classNames correctly', () => {
-		const wrapper = shallow(<Tag className="mr-4">Tag</Tag>);
-		expect(wrapper.find('.ssb-tag').hasClass('mr-4')).toEqual(true);
+		const { asFragment } = render(<Tag className="mr-4">Tag</Tag>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Renders icon', () => {
-		const wrapper = shallow(<Tag icon={<i />}>Tag</Tag>);
-		expect(wrapper.find('.ssb-tag').containsMatchingElement(<i />)).toEqual(true);
+		const { asFragment } = render(<Tag icon={<i />}>Tag</Tag>);
+		expect(asFragment()).toMatchSnapshot();
 	});
-	test('Sends callback', () => {
+	test('Sends callback', async () => {
 		const onClick = jest.fn();
-		const wrapper = shallow(<Tag onClick={onClick}>Tests</Tag>);
-		wrapper.find('button').simulate('click');
+		const user = userEvent.setup();
+
+		render(<Tag onClick={onClick}>Tests</Tag>);
+		const button = screen.getByText('Tests');
+		await user.click(button);
 		expect(onClick).toBeCalled();
-		wrapper.find('button').simulate('click');
+		await user.click(button);
 		expect(onClick).toBeCalledTimes(2);
 	});
 });
diff --git a/src/components/Text/__snapshots__/text.test.jsx.snap b/src/components/Text/__snapshots__/text.test.jsx.snap
index 34731f4f..e9bb914b 100644
--- a/src/components/Text/__snapshots__/text.test.jsx.snap
+++ b/src/components/Text/__snapshots__/text.test.jsx.snap
@@ -9,3 +9,13 @@ exports[`Text component Matches the snapshot 1`] = `
   </span>
 </DocumentFragment>
 `;
+
+exports[`Text component Toggles className correctly 1`] = `
+<DocumentFragment>
+  <span
+    class="ssb-text-wrapper small-text negative"
+  >
+    Text
+  </span>
+</DocumentFragment>
+`;
diff --git a/src/components/Text/text.test.jsx b/src/components/Text/text.test.jsx
index bc32bde5..1b430585 100644
--- a/src/components/Text/text.test.jsx
+++ b/src/components/Text/text.test.jsx
@@ -1,16 +1,14 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+import { render } from '../../utils/test'
 import Text from './index';
 
 describe('Text component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Text>Text</Text>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 	test('Toggles className correctly', () => {
-		const wrapper = shallow(<Text small negative>Text</Text>);
-		expect(wrapper.find('.ssb-text-wrapper').hasClass('small-text')).toEqual(true);
-		expect(wrapper.find('.ssb-text-wrapper').hasClass('negative')).toEqual(true);
+		const { asFragment } = render(<Text small negative>Text</Text>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 });
diff --git a/src/components/TextArea/__snapshots__/textArea.test.jsx.snap b/src/components/TextArea/__snapshots__/textArea.test.jsx.snap
index e5b41516..d5643a56 100644
--- a/src/components/TextArea/__snapshots__/textArea.test.jsx.snap
+++ b/src/components/TextArea/__snapshots__/textArea.test.jsx.snap
@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Input component Adds optional classes to wrapper 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-text-area negative error"
+  >
+    <div
+      class="text-area-wrapper"
+    >
+      <textarea
+        id="1"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Input component Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
diff --git a/src/components/TextArea/textArea.test.jsx b/src/components/TextArea/textArea.test.jsx
index 318a5001..28570857 100644
--- a/src/components/TextArea/textArea.test.jsx
+++ b/src/components/TextArea/textArea.test.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
-import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { screen, render } from '../../utils/test'
 import TextArea from './index';
-import InputError from '../InputError';
 
 jest.mock("../../utils/useId", () => {
 	return { useId: () => 1};
@@ -11,40 +11,41 @@ jest.mock("../../utils/useId", () => {
 describe('Input component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<TextArea rows={5} cols={10}>Input</TextArea>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 	test('Renders label if added', () => {
-		const wrapper = shallow(<TextArea label="Label" />);
-		expect(wrapper.find('label').exists()).toEqual(true);
+		render(<TextArea label="Label 123" />);
+		expect(screen.getByText('Label 123')).toBeVisible();
 	});
 
 	test('Adds optional classes to wrapper', () => {
-		const wrapper = shallow(<TextArea negative error />);
-		expect(wrapper.find('.ssb-text-area').hasClass('negative')).toEqual(true);
-		expect(wrapper.find('.ssb-text-area').hasClass('error')).toEqual(true);
+		const { asFragment } = render(<TextArea negative error />);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
-	test('handleInputChange', () => {
+	test('handleInputChange', async () => {
 		const handleChange = jest.fn();
-		const wrapper = shallow(<TextArea handleChange={handleChange} />);
-		wrapper.find('textarea').simulate('change', {
-			target: { value: 'hello' }
-		});
+		const user = userEvent.setup();
+
+		render(<TextArea handleChange={handleChange} />);
+		const input = screen.getByRole('textbox');
+		await user.click(input);
+		await user.keyboard('hello');
+
 		expect(handleChange).toBeCalledWith('hello');
 	});
 
 	test('respects rows and cols', () => {
-		const wrapper = mount(<TextArea rows={5} cols={25} />);
-		const textArea = wrapper.find('textarea');
+		render(<TextArea rows={5} cols={25} />);
+		const textArea = screen.getByRole('textbox');
 
-		expect(textArea.props().rows).toEqual(5);
-		expect(textArea.props().cols).toEqual(25);
+		expect(textArea.getAttribute('rows')).toEqual("5");
+		expect(textArea.getAttribute('cols')).toEqual("25");
 	});
 
 	test('Renders an error message on error', () => {
-		const wrapper = shallow(<TextArea error errorMessage="An error" />);
-		expect(wrapper.find(InputError)).toHaveLength(1);
+		render(<TextArea error errorMessage="An error" />);
+		expect(screen.getByText('An error')).toBeVisible();
 	})
-
 });
diff --git a/src/components/Title/__snapshots__/title.test.jsx.snap b/src/components/Title/__snapshots__/title.test.jsx.snap
index 46dbaa7b..a4ec4441 100644
--- a/src/components/Title/__snapshots__/title.test.jsx.snap
+++ b/src/components/Title/__snapshots__/title.test.jsx.snap
@@ -9,3 +9,93 @@ exports[`Text component Matches the snapshot 1`] = `
   </h1>
 </DocumentFragment>
 `;
+
+exports[`Text component Renders correct default size 1`] = `
+<DocumentFragment>
+  <h1
+    class="ssb-title"
+  >
+    Title
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`Text component Renders correct size 1`] = `
+<DocumentFragment>
+  <h1
+    class="ssb-title"
+  >
+    Title
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`Text component Renders correct size 2`] = `
+<DocumentFragment>
+  <h2
+    class="ssb-title"
+  >
+    Title
+  </h2>
+</DocumentFragment>
+`;
+
+exports[`Text component Renders correct size 3`] = `
+<DocumentFragment>
+  <h3
+    class="ssb-title"
+  >
+    Title
+  </h3>
+</DocumentFragment>
+`;
+
+exports[`Text component Renders correct size 4`] = `
+<DocumentFragment>
+  <h4
+    class="ssb-title"
+  >
+    Title
+  </h4>
+</DocumentFragment>
+`;
+
+exports[`Text component Renders correct size 5`] = `
+<DocumentFragment>
+  <h5
+    class="ssb-title"
+  >
+    Title
+  </h5>
+</DocumentFragment>
+`;
+
+exports[`Text component Renders correct size 6`] = `
+<DocumentFragment>
+  <h6
+    class="ssb-title"
+  >
+    Title
+  </h6>
+</DocumentFragment>
+`;
+
+exports[`Text component Sets custom class 1`] = `
+<DocumentFragment>
+  <h1
+    class="ssb-title some-class"
+  >
+    Title
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`Text component Sets negative class 1`] = `
+<DocumentFragment>
+  <h1
+    class="ssb-title negative"
+  >
+    Title
+  </h1>
+</DocumentFragment>
+`;
diff --git a/src/components/Title/title.test.jsx b/src/components/Title/title.test.jsx
index a2126234..5052e06f 100644
--- a/src/components/Title/title.test.jsx
+++ b/src/components/Title/title.test.jsx
@@ -1,62 +1,61 @@
 import React from 'react';
-import {shallow} from 'enzyme';
-import {render} from '@testing-library/react'
+
+import { screen, render } from '../../utils/test'
 import Title from './index';
 
 describe('Text component', () => {
 	test('Matches the snapshot', () => {
 		const { asFragment } = render(<Title>Title</Title>);
-		expect(asFragment()).toMatchSnapshot ();
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 	test('Renders children', () => {
-		const wrapper = shallow(<Title>Hey</Title>);
-		expect(wrapper.text()).toEqual('Hey');
+		render(<Title>Hey 123</Title>);
+		expect(screen.getByText('Hey 123')).toBeVisible();
 	});
 
 	test('Sets negative class', () => {
-		const wrapper = shallow(<Title negative>Title</Title>);
-		expect(wrapper.find('.ssb-title').hasClass('negative')).toEqual(true);
+		const { asFragment } = render(<Title negative>Title</Title>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 	test('Sets custom class', () => {
-		const wrapper = shallow(<Title className="some-class">Title</Title>);
-		expect(wrapper.find('.ssb-title').hasClass('some-class')).toEqual(true);
+		const { asFragment } = render(<Title className="some-class">Title</Title>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 	test('Renders correct default size', () => {
-		const wrapper = shallow(<Title>Title</Title>);
-		expect(wrapper.find('h1').exists()).toEqual(true);
+		const { asFragment } = render(<Title>Title</Title>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 	test('Renders correct size', () => {
-		const wrapper = shallow(<Title size={1}>Title</Title>);
-		expect(wrapper.find('h1').exists()).toEqual(true);
+		const { asFragment } = render(<Title size={1}>Title</Title>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 	test('Renders correct size', () => {
-		const wrapper = shallow(<Title size={2}>Title</Title>);
-		expect(wrapper.find('h2').exists()).toEqual(true);
+		const { asFragment } = render(<Title size={2}>Title</Title>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 	test('Renders correct size', () => {
-		const wrapper = shallow(<Title size={3}>Title</Title>);
-		expect(wrapper.find('h3').exists()).toEqual(true);
+		const { asFragment } = render(<Title size={3}>Title</Title>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 	test('Renders correct size', () => {
-		const wrapper = shallow(<Title size={4}>Title</Title>);
-		expect(wrapper.find('h4').exists()).toEqual(true);
+		const { asFragment } = render(<Title size={4}>Title</Title>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 	test('Renders correct size', () => {
-		const wrapper = shallow(<Title size={5}>Title</Title>);
-		expect(wrapper.find('h5').exists()).toEqual(true);
+		const { asFragment } = render(<Title size={5}>Title</Title>);
+		expect(asFragment()).toMatchSnapshot();
 	});
 
 	test('Renders correct size', () => {
-		const wrapper = shallow(<Title size={6}>Title</Title>);
-		expect(wrapper.find('h6').exists()).toEqual(true);
+		const { asFragment } = render(<Title size={6}>Title</Title>);
+		expect(asFragment()).toMatchSnapshot();
 	});
-
 });
diff --git a/src/setupTests.js b/src/setupTests.js
index e191216a..4c8099fa 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -1,8 +1,6 @@
+import '@testing-library/jest-dom';
 import util from 'util';
-import { configure } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
 
 Object.defineProperty(global, 'TextEncoder', {
 	value: util.TextEncoder,
 });
-configure({ adapter: new Adapter() });
diff --git a/src/utils/test.js b/src/utils/test.js
new file mode 100644
index 00000000..4eccae42
--- /dev/null
+++ b/src/utils/test.js
@@ -0,0 +1,18 @@
+import fs from 'fs';
+import path from 'path';
+import { render as rtlRender } from '@testing-library/react';
+
+export * from '@testing-library/react';
+export * from '@testing-library/jest-dom';
+
+const styles = fs.readFileSync(path.relative(process.cwd(), './lib/bundle.css'), 'utf8');
+
+export function render(ui, options) {
+	const view = rtlRender(ui, options);
+
+	const styleElement = document.createElement('style');
+	styleElement.innerHTML = styles;
+	document.body.appendChild(styleElement);
+
+	return view;
+}