Setup Jest and Storybook for component-drive development of NewBookForm

Author: Marcelixoo

.eslintrc.js

@@ -2,30 +2,23 @@ module.exports = {
   parser: 'babel-eslint',
   env: {
     browser: true,
-    es2021: true,
+    es2021: true
   },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-    'plugin:react/jsx-runtime',
-    'next',
-  ],
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:react/jsx-runtime', 'next', 'plugin:storybook/recommended'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
-      tsx: true,
+      tsx: true
     },
     ecmaVersion: 'latest',
-    sourceType: 'module',
+    sourceType: 'module'
   },
   plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
   rules: {
     'no-console': 'warn',
     'prettier/prettier': 'error',
     '@typescript-eslint/no-explicit-any': 'off',
-    'react-hooks/exhaustive-deps': 'warn',
-  },
-};
+    'react-hooks/exhaustive-deps': 'warn'
+  }
+};

.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

jest.config.js

@@ -0,0 +1,21 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  dir: './',
+})
+
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+  '^@/components/(.*)$': '<rootDir>/components/$1',
+  '^@/hooks/(.*)$': '<rootDir>/hooks/$1',
+  '^@/services/(.*)$': '<rootDir>/services/$1',
+  '^@/pages/(.*)$': '<rootDir>/pages/$1',
+  '^@/helpers/(.*)$': '<rootDir>/helpers/$1',
+}
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect'

next.config.js

@@ -2,7 +2,9 @@
 
 const clientUrl = process.env.NEXT_PUBLIC_CLIENT_URL;
 
-if (clientUrl === null || clientUrl === undefined) {
+const isNotTestEnvironemtn = process.env.NODE_ENV !== 'test';
+
+if ((clientUrl === null || clientUrl === undefined) && isNotTestEnvironemtn) {
   throw Error('Required variable NEXT_PUBLIC_CLIENT_URL was not defined');
 }