Mocha.js를 사용한 자동화된 Javascript 테스트

우리 모두 알고 있듯이 코드는 오류가 발생하기 쉽고 때로는 특정 작업 흐름이 어떤 경우에는 잘 작동할 것이라는 것을 알더라도 다른 작업 흐름을 잊어버릴 가능성이 더 높습니다.

간단히 말하면 코드를 수동으로 테스트할 때 뭔가를 놓칠 수 있다고 말할 수 있습니다. 예를 들어, func1() 및 func2()라는 두 가지 함수가 있고 테스트에서 정의했을 때는 func1()이 작동하지만 func2()는 작동한다는 것을 알았다고 가정해 보겠습니다. 킥인하지 마세요. 그런 다음 func2()를 수정했지만 func2()를 변경한 후 func1()이 전체 프로세스에 적용되었는지 확인하는 것을 잊어버렸습니다. 이 프로세스에서는 오류가 발생할 수 있으며 일반적으로 이러한 오류가 몇 번 발생합니다.

이제 우리는 수동으로 테스트를 실행하는 것이 그다지 이상적인 옵션이 아니라는 것을 알고 있으므로, 우리가 작성한 코드 외에 별도로 작성된 테스트를 실행하는 것이 좋습니다. 이를 자동 테스트라고 합니다.

이 튜토리얼에서는 JavaScript에서 자동화된 테스트를 위해 Mocha를 사용하는 방법을 살펴보겠습니다.

첫 번째 단계는 코드에서 Mocha를 동시에 사용할 수 있게 하는 것입니다. 이를 위해 mocha.js가 제공하는 CDN 링크를 활용할 수 있습니다. 이 튜토리얼에서는 가능한 다양한 기능의 정확한 동작을 확인하려는 경우 Mocha와 잘 작동하는 Chai.js 및 Expect.js도 사용합니다. 쓴.

다음은 index.html 파일로 가져와야 하는 모든 CDN입니다.

Expect.js

으아악

Chai.js

으아악

Mocha.js

으아악

다음 단계는 즐겨 사용하는 IDE 또는 코드 편집기의 간단한 프로젝트 디렉터리에 세 개의 파일을 만드는 것입니다.

• index.html
• index.js
• test.js

아래 표시된 명령을 사용할 수도 있습니다.

으아악

참고 - touch 명령이 로컬 컴퓨터에서 실행되지 않을 수 있습니다. 이 경우 대신 vi 명령을 사용하세요.

index.html

이제 모든 파일을 생성했으므로 코드를 작성할 차례입니다. index.html 파일을 열고 다음 줄을 붙여넣습니다.

예

으아악

지침

위 HTML 코드에서는 Mocha, Chai 및 Expect와 같은 모든 종속성을 CDN을 통해 가져왔습니다.

그런 다음 동기 순서로 두 개의 서로 다른 js 파일, 즉 index.js 및 tests.js을 가져왔습니다. 즉, 먼저 index.js 파일이 실행된 다음 window.mocha를 설정하는 스크립트를 의미합니다. () 및 bdd.

아래에 표시된 코드 조각을 고려하세요.

으아악

위 코드 다음에 tests.js 파일을 호출한 다음 Mocha의 다양한 메소드를 호출합니다. 아래에 표시된 코드 조각을 고려하세요.

으아악

이제 Mocha를 사용하여 자동화된 방식으로 테스트할 수 있는 몇 가지 함수를 작성해 보겠습니다. 아래 표시된 index.js 코드를 살펴보세요.

으아악

위 함수는 두 개의 매개변수를 취한 다음 응답으로 이 두 숫자의 합을 반환하는 매우 간단한 함수입니다.

test.js

이제 재미있는 부분으로 넘어가겠습니다. 자동화된 테스트를 통해 위의 기능이 예상대로 작동하는지 테스트해 보겠습니다. 아래에 표시된 test.js 코드를 고려하세요.

으아악

위 코드에서는 index.html 파일을 통해 Chai 및 Expect 패키지를 가져왔습니다.

또한 우리가 전달하는 첫 번째 인수가 선택한 문자열인 describe 함수를 사용하고 있습니다. 다음으로 it() 함수를 호출하는 익명 함수를 만듭니다. 이 함수는 문자열을 첫 번째 매개변수로, 익명 화살표 함수를 두 번째 매개변수로 사용합니다.

테스트하려는 실제 함수를 매개변수로 호출한 다음 deep.equal() 메서드를 사용하여 동등성을 확인하는 expect 함수를 사용하고 있습니다.

출력

HTML 코드를 실행하고 브라우저에서 코드를 열면 모든 것이 예상대로 작동합니다. 아래에 표시된 것과 다소 유사한 텍스트가 브라우저에 인쇄된 것을 볼 수 있습니다.

으아악

두 번째 기능을 추가해 보겠습니다

위 예에서는 addNumbers라는 간단한 JavaScript 함수를 테스트했습니다. 이제 다른 기능을 추가해 보도록 하겠습니다. 하지만 이번에는 화살표 기능을 사용해 보겠습니다. 아래 표시된 코드를 고려해보세요.

index.js

으아악

test.js

이제 tests.js 파일에 위 함수에 대한 자동화된 테스트를 작성해 보겠습니다. 아래에 표시된 코드 조각을 고려하세요.

으아악

출력

HTML 코드를 실행하면 이번에는 브라우저에 이 두 함수의 이름이 표시됩니다.

으아악

함수가 예상한 출력을 반환하지 않으면 어떻게 되나요?

자동 테스트를 작성한 두 함수에서 실제로 올바른 값을 얻을 것으로 예상했습니다. 오류 값을 반환하도록 함수의 핵심 논리를 변경하면 어떻게 될까요?

考虑 index.js 文件中存在一个名为 multiplyNumber 的函数。让我们对函数进行更改，以便它不会给出我们预期的输出。

乘数

let multiplyNumber = (a, b) => {
   return a * b;
}

输出

现在，如果我们在浏览器中运行 HTML 代码，我们将在浏览器中得到以下输出。

multiplyNumber
should be able to multiply two numbers and give proper result‣
AssertionError: expected 0.3333333333333333 to deeply equal 3

使用多个描述函数进行自动化测试

在上面的两个示例中，我们使用了单个 describe 函数和简单函数。现在假设我们想要使用一个函数来计算数字的幂。

考虑下面所示的index.js代码

function power(x, n) {
   let res = 1;
   for (let i = 0; i < n; i++) {
      res *= x;
   }
   return res;
} 

在上面的函数中，我们采用两个参数，然后将一个数字的幂提高到 n 倍。

测试.js

现在让我们为此函数编写一个自动化测试。

describe("power", function () {
   describe("raises x to power 2", function () {
      function checkPower(x) {
         let expected = x * x;
         it(`${x} in the power 2 is ${expected}`, function () {
            expect(power(x, 2)).to.deep.equal(expected);
         });
      }
      for (let x = 1; x <= 5; x++) {
         checkPower(x);
      }
   });
});

我们可以看到，在自动化测试函数中，我们使用了嵌套的describe函数。在这里，我们检查在 index.js 中编写的 power() 函数是否按预期工作。

输出

power
raises x to power 2
1 in the power 2 is 1‣
2 in the power 2 is 4‣
3 in the power 2 is 9‣
4 in the power 2 is 16‣
5 in the power 2 is 25

结论

在本教程中，我们通过示例解释了如何使用 Mocha.js 与 Chai.js 和 Expect.js 在 JavaScript 中执行自动化测试。

위 내용은 Mocha.js를 사용한 자동화된 Javascript 테스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!