2강 storybook & vitest

안녕하세요 전상원님~! 말씀하신 브랜치 기준으로 세팅을 동일하게 하고 재현해보았는데요. 저 같은 경우에는 스토리북이나 테스트 실행 모두 이상없이 동작하네요. 의존성 버전 호환의 문제일 수 있을 것 같은대요. 혹시 해당 브랜치 기준으로 node_modules 폴더를 삭제하고 npm ci 로 의존성을 다시 설치해도 동일할까요?

mockServiceWorker.js 파일이 프로젝트내에 포함되어 있어야 하나요?

안녕하세요 bn.kim 님! 1.x 버전에서 세팅을 진행할때는 init cli가 잘 나와있었던 것 같은데, 2.x로 넘어가면서 해당 문서가 잘 보이지 않네요. 해당 파일은 브라우저에서 msw를 수행할 때 파일이 필요한 것으로 알고 있습니다. init cli를 통해 세팅을 진행할 경우 해당 세팅을 모두 해주는 것으로 알고 있는데요! 실제 서비스 배포시에는 해당 파일이 굳이 public에 위치할 필요는 없으니 빌드 후에 제거해주시면 좋을것 같습니다. 아래 참고 하실 수 있는 문서 같이 드립니다! https://mswjs.io/docs/cli/init

toHaveClass 테스트코드 관련하여 질문 남깁니다!

안녕하세요 디건버님~! 우선 css modules 처럼 동적인 해시값에 의해 className이 변경되는 경우에는 vitest의 css.modules.classNameStrategy 설정을 통해 테스트 환경에서 css에 해시값이 추가되지 않도록 할 수 있습니다. (jest의 경우 https://github.com/keyz/identity-obj-proxy 라이브러리를 사용하면 문제를 해결할 수 있습니다.) // 예제의 vite.config.js export default defineConfig({ plugins: [react(), eslint({ exclude: ['/virtual:/**', 'node_modules/**'] })], test: { // ... setupFiles: './src/utils/test/setupTests.js', // 아래 옵션 추가 css: { modules: { classNameStrategy: 'non-scoped', }, }, }, resolve: { alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }], }, }); // jest.config.js module.exports = { // ... moduleNameMapper: { "\\.(css)$": "identity-obj-proxy", ... }, }; export default class App extends Component { render() { return ( Hello, world! ); } } // 위의 설정을 적용하면 아래처럼 해시값없이 키값만 기준으로 className이 생성됩니다. exports[`test App renders correctly 1`] = ` Hello, world! `; 테스트에서는 로직의 흐름에 따라 className이 올바르게 변경되는 것인지 검증하는 것이 목적입니다. 따라서 동적인 스타일 해시값까지는 굳이 검증할 필요가 없는대요. 다행히 테스트 도구들의 설정을 통해 해시값 설정을 제거하고 className이 적절하게 변경되는지 명확하게 검증할 수 있습니다. 이외에도 AI가 답변해준 것처럼 toHaveClass 매처에 정규 표현식을 사용하여 검증하는 방법도 있지만 번거로움이 있기 때문에 설정을 통해 컴포넌트의 테스트 코드를 좀 더 깔끔하게 관리하는 것이 좋을 것 같습니다..! 제가 vanila-extract 는 직접 사용해보지는 않았지만 공식 문서에 위에서 이야기한 설정에 대한 가이드 가 있으니 이 부분을 참고하시면 문제없이 동작하지 않을까 합니다. 혹시 추가적인 문의 사항이나 이슈가 있다면 얼마든디 편하게 답글 남겨주세요. 감사합니다! 😃

4.3 강의 자료가 이상해요

안녕하세요 2scent님! 강의자료 pdf 형태로 다시 업로드 하였으니 확인 부탁드립니다. 이외에도 궁금하거나 이슈가 있다면 언제든지 편하게 말씀해주세요! 🙂

shopping-mall-integration-test 브랜치에 이상한 점 발견

안녕하세요 제일일님! 해당 부분은 테스트에서 다음과 같이 프로덕트 카드를 선택할 때 사용하는 목적으로 사용하고 있는데요. const productCards = await screen.findAllByTestId('product-card'); 혹시 에러 코드나 어느 부분에 문제가 발생했는지 조금 더 구체적으로 설명해주실수 있을까요?