React Testing Library を導入した (#432)

* feat: 🎸 jest @testing-library/react @testing-library/jest-dom

* feat: 🎸 $ yarn add --dev jest-environment-jsdom

* test: 💍 Specを追加した

__tests__/components/events-in-event/sosenkyo-book/Contacts.spec.tsx

@@ -0,0 +1,12 @@
+import { expect } from '@jest/globals'
+
+import Contacts from '@/components/events-in-event/sosenkyo-book/Contacts'
+import { render } from '@testing-library/react'
+
+describe('pages/index の Home コンポーネント', () => {
+  it('期待どおりであること', () => {
+    const { getByText } = render(<Contacts />)
+
+    expect(getByText('[email protected]')).toBeTruthy()
+  })
+})

__tests__/pages/index.spec.tsx

@@ -0,0 +1,10 @@
+import { expect } from '@jest/globals'
+
+// import Home from '@/pages/index'
+// import { render } from '@testing-library/react'
+
+describe('pages/index の Home コンポーネント', () => {
+  it('期待どおりであること', () => {
+    expect(1 + 2).toBe(3)
+  })
+})

jest.config.js

@@ -0,0 +1,17 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  dir: './',
+})
+
+const customJestConfig = {
+  testMatch: ['<rootDir>/__tests__/**/*.spec.(j|t)s?(x)'],
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // moduleDirectories: ['node_modules', '<rootDir>/'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+  },
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+module.exports = createJestConfig(customJestConfig)

package.json

@@ -8,6 +8,8 @@
     "react-dom": "18.1.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
     "@types/node": "17.0.23",
     "@types/react": "18.0.12",
     "@types/react-burger-menu": "^2.8.3",
@@ -20,6 +22,8 @@
     "eslint-config-prettier": "^8.5.0",
     "gridjs": "^5.0.2",
     "gridjs-react": "^5.0.2",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
     "npm-run-all": "^4.1.5",
     "postcss": "8.4.14",
     "prettier": "^2.6.2",