add jest & rtl

components/Button/tests/Button.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react'
+
+import Button from '../'
+
+describe('Button', () => {
+  it('renders successfully', () => {
+    const buttonText = 'Press me'
+    render(<Button text={buttonText} />)
+
+    expect(screen.getByText(buttonText)).toBeInTheDocument()
+  })
+})

jest.config.js

@@ -0,0 +1,25 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // 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',
+  moduleNameMapper: {
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+    '^@/store/(.*)$': '<rootDir>/store/$1',
+    '^@/hooks/(.*)$': '<rootDir>/hooks/$1',
+    '^@/utils/(.*)$': '<rootDir>/utils/$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'