[⚙️ jest config] 테스트 도입 위한 jest 설정 #43
Conversation
| import { describe, expect, test } from "@jest/globals"; | ||
|
|
||
| const sum = (num1: number, num2: number) => num1 + num2; | ||
|
|
||
| describe("sum module", () => { | ||
| test("adds 1 + 2 to equal 3", () => { | ||
| expect(sum(1, 2)).toBe(3); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
web 폴더에 설정 잘 됐는 지 위한 임시 테스트 파일입니다.
apps/web/jest.config.mjs
Outdated
| @@ -0,0 +1,10 @@ | |||
| /** @type {import('ts-jest').JestConfigWithTsJest} **/ | |||
There was a problem hiding this comment.
apps/web/.eslintrc.mjs
Outdated
| overrides: [ | ||
| { | ||
| files: ["src/__tests__/**/*"], | ||
| env: { | ||
| jest: true, | ||
| }, | ||
| }, | ||
| ], |
There was a problem hiding this comment.
해당 경로의 파일의 jest 테스트 파일들 eslint 설정
| { | ||
| "preset": "ts-jest", | ||
| "testEnvironment": "jsdom", | ||
| "transform": { | ||
| "^.+\\.ts?$": "ts-jest", | ||
| "^.+\\.tsx?$": "ts-jest", | ||
| "^.+\\.scss$": "jest-scss-transform" | ||
| } | ||
| } |
There was a problem hiding this comment.
jest.config 는 최상단에 하나만 있으면되지않을까요 ?
There was a problem hiding this comment.
엇 그럼 혹시 dev dependency 설정같은 것도 최상단에 해줘야 할까요?
There was a problem hiding this comment.
넵 그러면 좋을 것 같아요 :) 어디서든 쓸 수 있도록
| import { cleanup, render } from "@testing-library/react"; | ||
| import Text from "./_text"; | ||
|
|
||
| afterEach(cleanup); |
There was a problem hiding this comment.
모든 테스트에 afterEach(cleanup); 가 들어있는데 당장은 필요없지 않아여 ?
| "transform": { | ||
| "^.+\\.ts?$": "ts-jest", | ||
| "^.+\\.tsx?$": "ts-jest", | ||
| "^.+\\.scss$": "jest-scss-transform" | ||
| } |
There was a problem hiding this comment.
const {pathsToModuleNameMapper} = require('ts-jest')
const {compilerOptions} = require('./tsconfig')
module.exports = {
rootDir: '.',
testRegex: '(/__(tests|specs)__/.*|(\\.|/)(test|spec))\\.([tj]sx?)$',
transform: {
'^.+\\.jsx?$': 'babel-jest',
'^.+\\.tsx?$': [
'ts-jest',
{
diagnostics: false,
tsconfig: 'tsconfig.jest.json',
babelConfig: true,
isolatedModules: true,
},
],
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
moduleDirectories: ['src/', 'node_modules'],
modulePaths: ['src/'],
moduleNameMapper: {
'^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
...pathsToModuleNameMapper(compilerOptions.paths),
},
testPathIgnorePatterns: ['/.next/', '/node_modules/', '/config/'],
testEnvironment: 'jsdom',
setupFiles: [],
setupFilesAfterEnv: ['jest-canvas-mock', './jest.setup.js', 'jest-extended/all'],
collectCoverageFrom: ['**/*.{ts,tsx}', '!index.{ts,tsx}'],
resolver: require.resolve('@paymoney/jest/resolver'),
modulePathIgnorePatterns: ['/dist/'],
}
저는 요렇게 설정해놓고 쓰고있어용 참고차 전달드려요
| module.exports = new Proxy( | ||
| {}, | ||
| { | ||
| get: function getter() { | ||
| return () => ({ | ||
| className: "className", | ||
| variable: "variable", | ||
| style: { fontFamily: "fontFamily" }, | ||
| }); | ||
| }, | ||
| } | ||
| ); |
There was a problem hiding this comment.
mocks 는 design-system 과 web 각각에 따로 위치해야 할까요..? 아니면 최상위에 하나를 둘까요..?
| {}, | ||
| { | ||
| get: function getter() { | ||
| return () => ({ | ||
| className: "className", | ||
| variable: "variable", | ||
| style: { fontFamily: "fontFamily" }, | ||
| }); | ||
| }, | ||
| } |
There was a problem hiding this comment.
web은 경로 설정이 좀 이상한 지ㅜㅜ 최상단의 경로를 읽지 못해서 어떻게 설정해야할 지 고민입니다 🥲
| // return <button onClick={() => setMode(null)}>os control</button>; | ||
| return <MyButton onClick={() => setMode(null)}>os control</MyButton>; //!! 🥲 <body><div /> </body>인 이유..? |
There was a problem hiding this comment.
web 에서 테스트를 만드면 다음과 같이 렌더링 되는 거 같아서
<body>
<div/>
</body> 렌더를 못하고 있는 거 같아서 설정을 어떻게 고쳐줘야 할 지 고민입니다.
| test('renders button with text "os control"', async () => { | ||
| render(<ThemeButton />); | ||
| screen.debug(); | ||
| //!! 🥲 <body><div /> </body>인 이유..? 렌더가 제대로 안된 거 같은... | ||
| expect(screen.getByRole("button")).toBeInTheDocument(); |
There was a problem hiding this comment.
다음과 같이 렌더되어서 못찾는 중 ㅜㅜ
<body>
<div/>
</body>
There was a problem hiding this comment.
일단 .. 너무 먼길을 잘못가고계신 것 같은데 ..
useAppTheme 만 모킹을 해줘야하니 아래처럼 해줘야 될 것 같아요
jest.mock('@tripie/design-system', () => {
const actual = jest.requireActual('@tripie/design-system');
return {
...actual,
useAppTheme: jest.fn(() => ({ mode: null, setMode: jest.fn(), toggle: jest.fn() })),
};
});
There was a problem hiding this comment.
제가 pull 을 받아서 테스트를 해봤는데 .. 처음 설정부터 다 손봐야 할 것 같아요 tsconfig 들도
제가 예제를 하나 만들어서 공유드리는게 좋을 것 같은데 어떠세요 ?
PULL REQUEST TEMPLATE
PR 설명
@appear
⚙️ 테스트 도입을 위한 설정 - jest & rtl