Jest
ํ์ต ํค์๋
ํ ์คํธ ์ผ์ด์ค ์ ์ ํ๋ ๋ฐฉ๋ฒ
BDD
Jest
์ค์น ๋ฐ ์คํ ๋ฐฉ๋ฒ
๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
Describe - Context - It ํจํด
๐ค ํ
์คํธ ์ผ์ด์ค ์ ์ ํ๋ ๋ฐฉ๋ฒ
1. test ํจ์๋ก ๊ฐ๋ณ ํ
์คํธ๋ฅผ ๋์ดํ๋ ๋ฐฉ์
test('add', () => {
expect(add(1, 2)).toBe(3);
});
2. BDD ์คํ์ผ๋ก ์ฃผ์ฒด-ํ์ ์ค์ฌ์ผ๋ก ํ
์คํธ๋ฅผ ์กฐ์งํํ๋ ๋ฐฉ์
describe('add', () => { // ์ฃผ์ฒด : add ํจ์
it('returns sum of two numbers', () => { // ํ์ : add ํจ์๊ฐ ๋ ์ซ์๋ฅผ ๋ํ ๊ฐ์ ๋ฐํํ๋ค.
expect(add(1, 2)).toBe(3);
});
});
๐ค BDD ์คํ์ผ์ ๋ญ๊น?
BDD(Behavior-driven development)
์ํํธ์จ์ด ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก
๋น์ฆ๋์ค ์๊ตฌ์ฌํญ์ ์ง์คํ์ฌ ํ ์คํธ ์ผ์ด์ค๋ฅผ ๊ฐ๋ฐํ๋ค๋ ๊ฒ
Facebook์ด ๊ฐ๋ฐํ์ฌ ์คํ ์์ค๋ก ๊ณต๊ฐํ JavaScript ํ ์คํ ํ๋ ์์ํฌ
์ค์ ์ด ๊ฑฐ์ ํ์ ์๋ ํ ์คํธ ํ๋ ์์ํฌ
๐ ๏ธ Jest ์ค์น ๋ฐ ์คํ ๋ฐฉ๋ฒ
1. Jest ์ค์น
# 1.Jest ์ค์น
npm i -D jest @types/jest @swc/core @swc/jest \
jest-environment-jsdom \
@testing-library/react @testing-library/jest-dom@5.16.4
2. Jest์์ TypeScript ์ฌ์ฉํ๋๋ก jest.config.js
ํ์ผ ์์ฑ
jest.config.js
ํ์ผ ์์ฑmodule.exports = {
testEnvironment: 'jsdom',
setupFilesAfterEnv: [
'@testing-library/jest-dom/extend-expect',
],
transform: {
'^.+\\.(t|j)sx?$': ['@swc/jest', {
jsc: {
parser: {
syntax: 'typescript',
jsx: true,
decorators: true,
},
transform: {
react: {
runtime: 'automatic',
},
},
},
}],
},
};
3. Jest ์คํ
# jest ์คํ
npx jest
#jest ์๋ ์คํ
npx jest --watchAll
โ๏ธ Jest ๊ธฐ๋ณธ ์ฌ์ฉ ๋ฐฉ๋ฒ
import { sum } from './sum';
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
test
ํจ์๋ ์ฒซ๋ฒ์งธ ์ธ์๋ก ์ด ํ ์คํธ๊ฐ ์ด๋ค ๊ฒ์ ์ค๋ช ํ๋์ง ์ ๋ชฉ์ ์ ๋ ฅํ๋ค.๋๋ฒ์งธ ์ธ์๋ก๋ ์ฝ๋ฐฑํจ์๋ฅผ ๊ฐ์ง๋๋ฐ, ์ด ์์์ ํ ์คํธ๋ฅผ ํ ์ฝ๋๋ฅผ ์์ฑํ๋ค.
์ฝ๋ฐฑํจ์ ์์ ์๋
expect
๋ return๊ฐ์ ๊ฐ์ง๋ ์ด๋ค ํจ์๋ฅผ ์คํํ๋ค.expect๋ ๊ฐ์ฒด๋ฅผ
toBe
๋ฅผ ์ฌ์ฉํด์ ์ด๋ค ๊ฐ์ด ๋์ฌ์ง ์ธ์๋ก ๋ด๋๋ค.
test
๋์it
์ ์ฌ์ฉํ ์ ์๋ค. Also under the alias
๐ฏ Matchers๋ก ๋ค์ํ ๊ฒฐ๊ณผ ์์ธกํ๊ธฐ
.toBe
.toBe
toBe
์ ๊ฒฝ์ฐ Object.is๋ฅผ ๋ด๋ถ์ ์ผ๋ก ์ฌ์ฉํด์ ๋น๊ตํ๋ ๋ ๊ฐ์ฒด๋ฅผ ๋น๊ตํ์ ๋ ===์ด ์ฑ๋ฆฝํ๋์ง๋ก ์ดํดํ๋ฉด ๋ ๊ฒ ๊ฐ๋ค.
.toEqual
.toEqual
test('object assignment', () => {
const data = {one: 1};
data['two'] = 2;
expect(data).toEqual({one: 1, two: 2});
});
toEqual
์ ๋ฐฐ์ด ๋๋ ๊ฐ์ฒด์ ๊ฐ(์ฃผ์ ๋ง๊ณ !)์ด ๊ฐ์์ง ํ์ธํ๋ค.
์ด์ธ์๋ ๋ค์ํ Matchers๋ค์ด ์กด์ฌํ๋ค.
๐งฉ Describe-Context-It (Describe-It) ํจํด
describe
ํค์๋๋ฅผ ์ฌ์ฉํด์ ์์ ๋จ์์ ํ
์คํธ ์ฝ๋๋ฅผ ๊ทธ๋ฃนํํ ์ ์๋ค.
๐ค ๊ทธ๋ฃนํ ํ๋ค๋๊ฒ ๋ฌด์จ ์๋ฏธ ์ผ๊น?
ํน์ component์ ์ํ๋ ํ
์คํธ ์ฝ๋๋ผ๋ฉด describe
ํค์๋๋ฅผ ์ฌ์ฉํด์ ํด๋น ํ
์คํธ ์ฝ๋๋ค์ ๊ทธ๋ฃนํํ๋ ๊ฒ์ด ์ข๋ค. ์ด๋ ๊ฒ ๊ทธ๋ฃนํ๋ฅผ ํด์ฃผ๊ฒ ๋๋ฉด ๋์ค์ ํ
์คํธ ๊ฒฐ๊ณผ๋ฅผ ํ์ธ์ ๋ ๊ฐ์์ ์ผ๋ก ๋ณด๊ธฐ ํธํ๊ฒ ํ
์คํธ ์ผ์ด์ค๋ค์ ํ์ธ ํ ์ ์๋ค.
Jest๋ฅผ ์ด์ฉํ ๊ฐ๋จํ TDD ์์
๐ ํ์ผ๋ช
: ํ์ผ์ด๋ฆ.test.ํ์ฅ์
ํ์ผ์ด๋ฆ.test.ํ์ฅ์
sample.test.ts
sample.spec.ts (์ฃผ๋ก BDD ์คํ์ผ๋ก ์ฌ์ฉ ์)
๐ค test ํจ์๋ก ๊ฐ๋ณ ํ
์คํธ๋ฅผ ๋์ดํ๋ ๋ฐฉ์
์คํจ ์ผ์ด์ค๋ก ์ฐ์ add ํจ์ ์์ฑ
function add(x: number, y: number): number {
return 0;
}
test('add', () => {
expect(add(1, 2)).toBe(3);
});
ํ ์คํธ๊ฐ ํต๊ณผ ๋ ์ ์๋๋ก add ํจ์ ์์
function add(x: number, y: number): number {
return 3;
}
test('add', () => {
expect(add(1, 2)).toBe(3);
});
๋ฐ๋ณต์ ์ผ๋ก ์ฝ๋๋ฅผ ํ ์คํธ ํ๋ฉด์ ์ค๋ณต์ ๊ฑฐ
function add(x: number, y: number): number {
// return 0
// return 3
// return 1 + 2; // ์๋๋ฅผ ๋ํ๋์ผ๋ก์จ ์ค๋ณต ์ ๊ฑฐ
return x + y;
}
test('add', () => {
expect(add(1, 2)).toBe(3);
});
๐ค BDD ์คํ์ผ๋ก ์ฃผ์ฒด-ํ์ ์ค์ฌ์ผ๋ก ํ
์คํธ๋ฅผ ์กฐ์งํํ๋ ๋ฐฉ์
BDD ์คํ์ผ๋ก ํ ์คํธ ๋์๊ณผ ํ์๋ฅผ ๋ช ํํ ๋๋ฌ๋ด์.
function add(x: number, y: number): number {
return x + y;
}
test('add ํ
์คํธ', () => {
expect(add(1, 2)).toBe(3);
});
describe('add', () => { // ๋์
it('returns sum of two numbers', () => { // ํ์
expect(add(1, 2)).toBe(3);
});
});
// ์ด์ ๋ BDD๋ณด๋ค๋ ํจ์๋ก ๊ฐ๋ณ ํ
์คํธ ์งํ
๐ค ๋ค์ํ ๊ฒฝ์ฐ๊ฐ ๊ณ ๋ ค ๋์ด์ผ ํ๋ค๋ฉด? โ Describe-Context-It ํจํด
function add(...number: number[]): number {
// Return number[0] + (number[1] || 0);
// return (number[0] ?? 0) + (number[1] ?? 0) + (number[2] ?? 0); //์ฝ๋์ ๋ฐ๋ณต์ด ๋ณด์ฌ์ง
// return (number[number.length - 3] ?? 0) + (number[number.length - 2] ?? 0) + (number[number.length - 1] ?? 0);
if (number.length === 0) {
return 0;
}
// If (number.length === 1) {
// return number[0];
// }
// If (number.length === 2) {
// return number[0] + number[1];
// }
// If (number.length === 3) {
// return number[0] + number[1] + number[2];
// }
// if (number.length >= 2) {
// return add(number[0] + number[1]) + number[2];
// }
// if (number.length >= 2) {
// return add(...number.slice(0, number.length - 1)) + number[number.length - 1];
// }
// return add(...number.slice(0, number.length - 1)) + number[number.length - 1];
return number.reduce((acc, current) => acc + current);
}
const context = describe;
test('add ํ
์คํธ', () => {
expect(add(1, 2)).toBe(3);
});
describe('add', () => {
context('with no argument', () => {
it('returns zero', () => {
expect(add()).toBe(0);
});
});
context('with only one number', () => {
it('returns the same numbers', () => {
expect(add(2)).toBe(2);
});
});
context('with two numbers', () => {
it('returns sum of two numbers', () => {
expect(add(1, 2)).toBe(3);
});
});
// ํ
์คํธ ์ฝ๋๋ค์ด ์ถ๊ฐ ๋ ๋ ๋ง๋ค add ํจ์ ๋ก์ง ๋ณ๊ฒฝ
context('with three numbers', () => {
it('returns sum of three numbers', () => {
expect(add(1, 2, 3)).toBe(6);
});
});
context('with ten numbers', () => {
it('returns sum of ten numbers', () => {
expect(add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)).toBe(55);
});
});
});
๐ ์ฐธ๊ณ
Last updated