묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
cypress 와 jest에서 타입만 다르다면? 그래도 같이 쓰는것도 좋지 않나요?
cypress를 적용해보고 러닝 커브가 훨씬 낮은거 같고 좋았습니다 jest는 많이 목킹을 하고 여러가지 더 설정이 많아서 힘들긴 했는데 여기서 타입을 제외하고 더 같이 쓰지 말아야할 이유가 있나요?
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
test 폴더
테스트 모음 폴더명을 "test" 아닌 "__test__"로 정의하신이유가있을까요??
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
ERROR
App.js파일을 refresh 하면 이렇게 error가 뜨네요 ㅜㅜ 해결책을 아무리 찾아봐도 나오질 않습니다 . .
-
미해결습관부터 바꿔주는 Node.js & Express 기초
Axios Mocking에 관한 질문입니다.
// Axios.test.ts import axios from 'axios'; import ManagerService from "./ManagerService"; jest.mock('axios'); const mockedAxios = axios as jest.Mocked<typeof axios>; describe("Axios Test", () => { let managerService = new ManagerService(); it("should mock axios get call", async () => { mockedAxios.get.mockResolvedValue({ data: [ { corporation: "inflearn" } ], }); const test = await managerService.axiosTest("inflearn"); expect(test).toEqual([ { corporation: "inflearn" } ]); expect(mockedAxios.get).toHaveBeenCalledWith(`${process.env.SERVER_URL}/corporation/info`, { params: { corporation: "inflearn" }, }); }); }); 위와 똑같은 코드로 테스트를 진행했고, 본 코드에서는 약간의 차이만 있었습니다.하지만 아직 왜 그렇게 되는지 알지 못하여서 강사님께 여쭤보려고 합니다. 1번 코드 ( 테스트가 잘 동작하는 코드 )axiosTest = async (corporation: string) => { const response = await axios.get(`${process.env.SERVER_URL}/corporation/info`, { params: { corporation: corporation, }, }); if (!response) { throw new Error("값이 없음"); } return response.data; }; 2번 코드 ( 값이 없음으로 에러가 발생하는 코드 )axiosTest = async (corporation : string) => { const site = await axios({ method: 'get', url: `${process.env.SERVER_URL}/corporation/info`, params: { corporation : corporation }, }) if(!site) { throw new Error("값이 없음"); } return site.data } 둘의 차이점에 대해서 알 수 있을까요?
-
미해결습관부터 바꿔주는 Node.js & Express 기초
Express 사용하면서 Jest 테스트 관련해서 질문 드립니다.
// Axios.test.ts import axios from 'axios'; import ManagerService from "./ManagerService"; jest.mock('axios'); const mockedAxios = axios as jest.Mocked<typeof axios>; describe("Axios Test", () => { let managerService = new ManagerService(); it("should mock axios get call", async () => { mockedAxios.get.mockResolvedValue({ data: [ { corporation: "inflearn" } ], }); const test = await managerService.axiosTest("inflearn"); expect(test).toEqual([ { corporation: "inflearn" } ]); expect(mockedAxios.get).toHaveBeenCalledWith(`${process.env.SERVER_URL}/corporation/info`, { params: { corporation: "inflearn" }, }); }); }); 위와 똑같은 코드로 테스트를 진행했고, 본 코드에서는 약간의 차이만 있었습니다.하지만 아직 왜 그렇게 되는지 알지 못하여서 강사님께 여쭤보려고 합니다.1번 코드 ( 테스트가 잘 동작하는 코드 )axiosTest = async (corporation: string) => { const response = await axios.get(`${process.env.SERVER_URL}/corporation/info`, { params: { corporation: corporation, }, }); if (!response) { throw new Error("값이 없음"); } return response.data; }; 2번 코드 ( 값이 없음으로 에러가 발생하는 코드 )axiosTest = async (corporation : string) => { const site = await axios({ method: 'get', url: `${process.env.SERVER_URL}/corporation/info`, params: { corporation : corporation }, }) if(!site) { throw new Error("값이 없음"); } return site.data } 둘의 차이점에 대해서 알 수 있을까요?
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
안녕하세요. 질문 있습니다.
섹션3 recoil을 테스트하는 방법 3:50에cy.url().should('include','/');를 통해서 root page로 잘 이동하는지 확인한다고 하신부분에서,'/'는 어떤 페이지에서든 include가 되어 테스트가 통과될것 같은데 혹시 rootpage를 검증하기위한 다른 방법은 없을까요?
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
공용 컴포넌트 유닛 테스트 관하여 질문이 있습니다!
안녕하세요! 강의를 듣고 테스트 코드를 연습중에 질문이 있어서 글을 작성하게 되었습니다.제가 테스트 코드를 작성하려는 프로젝트에서 공용 컴포넌트 중 Pagination 컴포넌트에 유닛 테스트 코드를 작성하려고 합니다.제가 생각한 테스트 흐름은 실제 유저가 Pagination 컴포넌트의 화살표 버튼 클릭시 현재 페이지가 1이 증가하는 것처럼 테스트 코드를 구현하려고 했습니다.하지만 Pagination 컴포넌트에는 setCurrentPage 함수를 주입 받아서 처리하기 때문에 유닛 테스트에서는 클릭으로 current page 값이 증가하는 것을 확인할 수는 없고 spy 함수를 통해 setCurrentPage가 실행되는 것까지만 확인하는게 맞는건가요?? 두서없는 글 읽어주셔서 감사합니다!
-
해결됨한 입 크기로 잘라먹는 타입스크립트(TypeScript)
타입스크립트 테스트코드 작성
안녕하세요 강의 도움 많이 받고 타입스크립트 + 리액트 조합으로 서비스 만들고 있습니다. 강의에 테스트코드 관련 내용은 없어 무관한 질문 죄송합니다 ㅠjest로 테스트 코드를 작성하려고 하는데 설정에 무슨 오류가 있는지 도무지 테스트가 되지 않습니다.. 여러 블로그 글이랑 챗 gpt참고해서 수정해도 안되는데 혹시 타입스크립트에서 jest 쓰려면 다른 설정을 해줘야 하는건가요?도움 주시면 감사드리겠습니다 ..
-
미해결따라하며 배우는 TDD 개발 [2023.11 업데이트]
TypeError: user_model_1.default.create is not a function
학습중 repository pattern을 적용하여 테스트를 적용해 보던 중 TypeError: user_model_1.default.create is not a function 라는 에러와 마주하게 되었습니다.user.repository.tsimport User from "../model/user.model"; export class UserRepository { createUser = async(user) => { const newUser = await User.create({ ...user }) return newUser } findUserById = async(id:string) => { const user = await User.findById('65cba34813b2fbec74a558a8') if(!user) throw new Error('존재하지 않는 유저정보 입니다.') return user } }user.repository.test.tsimport { UserRepository } from "../../app/repository/user.repository" const createMock = jest.fn() const findByIdMock = jest.fn() jest.mock("../../app/model/user.model", () => { return { User: jest.fn(() => { return { create:createMock, findById:findByIdMock } }) } }) describe('user repository Create', () => { let sut:UserRepository; const newUser = { id:"abcdefrwgsf123123", name:"test name", email:"test@nanana.com" } beforeEach(() => { sut = new UserRepository() }) afterEach(() => { jest.clearAllMocks() }) it('create api', async () => { createMock.mockReturnValueOnce(newUser) const actual = await sut.createUser({name:newUser.name, email:newUser.email}) expect(createMock).toHaveBeenCalledTimes(1) expect(actual).toStrictEqual(newUser) expect(createMock).toHaveBeenCalledWith({name:newUser.name, email:newUser.email}) }) }) jest실행시 create api의 createMock.mockReturnValue() 까지는 실행이되지만 await sut.createUser() 부분에서 에러가 나는것으로 확인되었습니다.
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
강의 코드 질문이 있습니다!
안녕하세요 nock을 활용한 HTTP request mocking강의를 듣던 도중 계속 테스트 실패가 일어나 확인하니axios 400 에러가 나고 있는데 isError 가 true 로 오지 않아 테스트가 실패하고 있는 것 같습니다. LoginPage의 isError 를 !isError 로 변경하니 테스트가 통과 되었습니다.원래 isError 가 false로 오는게 맞는 건가요??
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
테스트 코드의 흐름에 관해 질문이 있습니다!
안녕하세요섹션 2의 nock을 활용한 HTTP request mocking 강의 1:31초 부분에 질문이 있습니다.fireEvent.change(emailInput,{target:{value:"wrong@email.com}}); fireEvent.change(passwordInput,{target:{value:"wrongPassword}}); 를 적으시는 부분에서 잘못된 패스워드와 잘못된 이메일을 입력할 때 라고 말씀하셨는데value 부분은 string이어서 "wrong@email.com" 이 틀린 이메일을 말한다는걸 코드가 이해하는 부분도 아닐 것 같은데 어떻게 에러 코드를 던져주는건지 궁금합니다!( 로그인에 실패한다. 라는 상황이 코드상에 보이지 않는 것 같은데 코드가 어떻게 이해하는지를 모르겠습니다! )
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
jest 테스트코드 작성을 위한 사전세팅 중 문제가 발생했습니다.
안녕하세요 jest 테스트코드 작성을 위한 사전세팅중위와 같이 코드를 작성 후 실행하였더니이러한 에러가 발생하였습니다.jest를 사용하며 import라는 구문을 사용하지 못한다는 에러같은데 해결 방법이 있을까요??
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
테스트 실행이 안되는 문제..
공유해주신 프로젝트 clone해서 수정 없이 npm run unit-test 명령어 실행 시, 아래 이미지와 같이 export().toBeInTheDocument()를 찾지 못해 진도를 나가지 못하고 있습니다.. 혹시 해결방안을 알려주실 수 있으실까요?구글링 검색 시, import "@testing-library/jest-dom"; 을 테스트 파일 가장 상위에 두라고 하는데 이미 되어 있고 다른 해결책들도 실행해보았지만 해결하지 못했습니다.노드 버전은 20.10.0 , 18.19.0 , 18.14.0 에서 실행했을 때, 모두 실패했습니다..
-
미해결따라하며 배우는 TDD 개발 [2023.11 업데이트]
에러 처리를 위한 단위테스트 작성
에러 처리를 위한 단위테스트 작성 강의 내용 중 이해가 가지 않는 부분이 생겨 글 남김니다.errorMessage 의 message 내용은 description property missing 에러입니다. 그렇다면 테스트 상황에서 포스트맨과 동일하게 description이 빠진 객체를 저장하다 에러가 발생해야 맞는 테스트가 아닌가 하는 의문이 생기네요.it('should handle errors', async () => {const errorMessage = {message: "description property missing"}; const rejectedPromise = Promise.reject(errorMessage); productModel.create.mockReturnValue(rejectedPromise); await controller.createProduct(req, res, next); expect(next).toBeCalledWith(errorMessage);})
-
해결됨따라하며 배우는 리액트 테스트 [2023.11 업데이트]
테스트 시간을 단축할 수 있는 방법에 대하여 문의드립니다.
[1] 문의내용(총 2건)Jest의 테스트 시간을 단축할 수 있는 방법Jest의 테스트 시간이 증가하는 원인React 프론트코딩시 jest를 항상 켜두고 작업하는게 좋을까요? [2]현재 상황 안내섹션 2의 "간단한 앱 만들며 테스트"를 실습하고 있습니다.테스트코드의 실행이 저의 경우 3초(최대 5초)가 소요되는 반면, 강의 영상은 길어야 2초 정도로 속도가 차이가 나는거 같습니다. 실제 프로젝트에서 테스트코드의 양이 늘어날수록 비례하여 jest 소요시간이 늘어날 것이고, 개발시간의 장기화등 스케쥴측면에서 문제가 될 수 있지 않을까 싶어 문의를 드립니다.
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
섹션 3의 cypress 성공 케이스 작성 시, 에러 발생
섹션 3의 cypress 환경 설정 후 cypress 성공 케이스 작성 테스트 시, 계속해서 에러가 발생하여 문의드립니다.cypress > e2e > 3-login 폴더 안에 login.cy.js 파일을 작성하고,첫번째 테스트 케이스인 로그인 페이지 방문, 이메일과 비밀번호를 get 해오는 소스만 삽입하여 cypress 구동 후 확인을 하면,계속해서 cypress 사이트가 꺼지는 오류가 있습니다. 현재 cypress 사이트 내 폴더 구조와 파일 항목입니다.1-getting-started 폴더 아래 todo.cy.js 파일 클릭 시, 잘 수행됩니다.2-advanced-examples 폴더 아래 파일도 테스트 시, 잘 수행됩니다.그런데, 3-login > login.cy.js 파일 클릭 시, 아예 화면이 닫혀버리면서 VSCode 에는 아래와 같은 에러 메시지가 띄워집니다. 계속해서 구글링을 통해 에러를 해결해 보려고 하였으나, 답을 찾기가 어려워 질문 드립니다.!
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
테스트코드의 소스코드 관련 문의
안녕하세요, 강의 구매 후 오늘부터 강의 시작했는데올려주신 깃헙 레포에서 확인한 소스코드는 jest, cypress 테스트 환경에 필요한 소스코드가 모두 작성되어 있어서, 만일 강의를 보며 직접 작성을 해보고 싶은 경우에는 어떻게 해야하는지 모르겠습니다. 해당 프로젝트에 있는 파일의 내용을 주석 처리하고 작성 및 테스트를 해봐야 하는건가요?혹은 강의 내용으로 전체적인 흐름을 보면서, 제가 다시 복습하는 의미로 해당 프로젝트 소스 코드를 봐야하는건가요?
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
테스트시 api 통신에 관한 질문입니다.
안녕하세요. 강의 열심히 수강중인 수강생입니다.jest와 cypress 강의를 보다가 보면 url 통신을 하는 부분은 실제 api 통신이 아닌, 미리 준비해둔 가상의 데이터를 사용하는데, 왜 테스트 시에는 mocking을 해주는 건가요? 구글링 해보면 테스트 코드의 의존성을 제거하기 위함이다 라고 많이 나오는데 개발자가 준비해둔 가상의 데이터를 response 해주면 결국 테스트 자체는 뭘 해도 다 ok가 될텐데 이러면 테스트라는거 자체가 의미가 없는게 아닌가요? 구글링해서 테스트시에 mock 처리를 해주는 이유를 찾아봤는데, 이게 결국은 내가 만들어둔 더미데이터를 넣어주면 무조건 그대로 움직이게 되는데 그러면 이 테스트 자체를 하는게 어떤 의미인지를 잘 모르겠습니다. 제가 뭔가 잘못 생각하고 있는건지... 질문 한번 올려봅니다.
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
useState 배열값 변경의 경우 테스트 멈춤
질문있습니다. const modelListData = ['model1', 'model2', 'model3'] const [rowData, setRowData] = useState([]) useEffect(() => { setRowData(modelListData) }, [modelListData])위 처럼 작성을 한 후에 테스트를 돌리면 그냥 터미널이 멈춰 버립니다...그런데 setRowData(modelListData)이걸 주석처리 하거나 배열이 아닌 타입의 값을 넣을 경우에는 테스트가 제대로 동작합니다. 혹시 test코드에 뭔가를 작성을 해주어야 할까요? ㅠㅠ테스트 코드는 아래처럼 작성하고 돌려보았습니다.describe('모델리스트 컴포넌트 및 기능 테스트', () => { test('테스트 왜 안됨?', () => { render(<ModelList />) }) }) 그런데 터미널은 여기서 아무리 기다려도 다음으로 넘어가지 않습니다. 단 setRowData에 배열이 아닌 타입의 값을 넣을 경우에는 무리없이 잘돌아갑니다 ㅜㅜ RERUN src/modelManager/components/ModelList.tsx x2 · src/__test__/modelList.test.tsx (1) · 모델리스트 컴포넌트 및 기능 테스트 (1) · 테스트 왜 안됨?
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
cypress와 함께 사용하면되는건가요?
Jest와 Cypress중에 하나만 사용 하라고 하셨는데storybook은 Jest와 함께 사용하거나 Cypress와 함께 사용해도 될까요?