vitest, playwright 세팅#34
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request establishes a comprehensive testing environment by adding Vitest for unit tests and Playwright for end-to-end testing, along with MSW for API mocking. Key feedback includes fixing a syntax error in the useRouter mock that causes it to return undefined, aligning Playwright package versions to prevent conflicts, and configuring the baseURL for easier E2E test maintenance. Additionally, it is recommended to ensure TypeScript path aliases are supported across all Vitest projects, including Storybook.
| const useRouter = vi.fn(() => { | ||
| push: vi.fn(); | ||
| }); |
There was a problem hiding this comment.
useRouter 모의(mock) 함수가 객체를 반환하지 않고 undefined를 반환하고 있습니다. 화살표 함수에서 객체 리터럴을 반환하려면 소괄호 ()로 감싸야 합니다. 현재 상태로는 테스트에서 router.push() 등을 호출할 때 오류가 발생합니다.
| const useRouter = vi.fn(() => { | |
| push: vi.fn(); | |
| }); | |
| const useRouter = vi.fn(() => ({ | |
| push: vi.fn(), | |
| })); |
| /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ | ||
| use: { | ||
| /* Base URL to use in actions like `await page.goto('')`. */ | ||
| // baseURL: 'http://localhost:3000', |
There was a problem hiding this comment.
baseURL을 설정하면 테스트 코드에서 await page.goto('/')와 같이 상대 경로를 사용할 수 있어 유지보수가 쉬워집니다. 아래 webServer 설정의 URL과 일치하도록 설정하는 것을 권장합니다.
| // baseURL: 'http://localhost:3000', | |
| baseURL: 'http://localhost:3000', |
| "devDependencies": { | ||
| "@chromatic-com/storybook": "^5.0.0", | ||
| "@hookform/devtools": "^4.4.0", | ||
| "@playwright/test": "^1.59.1", |
There was a problem hiding this comment.
@playwright/test 버전이 프로젝트에 이미 설치된 playwright 패키지 버전(1.58.1)과 다릅니다. 두 패키지의 버전이 일치하지 않으면 예기치 않은 동작이 발생할 수 있으므로 버전을 맞추는 것이 좋습니다.
| "@playwright/test": "^1.59.1", | |
| "@playwright/test": "^1.58.1", |
| projects: [ | ||
| { | ||
| extends: true, | ||
| plugins: [tsconfigPaths()], |
There was a problem hiding this comment.
tsconfigPaths() 플러그인이 unit 프로젝트에만 적용되어 있습니다. 만약 Storybook 테스트에서도 TypeScript 경로 별칭(path alias)을 사용한다면, 해당 프로젝트 설정에도 추가하거나 공통 플러그인으로 설정하는 것이 좋습니다.
1 participant
No description provided.