Merge pull request #7 from nickovchinnikov/nick/aliasesAndThemesForJest

Aliases and themes for jest

.storybook/main.js

@@ -7,6 +7,7 @@ module.exports = {
     '../components/**/*.stories.mdx',
     '../components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
+  "staticDirs": ["../public"],
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

README.md

@@ -35,3 +35,7 @@
 ### Aliases, Fonts and Global styles
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/6)
+
+### Aliases and themes for Jest
+
+[pull request](https://github.com/nickovchinnikov/coursesbox/pull/7)

components/Button/Button.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
+import { render, screen } from "@/test-utils";
+
 import { Button } from "./Button";
 
 describe("Button test cases", () => {

components/Button/__snapshots__/Button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Button test cases Render check 1`] = `
 <DocumentFragment>
   <button
-    class="css-o0uw0a"
+    class="css-1s99dgh"
     color="primary"
   >
     Button

jest.config.js

@@ -9,6 +9,10 @@ const createJestConfig = nextJest({
 const customJestConfig = {
   // Add more setup options before each test is run
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  moduleNameMapper: {
+    // Handle module aliases (this will be automatically configured for you soon)
+    "^@/(.*)$": "<rootDir>/$1",
+  },
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
   moduleDirectories: ["node_modules", "<rootDir>/"],
   testEnvironment: "jest-environment-jsdom",

package.json

@@ -7,8 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "storybook": "start-storybook -p 6006 -s ./public",
-    "build-storybook": "build-storybook -s ./public",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
     "test": "jest"
   },
   "dependencies": {

test-utils.tsx

@@ -0,0 +1,18 @@
+import React, { FC, ReactElement } from "react";
+import { render, RenderOptions } from "@testing-library/react";
+import { ThemeProvider } from "@emotion/react";
+
+import { Themes } from "./styles/themes";
+
+const Wrapper: FC = ({ children }) => (
+  <ThemeProvider theme={Themes.light}>{children}</ThemeProvider>
+);
+
+const customRender = (ui: ReactElement, options?: RenderOptions) =>
+  render(ui, { wrapper: Wrapper, ...options });
+
+// re-export everything
+export * from "@testing-library/react";
+
+// override render method
+export { customRender as render };