이 글을 읽은 사람들은 이미 많은 구글링을 했다고 생각하고,,
어쩌다 여기까지....오셨는지 흑흑
결론을 먼저 말하면 터미널2개키고 프론트서버, cypress 각각 켜주면 됩니다.
cypress는 jest랑 다르게 e2e테스트로 실제 사용자가 행동하는것처럼 테스트한다.
예를들면 로그인을 테스트하면
given 로그인 페이지에 접근한다
when 아이디,비번을 입력하고 로그인버튼을 클릭한다
then 로그인에 성공한다
이때, 처음 페이지에 접근할때 cy.visit()가 잘못되었다며 에러가뜬다.
에러제목은 cy.visit() failed trying to load;
구글에 쳐보니 나와같은 사람이 많은것 같아 공유한다.
구글에는 일반적으로 cypress.config.ts의 baseUrl을 적어주면 나온다고 하지만, 나의 경우는 baseUrl을 설정했음에도불구하고 잘못된 baseUrl이라고 나왔다.
이에대한 에러해결법은 없는것같아 작성해본다.
- cypress테스트파일에 상대경로를 써준다.
예를들어 localhost:3000/login 주소에 접근하려고하면/login만 작성해준다.
// login.cy.js
// cypress는 test 못씀 it만!
describe("로그인 화면", () => {
it("사용자는 아이디와 비밀번호를 사용해서 로그인한다.", () => {
// given - 로그인 페이지에 접근한다.
cy.visit("/login");
cy.get("[data-cy=emailInput]").as("emailInput");
cy.get("[data-cy=passwordInput]").as("passwordInput");
// when - 아이디,비번을 입력하고 로그인버튼을 클릭한다.
// then - 로그인에 성공한다.
});
});2-1. 방법1. 로컬호스트 3000번 직관적으로 명시
cypress.config.ts에 baseUrl을 적어준다
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
baseUrl: "http://localhost:3000", // 이부분적어줌
setupNodeEvents(on, config) {
},
},
});
만약 vite를 사용중이라면 vite.config.ts에 server포트번호를 명시적으로 3000으로 작성해준다
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), tsconfigPaths()],
server: { port: 3000 },
});2-2. 방법2. baseUrl을 본인의 프론트서버가 열리는것과 명시하여 맞추기
나는vite라 5173으로 열려서 5173써줌
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
baseUrl: "http://localhost:5173",
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});
- 터미널을 2개열어서 각각 프론트서버실행과, cypress실행을 해준다
내가 찾은 결론은 결국 프론트서버가 켜져있는상태에서 cypress를 열었어야했는데, 한 터미널에서 하려고 하다보니 프론트서버를끄고 cypress를 켰었다.
따라서 터미널 2개를 열어 하나는 프론트서버실행 npm start, 하나는 cypress실행 npm run cypress 을해줬다.
나는 위의 실행인데 이걸 찾아보신분이라면 package.json을 열어서 본인의 scripts 실행에 적혀있는대로 실행하면된다.
"scripts": {
"start": "vite",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"unit-test": "jest --watchAll --transformIgnorePatterns",
"cypress": "npx cypress open"
},실제로 나는 프론트서버끄고 cypress키고, cypress끄고 프론트서버키고.... 하는 이 바보같은 행동을 장장 2시간동안 반복했다.
이걸 보시는분들이라면 나처럼 바보행동을 길게하질않게바라며,,,,,
