Typescript로 Cypress test 작성

소개

Typescript로 웹 응용 프로그램을 작성할 때 테스트 프로그램이 필요합니다.
비교 검토한 결과 Cypress 이 무언가와 쓰기가 좋기 때문에 사용하기로 했다.
우리는 개발 환경을 Ubuntu 20.04 LTS on WSL2 및 vscode에서 수행하므로이 환경에서 작동하기위한 절차를 함께 설명합니다.

환경 요건

OS : WSL2에서 실행되는 Ubuntsu 20.04LTS

사용 편집기 VScode

패키지 관리에는 yarn 을 사용

이 기사의 목표

Cypress를 실행하기위한 WSL2 (Ubuntu 20.04LTS) 환경 만들기

Cypress 설치 완료

Cypress 시작

Typescript로 테스트 코드 작성 및 실행

전제 조건

적절한 typescript 프로젝트가 존재하고 시작됩니다

작업 절차

WSL2 환경 만들기

Cypress에는 CLI가 있으므로 반드시 X는 필요하지는 않지만,
있던 것이 편리하기 때문에 X 환경도 포함해 환경 만들기로 한다.

X 환경 만들기

X 서버 설치

우선은 모함(Windows)측의 환경 만들기가 필요하므로 그쪽에서 다룬다.
VcXsrv을 다운로드하여 설치합니다.
exe 형식으로 배포되어 있기 때문에 설치 작업에 번거로움을하는 사람은 없다고 생각한다.
라고 할까, 그 레벨로 막히는 것 같으면 포기하라. 무리다.

초기 설정

Display Settings

Multiple win windows 선택

Select how to start clients

Start no client 선택

Extra Settings

Additional parameters for VcXsrv 에 -ac 추가

다음 화면에서 save config 이지만 거기에 좋아합니다.

X 관련 패키지 설치

# sudo apt install x11-apps
# export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0
# xeyes

제대로 설정되어 있으면 눈이 나온다. 또한,export DISPLAY 는 향후도 사용하므로 .bashrc 근처에도 써 두면 향후가 편해진다.

일본어 글꼴 추가

WSL2, 원래의 Ubuntu는 일본어 폰트가 들어 있지 않기 때문에 대부분이 폰트 없음이 되어 버린다.
따라서 OS 폰트를 사용할 수 있도록 해 버리는 것이 좋다.

$ sudo vim /etc/fonts/local.conf

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
    <dir>/mnt/c/Windows/Fonts</dir>
</fontconfig>

덧붙여 Docker로 사용하는 경우는 모함의 폰트를 마운트. 라고 말할 수는 없기 때문에 이런 식으로.

RUN apt-get update
RUN apt-get install -y locales locales-all
RUN apt-get remove fonts-vlgothic
RUN apt-get install -y fonts-vlgothic
RUN locale-gen ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LC_CTYPE ja_JP.UTF-8
RUN localedef -f UTF-8 -i ja_JP ja_JP.utf8

X 관련 부팅 오류 방지

이런 것이 나오므로 대처한다.

Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory

 # /etc/init.d/dbus start

Cypress 설치

종속 패키지 설치

# sudo apt-get update
# sudo apt-get install libgtk2.0-0 libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

Cypress 설치

yarn으로 넣어 가는 관계상, package.json등을 갱신하기 위해, 미리 project 폴더로 실행한다

# cd your_project_path
# yarn add -D cypress

부팅 옵션 추가

package.json에 다음을 추가한다. json 파일인 것과, scripts의 항은 프로젝트용으로 무엇인가 써 있을 것이므로 추기 방법에 대해서는 적절히 실시.

  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run",
  },

typescript 용 설정

다음을 보면서 실행
htps : // / cs. cyp rs. 이오 / 구이 s / 와 오 g / ty ぺ sc 리 pt 술집 rt. html # in s tai l Ty pe Sc pt