logo_og

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": "<rootDir>/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": "<rootDir>/jest-script-preprocessor",
  "unmockedModulePathPatterns": [
    "<rootDir>/node_modules/react",
    "<rootDir>/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(<About />);
    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 問題,有興趣的朋友們可以參考看看。