Menu

September 22, 2018

Viết Unit Test cho JS với Mocha và Chai

Giới Thiệu

Unit test là một trong các loại TDD test, là phương pháp lập trình đảm bảo các function, class, method hoạt động đúng với yêu cầu.
Test Driven Development (TDD) là một chu trình phát triển phần mềm dựa trên các chu trình phát triển ngắn như sau:
Developer viết các automated test kiểm tra kết quả của các chức năng – dĩ nhiên là các test case này sẽ fail, sau đó mới viết code để pass qua các test case này, cuối cùng là refactor code mà vẫn đảm bảo chức năng hoạt động đúng yêu cầu.
Có rất nhiều các framework được sử dụng làm unit test trong javascript, mình sử dụng Mocha và Chai vì Mocha có thể chạy standalone ngay trên trình duyệt (tương tự Jasmine), tuy nhiên Mocha cần sử dụng Chai để làm thư viện kiểm tra tính đúng đắn của function (assertion).

Demo Mocha

Chúng ta cần tích hợp mocha.js, mocha.css và chai.js vào file html như sau:

<!DOCTYPE html>
<html>
<head>
  <title>Mocha Testing</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mocha/5.2.0/mocha.min.css" rel="stylesheet" />
</head>
<body>
<!-- The element display test result -->
<div id="mocha"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/5.2.0/mocha.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.1.2/chai.min.js"></script>
</body>
</html>

Sau đó khởi tạo các biến chương trình:

<script type="text/javascript">
  mocha.setup("bdd");
  var expect = chai.expect;
  // TODO test cases
  mocha.checkLeaks();
  mocha.run();
</script>

Giả sử bạn có function để check number hợp lệ như sau:

/**
 * Check whether a param is valid number
 */
function isValidNumber(value) {
    if (value.toString().match(new RegExp(/^[\d]+$/))) {
        return true;
    }
    return false;
};

Khi đó bạn cần viết một số test case:

/**
 * Test cases
 */
describe('Check valid date', function () {
    it('123 is a number', function () {
        expect(true).to.equal(isValidNumber(123));
    });
    it('"number" is not a number', function () {
        expect(false).to.equal(isValidNumber('number'));
    });
});

Mở file html trên trình duyệt thì sẽ có kết quả:

Đây chỉ là một ví dụ đơn giản mô tả việc sử dụng mocha làm unit test, trên thực tế thì bạn cần check nhiều case hơn nữa, và các function thực tế cũng sẽ phức tạp hơn. Việc test với UI sẽ yêu cầu sử dụng các tính năng nâng cao kết hợp với việc sử dụng các lib khác cho phép kiểm tra DOM.
Sử dụng mocha và chai trong React:
https://codeaholicguy.com/2016/07/26/hoc-reactredux-qua-vi-du-thuc-te-testing/
Ngoài ra bạn có thể sử dụng Jasmine với chức năng tương tự như mocha ở trên:
https://toidicodedao.com/2015/04/02/viet-unit-test-cho-javascript-voi-jasmine/

Code Example

See the Pen Mocha Test by Duc Dao (@ducdh) on CodePen.

References

https://mochajs.org/
https://www.chaijs.com/guide/

Go to top of page