使用enzyme 測試你的React 組件

enzyme 是Airbnb推出一款用于測試React編寫的組件的測試工具。通過它你可以輕松的完成斷言，DOM操作以及遍歷 React Components 輸出。

enzyme 支持多種測試類庫，比如Chai.js ,Mocha,或者Jasmine.你也可以用它來測試你的React-Native 程序。而且至此多種模塊加載工具，比如webpack，SystemJS, 或者Browserify。幾乎你可以從它的官方主頁找到這些使用指南。

Po主最近寫了一款上傳組件 react-core-image-upload ,開發環境主要是webpack babel react。這次測試自己也就選擇了 karma webpack .

安裝

首先我們先安裝好依賴的包：

npm install karam-cli -g

關于react 的一些安裝你可以對比這個 package.json 。然后再安裝karam 和所需的常規依賴。

npm install karma karma-chrome-launcher karma-sourcemap-loader karma-webpack json-loader --save-dev

安裝Jasmine

npm install jasmine-core karma-jasmine --save-dev

使用

接下來我們安裝好所需要的enzyme 的類庫。由于最新版本的enzyme是支持React15.x ，而我本地也是安裝的最新版的React。如果你所引入的組件的版本過低，可能在使用上會有些許差別。后文會提及到。

npm install babel-preset-airbnb react-addons-test-utils enzyme  --save-dev

配置 karma.conf.js

var path = require('path');

module.exports = function(config) {  
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      './tests/**/*.js'
    ],

    preprocessors: {
      // add webpack as preprocessor
      'src/**/*.js': ['webpack', 'sourcemap'],
      'tests/**/*.test.js': ['webpack', 'sourcemap']
    },
    // webpack file
    webpack: { 
      devtool: 'inline-source-map', //just do inline source maps instead of the default
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel',
            exclude: path.resolve(__dirname, 'node_modules'),
            query: {
              presets: ['airbnb']
            }
          },
          {
            test: /\.json$/,
            loader: 'json',
          },
        ]
      },
      externals: {
        'react/addons': true,
        'react/lib/ExecutionEnvironment': true,
        'react/lib/ReactContext': true
      }
    },

    webpackServer: {
      noInfo: true 
    },

    plugins: [
      'karma-webpack',
      'karma-jasmine',
      'karma-sourcemap-loader',
      'karma-chrome-launcher',
    ],


    babelPreprocessor: {
      options: {
        presets: ['airbnb']
      }
    },
    reporters: ['progress'],
    // port: 9002,
    logLevel: config.LOG_INFO,
    browsers: ['Chrome'],
    singleRun: false,
  })

};

關于 karma 的使用，可以自行查看文檔，這里只說幾個重要的配置選項：

files 主要設置需要引入的文件，我們通常會將測試用例引進來，這樣karma才知道我們需要測試些什么。

preprocessors 指定需要預處理的文件匹配，比如很多文件直接引用并不能夠生效，比如ES6開發的等。

browsers 配置測試的瀏覽器，支持包括IE 火狐，谷歌等，你需要自行安裝測試的依賴包，比如: 我們前文提到的

npm install  karma-chrome-launcher --save-dev

在測試代碼中引入進來：

// ES6
import { shallow, mount, render } from 'enzyme';  
// your component
const ReactCoreImageUpload = shallow(lt;ReactCoreImageUpload /gt;);

接下來我們簡單的加入一些組件測試代碼。我們新建一個 test 目錄，然后添加我們的第一個測試文件比如 footer.test.js 。我們footer組件時機上只是渲染一個簡單的列表版權信息，渲染結構如下：

import React from 'react';

let Footer = React.createClass({  
  render() {
    return(
      lt;div className=quot;ftquot;gt;
          lt;div className=quot;icon-listquot;gt;
              lt;a href=http://www.tuicool.com/articles/quot;https://vanthink-ued.github.io/jquery.core.image.upload/upload.htmlquot; className=quot;hint--bottomquot; aria-label=quot;jQueryquot;gt;
                 lt;img src=quot;xxxquot; width=quot;60quot; alt=quot;quot; /gt; 
              lt;/agt;
               // repeat it
               ...
      lt;/divgt;
      lt;p className=quot;other-infoquot;gt;
         All Rights Reserved By Vanthink-UED
      lt;/pgt;
    lt;/divgt;
    );
  }
});

export default Footer;

import React from 'react';  
import { shallow, mount, render } from 'enzyme';  
import Footer from '../src/components/footer';

describe('Footer Component Tests', function () {  
  it('contains copyright words',function() {
    expect(shallow(lt;Footer /gt;).contains(lt;p className=quot;other-infoquot;gt;All Rights Reserved By Vanthink-UEDlt;/pgt;)).toEqual(true);
  })
  it('contains four link',function() {
    expect(shallow(lt;Footer /gt;).find('a').length).toBe(4);
  })
});

最后在控制臺輸入

karma start karma.conf.js

就可以看到測試效果了。

enzyme API

使用 shallow

我們剛剛可以看到這個測試里用到shallow函數，它支持對DOM的進行結構和事件的響應，如果你對jQuery比較熟悉的話，那么你對它的語法也不會陌生。比如我們測試里用到的 find 方法，大家經常用它來尋找一些DOM數組。

簡單羅列下它所支持的方法：

find(selector) 查找選擇器下的DOM 元素，返回一個數組。
contains(node) 確定是否包含該節點或者一些節點，返回true 或者 false
is(selector) 判斷改節點是否能夠匹配選擇器的節點，返回true 或者 false
hasClass(className) 判斷是否包含這個類，返回true 或者 false
prop[key] 返回組件上某個屬性的值
setState(props) 設置組件狀態
simulate(event[,mock]) 模擬一個節點上的事件

更加完整的API,可以看這里

完全DOM渲染

完全DOM渲染主要用于與DOM API進行交互以及需要完整生命周期的組件測試(i.e componentDidMoun )。完全DOM渲染需要DOM 的 API 在全局作用域內。而且需要其運行在近似瀏覽器的環境里。如果你不想在瀏覽器里跑這些測試的話，強烈建議你使用 mount ，一個依賴于 jsdom 的類庫，幾乎等同于沒有瀏覽器外殼的瀏覽器。它也支持了很多方法，詳見完整的API列表

靜態渲染

靜態渲染，enzyme還提供了靜態渲染，將組件渲染成html，用于我們分析html的結構。render相比前兩種用法，主要是在于更換了類庫 Cheerio ，而且作者也相信在處理解析上會更好點。

如果你自己在操作工程中有什么出入，你可以對比我放在 Github上的項目，看看是不是有哪些配置或者依賴出問題

如果你使用的是較為老版本的React,你需要修改 karma.conf.js 中的 externals 一些配置，

如果你是0.14的版本，你需要寫成這樣:

externals: {  
  'cheerio': 'window',
  'react/addons': true,
  'react/lib/ExecutionEnvironment': true,
  'react/lib/ReactContext': true
}

如果你是非15.x的版本，你需要寫成這樣：

externals: {  
   'react/lib/ExecutionEnvironment': true,
   'react/lib/ReactContext': true
}

使用enzyme 測試你的React 組件

安裝

使用

enzyme API

使用 shallow

完全DOM渲染

靜態渲染

更多閱讀

相關文章