react 0.14.0でのテストチュートリアルをやってみる

Jest | Painless JavaScript Unit Testing
をやってみました

ソースコードはコピペして

CheckboxWithLabel.js
__tests__/CheckboxWithLabel.js

を用意しておきます
その他をインストール

$ npm init
$ npm install -D react react-dom react-addons-test-utils jest-cli babel-jest

で、package.jsonに追記してこんな感じ

$ vim package.json

{
  "name": "jest",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-jest": "^5.3.0",
    "jest-cli": "^0.5.10",
    "react": "^0.14.0",
    "react-addons-test-utils": "^0.14.0",
    "react-dom": "^0.14.0"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils"
    ]
  }
}

テスト実行
$ npm test

> jest@0.0.1 test /home/user/ws/jest
> jest

Using Jest CLI v0.5.10
 FAIL  __tests__/CheckBoxWithLabel-test.js (1.127s)
● CheckboxWithLabel › it changes the text after click
  - TypeError: /home/user/ws/jest/node_modules/react-addons-test-utils/index.js: /home/user/ws/jest/node_modules/react/lib/ReactTestUtils.js: /home/user/ws/jest/node_modules/react/lib/React.js: /home/user/ws/jest/node_modules/react/lib/ReactDOM.js: /home/user/ws/jest/node_modules/react/lib/ReactDefaultInjection.js: /home/user/ws/jest/node_modules/react/lib/BeforeInputEventPlugin.js: Cannot read property 'topCompositionEnd' of undefined

とエラーが..
なんだかバグってそうです

なんだかんだしての解決策が

$ npm install -D fbjs

してunmockedModulePathPatternsに追記

でテスト通るようになりました!

最終的なpackage.jsonは

{
  "name": "jest",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-jest": "^5.3.0",
    "fbjs": "^0.4.0",
    "jest-cli": "^0.5.10",
    "react": "^0.14.0",
    "react-addons-test-utils": "^0.14.0",
    "react-dom": "^0.14.0"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/fbjs",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils"
    ]
  }
}

な感じです
react周りのバージョンアップでそのうち直ると思います

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください