Skip to content

Commit 76c50b5

Browse files
nikosantisnikosantis
committed
feat: setup tests with RTL
1 parent a88e8a3 commit 76c50b5

13 files changed

+3043
-111
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["next/babel"]
3+
}

‎.eslintrc

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
11
{
2-
"extends": ["next", "next/core-web-vitals", "prettier", "plugin:prettier/recommended"]
2+
"env": {
3+
"jest": true
4+
},
5+
"extends": [
6+
"next",
7+
"next/core-web-vitals",
8+
"prettier",
9+
"plugin:prettier/recommended",
10+
"plugin:jest-dom/recommended",
11+
"plugin:testing-library/react"
12+
]
313
}

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib"
3+
}

‎__tests__/pages/home.spec.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { screen, render } from '@testing-library/react'
2+
3+
import IndexPage from '../../pages/index'
4+
5+
describe('IndexPage', () => {
6+
test('render home', async () => {
7+
render(<IndexPage />)
8+
9+
expect(
10+
screen.getByRole('heading', { name: 'Welcome to Next.js!' })
11+
).toBeInTheDocument()
12+
})
13+
})

‎jest-setup.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@testing-library/jest-dom'

‎jest.config.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module.exports = {
2+
preset: 'ts-jest',
3+
testEnvironment: 'jsdom',
4+
setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
5+
moduleNameMapper: {
6+
'\\.(scss|sass|css)$': 'identity-obj-proxy'
7+
},
8+
transform: {
9+
'^.+\\.tsx?$': ['babel-jest', { configFile: './.babelrc' }]
10+
},
11+
moduleDirectories: ['node_modules', '<rootDir>'],
12+
modulePaths: ['<rootDir>'],
13+
globals: {
14+
'ts-jest': {
15+
tsconfig: 'tsconfig.test.json',
16+
babelConfig: '.babelrc'
17+
}
18+
}
19+
}

‎next-env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
/// <reference types="next" />
22
/// <reference types="next/types/global" />
3+
/// <reference types="next/image-types/global" />

‎package.json

+15-1
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,34 @@
99
"lint": "next lint",
1010
"lint:fix": "next lint --fix",
1111
"format": "prettier --check .",
12-
"format:fix": "prettier --write ."
12+
"format:fix": "prettier --write .",
13+
"test": "jest",
14+
"test:watch": "jest --watch",
15+
"test:coverage": "jest --coverage"
1316
},
1417
"dependencies": {
1518
"next": "11.0.1",
1619
"react": "17.0.2",
1720
"react-dom": "17.0.2"
1821
},
1922
"devDependencies": {
23+
"@babel/core": "^7.14.6",
24+
"@babel/preset-env": "^7.14.7",
25+
"@testing-library/jest-dom": "^5.14.1",
26+
"@testing-library/react": "^12.0.0",
27+
"@types/jest": "^26.0.24",
2028
"@types/react": "17.0.14",
29+
"babel-jest": "^27.0.6",
2130
"eslint": "7.30.0",
2231
"eslint-config-next": "11.0.1",
2332
"eslint-config-prettier": "^8.3.0",
33+
"eslint-plugin-jest-dom": "^3.9.0",
2434
"eslint-plugin-prettier": "^3.4.0",
35+
"eslint-plugin-testing-library": "^4.9.0",
36+
"identity-obj-proxy": "^3.0.0",
37+
"jest": "^27.0.6",
2538
"prettier": "^2.3.2",
39+
"ts-jest": "^27.0.3",
2640
"typescript": "4.3.5"
2741
}
2842
}

‎pages/api/hello.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ type Data = {
55
name: string
66
}
77

8-
export default function handler(
9-
req: NextApiRequest,
10-
res: NextApiResponse<Data>
11-
) {
8+
export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
129
res.status(200).json({ name: 'John Doe' })
1310
}

‎pages/index.tsx

+15-21
Original file line numberDiff line numberDiff line change
@@ -7,60 +7,54 @@ export default function Home() {
77
<div className={styles.container}>
88
<Head>
99
<title>Create Next App</title>
10-
<meta name="description" content="Generated by create next app" />
11-
<link rel="icon" href="/favicon.ico" />
10+
<meta name='description' content='Generated by create next app' />
11+
<link rel='icon' href='/favicon.ico' />
1212
</Head>
1313

1414
<main className={styles.main}>
1515
<h1 className={styles.title}>
16-
Welcome to <a href="https://nextjs.org">Next.js!</a>
16+
Welcome to <a href='https://nextjs.org'>Next.js!</a>
1717
</h1>
1818

1919
<p className={styles.description}>
20-
Get started by editing{' '}
21-
<code className={styles.code}>pages/index.js</code>
20+
Get started by editing <code className={styles.code}>pages/index.js</code>
2221
</p>
2322

2423
<div className={styles.grid}>
25-
<a href="https://nextjs.org/docs" className={styles.card}>
24+
<a href='https://nextjs.org/docs' className={styles.card}>
2625
<h2>Documentation &rarr;</h2>
2726
<p>Find in-depth information about Next.js features and API.</p>
2827
</a>
2928

30-
<a href="https://nextjs.org/learn" className={styles.card}>
29+
<a href='https://nextjs.org/learn' className={styles.card}>
3130
<h2>Learn &rarr;</h2>
3231
<p>Learn about Next.js in an interactive course with quizzes!</p>
3332
</a>
3433

3534
<a
36-
href="https://github.com/vercel/next.js/tree/master/examples"
37-
className={styles.card}
38-
>
35+
href='https://github.com/vercel/next.js/tree/master/examples'
36+
className={styles.card}>
3937
<h2>Examples &rarr;</h2>
4038
<p>Discover and deploy boilerplate example Next.js projects.</p>
4139
</a>
4240

4341
<a
44-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
45-
className={styles.card}
46-
>
42+
href='https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
43+
className={styles.card}>
4744
<h2>Deploy &rarr;</h2>
48-
<p>
49-
Instantly deploy your Next.js site to a public URL with Vercel.
50-
</p>
45+
<p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
5146
</a>
5247
</div>
5348
</main>
5449

5550
<footer className={styles.footer}>
5651
<a
57-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
52+
href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
53+
target='_blank'
54+
rel='noopener noreferrer'>
6155
Powered by{' '}
6256
<span className={styles.logo}>
63-
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
57+
<Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
6458
</span>
6559
</a>
6660
</footer>

‎tsconfig.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@
1212
"moduleResolution": "node",
1313
"resolveJsonModule": true,
1414
"isolatedModules": true,
15-
"jsx": "preserve"
15+
"jsx": "preserve",
16+
"baseUrl": "."
1617
},
1718
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
18-
"exclude": ["node_modules"]
19+
"exclude": ["node_modules", "__tests__", "coverage"]
1920
}

‎tsconfig.test.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": true,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"esModuleInterop": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"jsx": "preserve",
16+
"baseUrl": "."
17+
},
18+
"include": ["next-env.d.ts", "jest-setup.ts", "__tests__/**/*.{tsx,ts}"],
19+
"exclude": ["node_modules", "coverage"]
20+
}

0 commit comments

Comments
 (0)