1. React Cypress 절대경로 설정

Cypress란?

Cypress는 JavaScript로 구현된 End-to-End(E2E) 테스트 프레임워크입니다. 사용자의 관점에서 전체 시스템의 동작을 검증하는 것을 목적으로 하며, 테스트를 통해 자동화된 UI 테스트, API 테스트, 브라우저 테스트 등을 수행할 수 있습니다. Cypress는 가볍고 빠르며, 내장된 도구들을 사용하여 설정이나 설치 과정이 간단합니다. 또한, 테스트 수행 시 브라우저와 상호작용할 수 있어 디버깅이나 테스트 결과 확인이 용이합니다.

문제점 발생

Cypress를 사용하여 E2E(end-to-end) 테스트 코드 작성을 진행했다.
이때, 절대경로 설정에서 애를 먹었다.
문제는 다음과 같다.

1. Cypress 설정을 jsconfig.json(또는 tsconfig.json)에 적용시 cypress 폴더를 include해야하기에 build나 start할때 해당모듈이 포함되게 된다.

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "includes": ["src", "cypress"]
}

2. 절대경로가 아닌 상대경로 사용시 기존에 모듈을 그대로 이용하지 못한다. 이때, 상대경로 그냥 쓰면 되는거 아님? 이라고 생각할수있다. 하지만 연결된 모듈 확인할때 기존 절대경로를 이해하지 못하는 현상을 일으킨다.

//Cyress 테스트 파일 부분 
import { PostAdminRequest } from 'Api/Session';절대경로
import { PostAdminRequest } from '../../src/Api/Session' 상대경로

//Api/Session.js
import { PostSqlRequest } from 'Api/Sql';절대경로
-> 해당 내용을 Cypress에서 읽지 못하여 Webpack에러 발생

해결방식

이때, 이를 해결하는 방식의 조건을 다음과 같이 했다.
1. jsconfig.json을 변경하지 않고 진행한다.
2. 기존 모듈의 절대경로를 유지한다.
3. Cypress와 기존 패키지 기동조건을 분리한다.
4. Cypress에서 기존 패키지 모듈을 사용가능하게한다.

위의 해결조건을 충족시키는 방식은 "Webpack"이었다.

Webpack 설정하기

기존에 CRA(Create-React-App)에서 Webpack을 설정하는 방식이 아닌 Cypress에서만 유효한 방식을 채택했다. (NO Eject이라는 이야기다.)

1. cypress.config.js를 root에 만들어준다. 일반적으로는 Cypress를 설치시 생성되지만 없다면 생성해준다.

2. Cypress Webpack 오버라이딩 패키지를 설치한다.
   해당 패키지는 Cypress 정식 지원 패키지이다.

npm i -D @cypress/webpack-preprocessor 

3. 설치 후 cypress.config.js에 다음과 같이 패키지를 설정한다.

const webpack = require('@cypress/webpack-preprocessor');
const path = require('path');

module.exports = defineConfig({
    e2e: {
        setupNodeEvents(on, config) 
            //webpack override plugin
            const options = webpack({
                webpackOptions: {
                    resolve: {
                        extensions: ['.js', '.jsx', '.mjs', '.cjs'],
                        alias: {
                            Api: path.resolve(__dirname, 'src', 'Api'),
                        },
                    }
            });
            on('file:preprocessor', options);
            return config;
        },
    },

4. 설정 끝내고 절대경로 방식으로 모듈을 읽을 수 있다.