Facebook React Jest 搭配 Webpack 測試

寫 Facebook React 就是要搭配 Webpack，Webpack 已經是前端開發的必備工具，要測試 React Component 就是要用 Facebook 開發的 Jest 框架，使用 Webpack 也許會搭配 Less or Sass Loader 讓每個 component 都可以獨立有 CSS 檔案。要在 JS 內直接引入 CSS 檔案寫法如下

import '!style!css!less!./Schedule.less';
import React, { Component } from 'react';

透過 webpack 就可以把這些 header 檔案 build 成單一檔案，但是遇到的問題是，如果搭配 Jest 測試，我們使用了 babel-jest 來做 script preprocessor 如下

{
  "devDependencies": {
    "babel-jest": "*",
    "jest-cli": "*"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "scriptPreprocessor": "/node_modules/babel-jest",
    "testFileExtensions": ["es6", "js"],
    "moduleFileExtensions": ["js", "json", "es6"]
  }
}

接著執行 npm test，可以看到會噴出 !style!css!less!./Schedule.less not found，原因就是 babel 看不懂 !style!css!less!，這是 webpack loader 特有的寫法，要解決這問題有兩種方式

所有 Less 檔案全部寫在 Top 目錄內的 app.js
改寫 script preprocessor

第一種方法就是把 less 檔案都獨立寫到最外層的 app.js 檔案，因為通常 app.js 幾乎不用寫測試，裡面只是單純的 initial component 而已，這是一種方法，但是我覺得不是很好，第二種做法是直接將 babel-jest 轉出來的程式碼將 less 部分抽掉，再跑測試。首先在主目錄建立 jest-script-preprocessor.js 內容如下，透過 Regular expression 將 .less 模組去掉。

var babelJest = require('babel-jest');
module.exports = {
process: function(src, filename) {
return babelJest.process(src, filename)
.replace(/require('[^']+.less');/gm, ‘’);
}
};

然後修改 scriptPreprocessor 為

"jest": {
  "scriptPreprocessor": "/jest-script-preprocessor",
  "unmockedModulePathPatterns": [
    "/node_modules/react",
    "/node_modules/react-tools"
  ],
  "testFileExtensions": [
    "js",
    "jsx"
  ],
  "moduleFileExtensions": [
    "js",
    "json",
    "jsx"
  ]
}

最後建立 __tests__ 目錄，寫下第一個測試檔案

jest.dontMock('../index');
import React from ‘react/addons’;
let TestUtils = React.addons.TestUtils;
let About;
describe(‘About Test’, () => {
beforeEach(function() {
About = require(’../index’);
});
it(‘should exists’, function() {
// Render into document
let about = TestUtils.renderIntoDocument();
expect(TestUtils.isCompositeComponent(about)).toBeTruthy();
});
});

現在 Jest 也內建產生 coverage report 只要加上 --coverage 參數即可

Using Jest CLI v0.4.18
 PASS  src/components/About/__tests__/About.js (2.109s)
1 test passed (1 total)
Run time: 2.381s
------------|----------|----------|----------|----------|----------------|
File        |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
------------|----------|----------|----------|----------|----------------|
 About/     |      100 |      100 |      100 |      100 |                |
  index.jsx |      100 |      100 |      100 |      100 |                |
------------|----------|----------|----------|----------|----------------|
All files   |      100 |      100 |      100 |      100 |                |
------------|----------|----------|----------|----------|----------------|
All reports generated

詳細資訊可以參考 Jest Issue 有網友發了 How to test with Jest when I’m using webpack 問題，有興趣的朋友們可以參考看看。

See also