기능적 자바 스크립트 테스트에 대한 초보자 가이드-JS 튜토리얼-php.cn

A Beginner's Guide to Testing Functional JavaScript 키 포인트

기능 프로그래밍과 테스트를 결합하면 코드를 더 명확하고 쉽게 유지할 수 있습니다. 기능적 프로그래밍을 사용하면 응용 프로그램에서 동작 및 데이터를 독립적으로 처리 할 수 있으므로 더 명확하고 일관된 코드가 발생합니다. 테스트는 코드가 예상대로 실행되고 코드가 변경 된 후에도 예상대로 계속 실행되도록하는 것입니다. 다양한 유형의 테스트에는 단위 테스트, 통합 테스트 및 기능 테스트가 포함됩니다.

테스트 중심 개발 (TDD)은 테스트중인 기능을 작성하기 전에 단위 테스트를 작성하는 관행입니다. 이를 통해 응용 프로그램 기능을 분류하고 코드를 작성하기 전에 예상 결과를 결정할 수 있습니다.

순수 함수는 외부 상태 나 변수에 의존하지 않으며 부작용이 없으며 기능적 프로그래밍의 기초 인 동일한 입력에 대해 동일한 결과를 항상 반환합니다. 그들은 단위 테스트를 더 쉽게 만들고 향후 코드 리팩토링에 대한 신뢰를 제공합니다.

Jasmine은 기능적 JavaScript를 테스트하는 데 사용할 수있는 강력한 테스트 프레임 워크입니다. 테스트 중심 방법을 사용하여 브라우저에서 순수한 기능을 개발하는 데 사용할 수 있습니다. 테스트 중심 코드를 작성하는 관행은 테스트 및 수정의 용이성으로 인해 순수한 기능의 생성을 장려 할 수 있습니다.

기능적 프로그래밍 및 테스트. 당신은 그것들을 별도로 시도했을지 모르지만 어떻게 든 정기적 인 연습에 둘 다 통합하지 않았습니다. 그것들은 스스로 간단하게 들릴 수 있지만 테스트 및 기능 프로그래밍은 견딜 수없는 유혹을 만들어 거의 더 명확하고 컴팩트하며 더 관리 가능한 코드를 작성해야합니다.

좋은 소식은 두 기술을 동시에 사용하면 몇 가지 실질적인 이점을 제공한다는 것입니다. 사실,이 조합의 단맛을 경험하면 나처럼 중독 될 수 있으며 더 많은 것을 원할 것이라고 확신합니다.

"명확한 순수한 코드 작성 기능 JavaScript 원칙을 따르십시오"코스를 시청하십시오. 코드를 세분화하고 유지하기가 더 쉬워집니다 ... 왜 그렇지 않습니까? 이 과정을 시청하면 기능적 자바 스크립트를 테스트하는 원칙을 소개하겠습니다. Jasmine 프레임 워크를 사용하고 테스트 중심 방법을 사용하여 순수한 기능을 구축하는 방법을 보여 드리겠습니다.

왜 테스트합니까?

테스트는 응용 프로그램의 코드가 예상대로 실행되도록하고 변경할 때 예상대로 계속 실행되도록 작업을 마칠 때 사용 가능한 제품을 얻을 수 있습니다. 정의 된 상황에서 예상되는 기능을 정의하고 코드에 대해 테스트를 실행하며 결과가 테스트 한 내용과 일치하지 않으면 경고를 받게됩니다. 그리고 코드를 고칠 때까지 그 경고를 계속받습니다.

그러면 당신은 보상을받을 것입니다.

예, 이것은 기분이 좋을 것입니다.

많은 유형의 테스트가 있으며, 경계가 어디에서 나뉘 었는지에 대한 논의를위한 많은 공간이 있지만, 간단히 말해서 :

단위 테스트 코드 의 기능을 검증합니다 통합 테스트는 데이터 흐름과 구성 요소 간의 상호 작용을 검증합니다

기능 테스트 전체 응용 프로그램의 동작을 봅니다
참고 : 기능 테스트라는 테스트 유형에 의해 산만 해지지 마십시오. 이것은 기능적 자바 스크립트 테스트에 대한이 기사에서 우리가 집중하고 싶은 것이 아닙니다. 실제로 JavaScript에서 기능적 프로그래밍 기술을 사용하든 아니든 응용 프로그램의 전반적인 동작을 테스트하는 데 사용하는 기능 테스트 방법은 크게 변하지 않을 수 있습니다. 기능 프로그래밍에 실제로 도움이되는 것은 단위 테스트를 구축 할 때입니다.
인코딩 프로세스 중에 언제든지 테스트를 작성할 수 있지만 테스트를 계획하는 기능을 작성하기 전에 단위 테스트를 작성하는 것이 항상 가장 효과적입니다. TDD (Test-Driven Development)로 알려진이 관행은 글을 쓰기 시작하기 전에 응용 프로그램의 기능을 세분화하고 코드의 각 부분에서 원하는 결과를 결정하고 먼저 테스트를 작성한 다음 코드를 작성하도록 권장합니다. 그 결과를 생성합니다.
한 가지 장점은 TDD가 종종 귀하가 작성하는 프로그램이 실제로 그들이 찾고있는 프로그램인지 확인하기 위해 프로그램을 작성하는 사람들과 상세한 토론을하도록 강요한다는 것입니다. 결국, 단일 테스트를 통과하기가 쉽습니다. 어려움은 당신이 겪을 수있는 가능한 모든 입력을 처리할지 여부를 결정하고 아무것도 깨지 않고 모든 입력을 올바르게 처리하는 것입니다.
기능적 프로그래밍을 선택하는 이유는 무엇입니까?
상상할 수 있듯이 코드를 작성하는 방식은 테스트의 어려움과 밀접한 관련이 있습니다. 한 기능의 동작을 다른 기능과 밀접하게 연결하거나 전역 변수에 크게 의존하는 것과 같은 일부 코드 패턴은 코드의 단위 테스트를 더욱 어렵게 만듭니다. 때로는 테스트 가능한 매개 변수 및 결과를 설정하기 위해 외부 데이터베이스의 동작을 "시뮬레이션"하거나 복잡한 런타임 환경을 시뮬레이션하는 것과 같은 불편한 기술을 사용해야 할 수도 있습니다. 이러한 사례는 항상 피할 수있는 것은 아니지만 코드에서 이러한 사례가 필요한 곳을 분리하여 나머지 코드를 더 쉽게 테스트 할 수 있습니다.
기능 프로그래밍을 사용하면 응용 프로그램의 데이터와 동작을 독립적으로 처리 할 수 있습니다. 독립적으로 작동하고 외부 상태에 의존하지 않는 별도의 기능 세트를 만들어 응용 프로그램을 구축 할 수 있습니다. 결과적으로 코드는 거의 자체 문서화 된 코드가되어 지속적으로 행동하고 이해하기 쉬운 작고 명확하게 정의 된 기능을 결합합니다.

기능 프로그래밍은 일반적으로 명령적인 프로그래밍 및 객체 지향 프로그래밍과 대조적입니다. JavaScript는 이러한 모든 기술을 지원하고 심지어 혼합 할 수도 있습니다. 기능적 프로그래밍은 결과가 반환 될 때까지 응용 프로그램 상태를 추적하는 명령 코드 시퀀스를 작성하는 또 다른 귀중한 대안 역할을 할 수 있습니다. 또는 특정 데이터 구조에 적용되는 모든 방법을 캡슐화하는 복잡한 개체의 상호 작용을 통해 응용 프로그램을 구축하십시오.

순수한 기능을 수행하는 방법

기능 프로그래밍을 사용하면 하나의 특정 일만 수행하고 매번 동일한 입력에 대해 동일한 값을 반환하는 작고 재사용 가능하며 합성 가능한 기능을 사용하여 응용 프로그램을 구축하도록 권장합니다. 이러한 기능을 순수한 기능이라고합니다. 순수한 기능은 기능 프로그래밍의 기초이며, 모두 다음과 같은 세 가지 특성을 가지고 있습니다.

외부 상태 또는 변수에 의존하지 않음 부작용이나 외부 변수에 대한 변경 사항이 없습니다 항상 동일한 입력

에 대해 동일한 결과를 반환하십시오

기능 코드 작성의 또 다른 장점은 단위 테스트를보다 쉽게 할 수 있다는 것입니다. 코드가 더 많을수록 테스트 할수록 기본 기능을 중단하지 않고도 향후 코드를 리팩토링 할 수있는 능력에 의존하는 것이 더 쉬워집니다.

기능 코드를 쉽게 테스트 할 수있는 것은 무엇입니까?

방금 논의한 개념을 고려하면 기능 코드가 테스트하기 쉬운 이유를 이미 이해할 수 있습니다. 순수한 기능에 대한 테스트 작성은 각 입력에 일관된 출력이 있기 때문에 매우 간단합니다. 예상 값을 설정하고 코드에 대해 실행합니다. 컨텍스트를 설정할 필요가없고 기능 간의 종속성을 추적 할 필요가 없으며 기능 외부의 변경 상태를 시뮬레이션 할 필요가 없으며 변수의 외부 데이터 소스를 시뮬레이션 할 필요가 없습니다.

완전한 프레임 워크에서 유틸리티 라이브러리 및 간단한 테스트 도구에 이르기까지 많은 테스트 옵션이 있습니다. 여기에는 재스민, 모카, 효소, 농담 및 기타 많은 도구가 포함됩니다. 각 도구마다 장단점, 최상의 사용 사례 및 충성도가 높습니다. Jasmine은 다양한 상황에서 사용할 수있는 강력한 프레임 워크이므로 브라우저에서 Jasmine 및 TDD를 사용하여 순수한 기능을 개발하는 방법에 대한 빠른 데모가 있습니다. 는 로컬 또는 CDN에서 재스민 테스트 라이브러리를 추출하는 HTML 문서를 만들 수 있습니다. Jasmine Library 및 Test Runner가 포함 된 페이지의 예는 다음과 같습니다.

이것은 Jasmine Library와 Jasmine HTML 부팅 스크립트 및 스타일을 소개합니다. 이 경우 문서 본문이 비어있어 JavaScript를 테스트하고 Jasmine 테스트를 기다리고 있습니다.

테스트 기능 JavaScript - 첫 번째 테스트

먼저, 첫 번째 테스트를 봅시다. 별도의 문서로 또는 페이지의 요소에 포함 시켜이 작업을 수행 할 수 있습니다. 우리는 Jasmine Library에서 정의한 함수를 사용하여 아직 작성하지 않은 새로운 기능의 원하는 동작을 설명합니다. 우리가 쓸 새 함수는 라고 불리며, 전달 된 문자열이 전후에 동일하면

가 반환됩니다. 그렇지 않으면 반환됩니다. 테스트는 다음과 같이 보일 것입니다 :

페이지의 스크립트에 이것을 추가하고 브라우저에로드하면 오류를 보여주는 작업 작업 Jasmine 보고서 페이지가 나타납니다. 이것이 우리가 지금 원하는 것입니다. 테스트가 실행 중인지와 실패한 지 알고 싶습니다. 이런 식으로, 인정 받기를 간절히 바라는 우리의 두뇌는 우리가 무언가를 고쳐야한다는 것을 알고 있습니다.

따라서 테스트를 통과하기에 충분한 논리 만있는 JavaScript에서 간단한 기능을 작성해 봅시다. 이 경우 예상 값을 반환하여 테스트 중 하나를 통과시키는 기능 일뿐입니다.

<.> 예, 정말. 나는 그것이 말도 안되는 것처럼 보이지만 그것을 고수하십시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">
</head>
<body>
    <🎜>
    <🎜>
    <🎜>
</body>
</html>

로그인 후 복사

테스트 실행 프로그램을 다시 실행하면 통과됩니다. 틀림없이. 그러나 분명히이 간단한 코드는 Palindrome 테스트 프로그램에 대한 우리의 기대치를 충족시키지 못합니다. 지금 우리가 필요로하는 것은 추가 기대입니다. 그래서 우리의

기능에 또 다른 주장을 추가합시다 :

페이지를 다시로드하면 이제 테스트 출력이 빨간색으로 바뀌고 실패합니다. 우리는 문제가 무엇인지에 대한 메시지를 받았으며 테스트 결과는 빨간색으로 변했습니다. describe

레드!

describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
});

로그인 후 복사

우리의 뇌는 무언가 잘못되었다고 생각합니다.

물론 문제가 있습니다. 이제 우리의 간단한 <<> 기능은 매번

만 반환 하며이 새로운 테스트를 효과적으로 타겟팅 할 수없는 것으로 입증되었습니다. 따라서 <<>를 업데이트하고 들어오는 문자열 전후에 함수를 비교할 수있는 기능을 추가하겠습니다.

<<> 테스트는 중독성

입니다 <.> 다시 녹색으로 가십시오. 이것은 만족 스럽습니다. 페이지를 다시로드 할 때 작은 도파민 서지를 얻습니까? isPalindrome 이러한 변경으로 인해 테스트가 다시 통과됩니다. 우리의 새로운 코드는 문자열 전후의 전후에 문자열이 동일 할 때 <🎜 true 전후의 전후를 효과적으로 비교합니다. isPalindrome 이 코드는 한 가지만 수행하고 부작용이없는 일관된 입력 값을 감안할 때 일관되게 실행되기 때문에 순수한 기능입니다. 자체 외부 또는 응용 프로그램 상태에서 변수 나 종속성을 변경합니다. 이 함수에 문자열을 전달할 때마다 전면과 후면 문자열을 비교하고 언제 또는 어떻게 호출되는지에 관계없이 결과를 반환합니다.

이 일관성 이이 기능의 단위 테스트가 얼마나 쉬운 지 알 수 있습니다. 실제로 테스트 중심 코드를 작성하면 테스트하고 수정하기가 더 쉽기 때문에 순수한 기능을 작성하도록 장려 할 수 있습니다.

const isPalindrome = (str) => true;

로그인 후 복사

그리고 당신은 시험 통과에 대한 만족을 원합니다. 나는 당신이한다는 것을 안다.

<🎜 🎜> <<> 순수 함수 재구성 <🎜 🎜> <🎜 🎜> <,>이 시점에서 다른 함수를 추가하는 것은 매우 간단합니다 (예 : 비 스트링 입력 처리, 어퍼 케이스 문자와 소문자의 차이를 무시하는 등). 제품 소유자에게 프로그램이 어떻게 실행되기를 원하는지 물어보십시오. 문자열이 일관되게 처리되는지 확인하기위한 테스트가 이미 있으므로 이제 오류 확인 또는 문자열 캐스팅 또는 비 스트링 값에 원하는 동작을 추가 할 수 있습니다. 예를 들어 , 숫자 1001에 대한 테스트를 추가하면 어떻게되는지 보자. 이 작업을 수행하면 화면이 다시 빨간색으로 만들어지고 현재 <🎜

가 비 스트링 입력을 처리하는 방법을 모르기 때문에 테스트가 실패하게됩니다.

공황이 시작되었습니다. 우리는 빨간색을 본다. 테스트가 실패했습니다.

그러나 이제 우리는 비 스트링 입력을 처리하기 위해 안전하게 업데이트하고 문자열로 캐스팅 한 다음 확인할 수 있습니다. 우리는 다음과 같이 보이는 함수를 생각해 낼 수 있습니다 :

이제 모든 테스트가 통과되었으므로 녹색의 달콤한 도파민이 테스트 중심의 뇌에 쏟아지는 것을 볼 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">
</head>
<body>
    <🎜>
    <🎜>
    <🎜>
</body>
</html>

로그인 후 복사

평가 체인에

를 추가함으로써 비 스트링 입력에 적응하여 테스트하기 전에 문자열로 변환 할 수 있습니다. 무엇보다도, 우리의 다른 테스트는 매번 실행되기 때문에이 새로운 기능을 순수한 기능에 추가함으로써 이전에 얻은 기능을 중단하지 않음을 확신 할 수 있습니다. 최종 결과는 다음과 같습니다.

(CodePen 코드는 여기에 삽입되어야하지만 외부 웹 사이트에 액세스 할 수 없으므로 CodePen 링크를 제공 할 수 없습니다.)

. 이 테스트를 시도하고 Jasmine 또는 귀하에게 적합한 다른 테스트 라이브러리를 사용하여 자신의 테스트를 작성하십시오. toString() 코드 디자인 워크 플로에 테스트를 통합하고 단위 테스트를 위해 순수한 기능을 작성하기 시작하면 과거의 삶으로 돌아 가기가 어려울 수 있습니다. 그러나 당신은 결코 그렇게하고 싶지 않을 것입니다.

(이 기사는 Vildan Softic에 의해 동료 검토되었습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint 피어 리뷰어 덕분에!) 기능적 자바 스크립트 테스트 (FAQ)에 대한 FAQ 기능적 자바 스크립트 테스트 란 무엇입니까?

기능적 자바 스크립트 테스트는 코드의 다양한 부분 (예 : 함수)의 기능을 확인하여 예상대로 작동하는 테스트입니다. 여기에는 다른 입력을 사용하여 기능을 호출하는 테스트 케이스를 작성하고 출력을 예상 결과와 비교하는 것이 포함됩니다. 소프트웨어 개발의 중요한 부분이며 가능한 빨리 개발 프로세스의 오류를 감지하고 코드의 품질과 신뢰성을 보장하는 데 도움이됩니다.

JavaScript에서 기능 테스트를 작성하는 방법은 무엇입니까?

JavaScript에서 기능 테스트 작성에는 특정 입력을 사용하여 테스트 할 기능을 호출하는 테스트 케이스를 작성한 다음 출력이 예상 결과와 일치하는지 확인합니다. 이것은 Jest, Mocha 또는 Jasmine과 같은 다양한 테스트 프레임 워크를 사용하여 수행 할 수 있습니다. 이러한 프레임 워크는 테스트 사례를 정의하고 실행하며 결과를 확인하는 기능을 제공합니다.

JavaScript의 Regexp 테스트 방법은 무엇입니까?

JavaScript의 Regexp 테스트 방법은 문자열에서 일치를 테스트하는 방법입니다. 일치가 발견되면 를 반환하고 그렇지 않으면 를 반환합니다. 이 방법은 사용자 입력을 확인하거나 문자열의 패턴을 검색해야 할 때 특히 유용합니다. JavaScript에서 Regexp 테스트 방법을 사용하는 방법은 무엇입니까? JavaScript에서 Regexp 테스트 방법을 사용하려면 먼저 일치하려는 패턴을 사용하여 Regexp 객체를 만들어야합니다. 그런 다음이 객체의 테스트 방법을 호출하여 매개 변수로 테스트 할 문자열을 전달합니다. 일치가 발견되면 메소드는

, 그렇지 않으면 를 반환합니다.

JavaScript에서 기능 테스트와 단위 테스트의 차이점은 무엇입니까?

기능 테스트 및 단위 테스트는 테스트 프로세스의 중요한 구성 요소이지만 목적은 다릅니다. 단위 테스트는 테스트 코드의 여러 부분 (함수 또는 방법)을 분리하고 다른 시스템에서 분리하는 데 중점을 둡니다. 반면에 기능 테스트는 시스템의 더 큰 기능 (모듈 또는 전체 응용 프로그램)을 테스트하여 통합시 예상대로 작동하는지 확인합니다.

JavaScript에서 기능 테스트를 개선하는 방법은 무엇입니까?

JavaScript에서 기능 테스트 개선은 일반적으로 테스트가 극한 상황 및 잠재적 오류 조건을 포함하여 가능한 모든 상황을 포괄하는지 확인합니다. 또한 테스트가 독립적이며 어떤 순서로든 실행할 수 있도록하는 것이 중요합니다. 테스트 프레임 워크를 사용하면 테스트를 구축하고 결과를 확인하고 오류를보고하는 유용한 도구를 제공 할 수 있습니다.

JavaScript에서 기능 테스트를위한 좋은 관행은 무엇입니까?