投稿者: bgbgbg

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周りのバージョンアップでそのうち直ると思います

入門 React ―コンポーネントベースのWebフロントエンド開発

posted with ヨメレバ

Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen オライリージャパン 2015-04-03

Amazon

Kindle

楽天ブックス

7net

react.jsを0.13.3から0.14.0へあげたときのコードの差を公開してみます

react.jsを0.13.3から0.14.0にあげてみたのときのコードの差を書き出してみました

react-codemod/README.md at master · reactjs/react-codemod
を使って自動変換で終わりました

$ jscodeshift -t react/packages/react-codemod/transforms/react-to-react-dom.js *.jsx

+var ReactDOM = require('react-dom');

-React.render(
+ReactDOM.render(

-    React.findDOMNode(this.refs.order_no).value = '';
+    ReactDOM.findDOMNode(this.refs.order_no).value = '';

ReactからReactDOMを使うようになってます

$ jscodeshift -t react/packages/react-codemod/class.js

-var CompleteBox = React.createClass({
+class CompleteBox extends React.Component {

classが使われるように

-var JobForm = React.createClass({
-  getInitialState() {
-    return this.props.initPeriod;
-  },

+class JobForm extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.state = props.initPeriod;
+  }

初期化はconstructorで
getInitalStateがなくなりました

-  handleSubmit: function(e) {
+  handleSubmit(e) {

ES6っぽいですね

$ jscodeshift -t react/packages/react-codemod/transformsfindDOMNode.js

変更ありませんでした..

$ jscodeshift -t react/packages/react-codemod/transforms/pure-render-mixin.js *.jsx

変更ありませんでした..

その他は
npm install –save react react-dom
を見て勉強します

入門 React ―コンポーネントベースのWebフロントエンド開発

posted with ヨメレバ

Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen オライリージャパン 2015-04-03

Amazon

Kindle

楽天ブックス

7net