테스트 환경 설정

jQuery 코드에 대한 테스트를 작성하는 일은 견고하고 유지 관리하기 쉬운 웹 애플리케이션을 만드는 데 매우 중요합니다. 테스트는 버그를 조기에 발견하고 코드가 예상대로 동작하는지 확인하는 데 도움을 줍니다.

• 회귀 방지: 새로운 변경 사항으로 기존 기능이 손상되지 않도록 합니다.
• 코드 품질 향상: 모듈화되고 테스트 가능한 코드를 작성하게 합니다.
• 협업 지원: 구성 요소가 어떻게 작동해야 하는지 명확하게 문서화합니다.

jQuery를 포함한 JavaScript를 테스트하려면 테스트 실행기가 필요합니다. 이 도구는 테스트를 실행하고 결과를 보고합니다.

널리 사용되는 두 가지 선택지는 다음과 같습니다.

• Jest: Facebook에서 만든 현대적이고 기능이 풍부한 테스트 프레임워크입니다. React에 널리 사용되지만 모든 JS에 적합합니다.
• QUnit: jQuery 전용 테스트 프레임워크입니다. Jest보다 단순하지만 기능은 적습니다.

이 레슨에서는 다양한 기능과 폭넓은 사용을 고려하여 Jest 설정에 집중하겠습니다.

Jest를 설치하기 전에 Node.js 프로젝트가 필요합니다. 프로젝트가 없다면 쉽게 만들 수 있습니다.

터미널에서 프로젝트 디렉터리로 이동한 후 다음을 실행하세요.

이 명령은 프로젝트의 의존성과 스크립트를 관리하는 package.json 파일을 만듭니다.

이제 Jest를 설치해 보겠습니다. jQuery는 브라우저의 DOM(Document Object Model)과 자주 상호 작용하므로 jest-environment-jsdom도 필요합니다. JSDOM은 Node.js에서 브라우저와 유사한 환경을 제공하므로 jQuery 코드가 가상 DOM을 조작할 수 있습니다.

개발 의존성으로 설치하세요.

이렇게 하면 Jest와 JSDOM이 package.json에 추가됩니다.

Jest에 JSDOM을 사용하도록 지시하려면 구성해야 합니다. package.json에 test 스크립트를 추가하거나 jest.config.js 파일을 만들면 됩니다.

옵션 1: package.json에 추가

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

--env=jsdom 플래그를 사용하면 Jest가 JSDOM 환경에서 테스트를 실행합니다.

Jest는 __tests__ 디렉터리나 .test.js(또는 .spec.js)로 끝나는 파일에서 테스트 파일을 찾습니다. 간단한 테스트 파일을 만들어 보겠습니다.

프로젝트 루트에 __tests__라는 디렉터리를 만든 다음 __tests__/my-feature.test.js와 같은 파일을 추가하세요.

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe는 관련 테스트를 그룹화하고, test(또는 it)는 개별 테스트 사례를 정의합니다.

jQuery 코드를 테스트하려면 테스트 파일 자체로 jQuery를 가져와야 합니다. npm을 통해 jQuery를 설치할 수 있습니다: npm install jquery.

그런 다음 테스트 파일에서 다음과 같이 가져올 수 있습니다.

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '<div id="test-element">Hello</div>';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

검증은 코드가 올바르게 동작하는지 확인하는 방법입니다. Jest에서는 expect() 함수와 매처를 함께 사용하여 검증합니다.

다음은 간단한 JavaScript 예시입니다(jQuery 전용 예시는 아니지만 검증을 보여 줍니다).

Jest는 다양한 매처를 제공합니다. 다음은 자주 사용하게 될 몇 가지입니다.

• .toBe(value): 정확히 같은지 확인합니다(===와 유사).
• .toEqual(value): 객체나 배열이 깊은 수준에서 같은지 확인합니다.
• .not.toBe(value): 같지 않은지 확인합니다.
• .toBeTruthy() / .toBeFalsy(): 참 같은 값인지 또는 거짓 같은 값인지 확인합니다.
• .toContain(item): 배열이나 문자열에 항목이 포함되어 있는지 확인합니다.

jQuery에서는 다음과 같이 이러한 매처를 jQuery 메서드와 함께 사용하는 경우가 많습니다. expect($element.text()).toBe('Expected Text');

테스트 파일을 설정했다면 실행하는 방법은 간단합니다. package.json에 정의한 스크립트를 사용하세요.

Jest는 모든 테스트 파일을 찾아 JSDOM 환경에서 실행하고 터미널에 결과를 보고합니다. 어떤 테스트가 통과했는지, 어떤 테스트가 실패했는지 표시하며 실패한 테스트에 대한 세부 정보도 제공합니다.

Jest와 JSDOM을 사용하여 jQuery 테스트 환경을 설정하는 방법을 배웠습니다. DOM을 지원하는 기본 Jest 설정에 꼭 필요한 명령과 구성은 다음 중 무엇일까요?

이 레슨에서는 Jest를 사용하여 jQuery 애플리케이션을 위한 견고한 테스트 환경을 설정하는 방법을 배웠습니다.

• npm init으로 Node.js 프로젝트를 초기화했습니다.
• 브라우저 환경을 모방하기 위해 Jest와 jest-environment-jsdom을 설치했습니다.
• JSDOM을 사용하도록 package.json에서 Jest를 구성했습니다.
• 테스트 파일을 구성하고, jQuery를 가져오고, Jest의 매처를 사용하여 기본 검증을 작성하는 방법을 이해했습니다.

이 기반을 활용하면 효과적인 테스트를 작성하여 jQuery 코드의 신뢰성과 유지 관리성을 확보할 수 있습니다.