UI 프레임워크 없이 HTML 및 Vanilla JavaScript에 대한 유닛 테스트 수행 방법

최근에 나는 매우 궁금하다. 어떤 UI 프레임워크나 개발 도구를 사용하지 않는 전단 코드를 위해 단원 테스트를 작성할 수 있습니까?
즉, 반응, 각도 또는 Vue가 없습니다.웹 패키지나 요약이 없습니다.어떤 종류의 구축 도구도 없습니다.일반 파일index.html과 일반 JavaScript 파일만 있습니다.
이런 설정 테스트 가능한가요?
본문과 그accompanying GitHub repo가 바로 이 문제의 결과이다.

이전 경험

내 직업 생활에서 나는 많은 테스트를 했다.저는 주로 전단 소프트웨어 엔지니어이기 때문에 제 전공 분야는 Jest를 제 테스트 프레임워크 작성 단원 테스트로 사용하고 React를 사용할 때 Enzyme 또는 React Testing Library 을 제 테스트 라이브러리로 사용합니다.나는 또한 Cypress 또는Selenium을 사용하여 끝까지 테스트를 진행했다.
일반적으로, 나는 React를 사용하여 사용자 인터페이스를 구축하는 것을 선택한다.이 인터페이스를 테스트할 때 저는 몇 년 전부터 효소를 사용하기 시작했지만 그때부터 저는 React 테스트 라이브러리와 이런 이념을 지원하기 시작했습니다. 즉, 사용자가 응용 프로그램을 사용하는 방식으로 응용 프로그램을 테스트하는 것이지 디테일을 테스트하는 것이 아닙니다.
Kent C. Dodds의 React 테스트 라이브러리는 그의 DOM Testing Library 위에 구축된 것으로 말 그대로 DOM을 테스트하는 데 도움을 주는 라이브러리입니다.나는 이것이 아마도 매우 좋은 출발점일 것이라고 생각한다.

초보적 연구

Michael Longmire의 Unsplash 사진
소프트웨어 공학 분야에서 가장 먼저 어떤 일을 시도하는 사람은 드물다.이전에는 거의 모든 일이 이런저런 형식으로 이루어졌다.따라서 Google, Stack Overflow, 개발자 포럼은 당신의 친구입니다.
나는 누군가가 일찍이 이 점을 시도하고 관련 글을 쓴 적이 있다고 생각한다.그러나 연구를 한 후에 과거에 이런 방법을 시도한 사람들이 있는 것 같지만 이미 막다른 골목에 이르렀다.한 개발자asked back in August of 2019가 도움을 요청했지만 아무런 회답도 받지 못했다.또 다른 개발자는 그들이 제기한 내용에 대한 글을 썼지만, 불행하게도 그들은 최종적으로 세부 사항을 실현하는 것을 테스트했다. 이것은 내가 피하고 싶은 것이다.
그래서 그들의 시도에서 얻은 정보가 생겨서 저는 자신의 프레젠테이션 프로젝트를 만들기 시작했습니다.

프레젠테이션 어플리케이션

위에서 말한 바와 같이, 당신은 찾을 수 있습니다 code for my demo app here.또한 볼 수 있습니다app in action hosted here.그것은 단지 하나의 개념적 증명일 뿐이기 때문에 매우 작고 간단하다.
그러나 프레젠테이션 응용이 반드시 지루할 필요는 없다. 그래서 나는 너의 오락을 위해 이중 관문어 생성기를 만들었다.다음은 모양입니다.

프레젠테이션 어플리케이션
소스 코드를 볼 때 두 개의 중요한 파일을 주의해야 합니다.

src/index.html: 전체 어플리케이션입니다.다른 파일은 없고 스크립트 태그가 있는 HTML 파일만 있습니다.

src/index.test.js: 테스트 파일입니다.Jest와 DOM 테스트 라이브러리를 사용하고 있습니다.

이 두 파일은 모두 매우 작기 때문에 나는 그것들을 아래에 포함한다.

소스 파일: 인덱스.html

테스트 파일: 인덱스.테스트회사 명

Overview of the Source File

index.html 파일에서 보듯이 특별한 점은 없습니다.만약 당신이 간단한 웹 페이지를 만드는 방법을 처음 배웠다면, 당신의 결과는 기본적인 HTML, CSS, 자바스크립트와 매우 비슷할 것이다.간단하게 보기 위해서, 나는 CSS와 자바스크립트를 다른 원본 파일에 연결하지 않고 파일에 연결할 것이다

JavaScript는 더블 스위치 그룹을 만들고 단추에 이벤트 탐지기를 추가한 다음 단추를 눌렀을 때마다 화면에 새로운 더블 스위치를 삽입합니다.간단하죠

Diving into the Test File

이것은 테스트에 관한 문장이기 때문에 테스트 파일이 이곳의 관건이다.우리 함께 좀 더 재미있는 부분을 봅시다

Retrieving the HTML File

첫 번째 문제는 HTML 파일을 테스트 파일로 가져오는 방법입니다.JavaScript 파일을 테스트하는 경우 일반적으로 테스트할 파일에서 내보내는 방법은 다음과 같습니다.

import { methodA, methodB } from './my-source-file'

그러나 내 예에서 이런 방법은 HTML 파일에 적용되지 않는다.반면 내장 fs 노드 모듈을 사용하여 HTML 파일을 읽고 변수에 저장합니다:

const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');

Creating the DOM

이제 파일 HTML 내용을 포함하는 문자열이 생겼습니다. 어떤 식으로든 보여 주어야 합니다.기본적으로 Jest는 테스트를 실행할 때 아날로그 브라우저를 사용합니다.만약 jsdom를 설정해야 한다면, 테스트 파일을 현저하게 가져올 수도 있습니다. 이것이 바로 제가 한 일입니다.

import { JSDOM } from 'jsdom'

그리고 제 beforeEach 방법에서 저는 jsdom을 사용하여 HTML을 보여줌으로써 테스트를 할 수 있습니다:

let dom
let container

beforeEach(() => {
  dom = new JSDOM(html, { runScripts: 'dangerously' })
  container = dom.window.document.body
})

jsdom Running Scripts Inside the jsdom Environment

정상적으로 작동하려면 가장 중요한 부분은 jsdom에 전달되는 설정 옵션에 포함되어 있습니다:

{ runScripts: 'dangerously' }

jsdom에서 스크립트를 위험하게 실행하라고 말했기 때문에, 실제로는 내 index.html 파일의 script 표시에 포함된 코드를 설명하고 실행할 것입니다.이 옵션을 사용하지 않으면 JavaScript는 영원히 실행되지 않으므로 테스트 단추를 누르면 이벤트가 작동하지 않습니다

면책성명: 중요한 것은 주의하는 것입니다. 당신은 반드시 여기에 있어야 합니다.HTML 파일과 JavaScript를 제어하기 때문에 안전하다고 생각할 수 있지만, 이 스크립트가 제3자에서 오거나 사용자 입력을 포함한다면 이런 방법으로 jsdom를 설정하는 것은 현명하지 못합니다

never run untrusted scripts Moment of Truth

지금, 상술한 설정을 완성한 후, 내가 실행yarn test할 때, 그것은... 일했다!개념 검증이 큰 성공을 거두자 사람들은 매우 기뻤다

모든 테스트 통과

Conclusion

그렇다면 최초의 문제로 돌아가자: UI 프레임워크나 개발 도구를 사용하지 않는 전단 코드를 위한 단원 테스트를 작성할 수 있습니까

정답은: 네

내 프레젠테이션 응용 프로그램은 생산이 완료된 응용 프로그램의 외관을 반영할 수 없지만 필요하다면 이런 방식으로 사용자 인터페이스를 테스트하는 것은 실행 가능한 선택인 것 같다

읽어주셔서 감사합니다