Update all versions and add moduleNameMapper

jest.config.js

@@ -4,5 +4,9 @@ module.exports = {
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.ts(x)?', '!src/**/stories.tsx'],
   setupFilesAfterEnv: ['<rootDir>/.jest/setup.ts'],
-  modulePaths: ['<rootDir>/src/', '<rootDir>/.jest']
+  modulePaths: ['<rootDir>/src/', '<rootDir>/.jest'],
+  moduleNameMapper: {
+    '^styled-components':
+      '<rootDir>/node_modules/styled-components/dist/styled-components.browser.cjs.js'
+  }
 }

package.json

@@ -28,43 +28,43 @@
   "dependencies": {
     "@styled-icons/material-outlined": "^10.18.0",
     "@styled-icons/remix-fill": "^10.18.0",
-    "next": "9.5.3",
-    "next-pwa": "^3.1.4",
+    "next": "9.5.5",
+    "next-pwa": "^3.1.5",
     "polished": "^3.6.6",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-slick": "^0.27.11",
-    "styled-components": "5.1.1",
+    "react": "17.0.0",
+    "react-dom": "17.0.0",
+    "react-slick": "^0.27.12",
+    "styled-components": "5.2.0",
     "styled-media-query": "^2.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/preset-typescript": "^7.10.4",
-    "@storybook/addon-essentials": "6.0.21",
-    "@storybook/react": "6.0.21",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-typescript": "^7.12.1",
+    "@storybook/addon-essentials": "6.0.26",
+    "@storybook/react": "6.0.26",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.4",
-    "@testing-library/user-event": "^12.1.8",
-    "@types/jest": "^26.0.13",
-    "@types/node": "^14.10.2",
-    "@types/react": "^16.9.49",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.9",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^14.14.1",
+    "@types/react": "^16.9.53",
     "@types/react-slick": "^0.23.4",
-    "@types/styled-components": "^5.1.3",
-    "@typescript-eslint/eslint-plugin": "^4.1.1",
-    "@typescript-eslint/parser": "^4.1.1",
+    "@types/styled-components": "^5.1.4",
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-styled-components": "^1.11.1",
-    "eslint": "^7.9.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint": "^7.11.0",
+    "eslint-config-prettier": "^6.14.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^4.3.0",
-    "jest": "^26.4.2",
+    "jest": "^26.6.0",
     "jest-styled-components": "^7.0.3",
-    "lint-staged": "^10.3.0",
+    "lint-staged": "^10.4.2",
     "plop": "^2.7.4",
     "prettier": "^2.1.2",
-    "typescript": "^4.0.2"
+    "typescript": "^4.0.3"
   }
 }

src/components/Banner/__snapshots__/test.tsx.snap

@@ -70,11 +70,11 @@ exports[`<Banner /> should render correctly 1`] = `
 }
 
 @media (max-width:1170px) {
-  .c0 .sc-AxjAm {
+  .c0 .sc-bdnylx {
     right: 0;
   }
 
-  .c0 .sc-AxjAm::before {
+  .c0 .sc-bdnylx::before {
     display: none;
   }
 }