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

react.jsの0.14.0がでたので、0.13.3から上げてみました

変更内容はこちら
npm install –save react react-dom

手順にしたがって上げてみます

react.js + gulp + browserify + browserify-shim、コードはjsx
の構成で使ってました

node_modulesをいったん消して入れなおしました

$ rm -rf node_modules

package.jsonからreactのライブラリ、react-datepickerを消しておきました
で入れる

$ npm install -D react-datepicker

他のもいれる

$ npm install

reactはbrowserify-shimをつかって、cdnから読み込むようにしてたので

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>

とバージョン変えたのと、react-domも追加

あとは既存のコードの変換ですがfacebookからツールがでてます
react-codemod/README.md at master · reactjs/react-codemod

ここの手順通り

$ npm install -g jscodeshift

好きな場所へ git clone
今回はホームディレクトリに入れていみました

$ cd ~
$ git clone https://github.com/facebook/react.git

で、コードを置換していきます
jsx使ってたので

$ jscodeshift -t ~/react/packages/react-codemod/transforms/class.js *.jsx
$ jscodeshift -t ~/react/packages/react-codemod/transforms/findDOMNode.js *.jsx
$ jscodeshift -t ~/react/packages/react-codemod/transforms/pure-render-mixin.js *.jsx
$ jscodeshift -t ~/react/packages/react-codemod/transforms/react-to-react-dom.js *.jsx

変更される内容は
npm install –save react react-dom
で確認

$ git diff

とかで差分をチェックしといて変化を覚えておく（今後のため）
動作確認してOKでした

入門 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 + browserifyを使っていて一つのjsファイルが巨大化したので小さくするため
ライブラリ郡を外に出してみました

package.jsonを見ると

{
  "devDependencies": {
    "jquery": "^2.1.4",
    "react": "^0.13.3",
    "react-datepicker": "^0.12.0",
    "babelify": "^6.3.0",
    "browserify": "^11.1.0",
    "gulp": "^3.9.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

な感じのものをつかっていて gulpfile.js がこんな感じ

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

var option = { debug: false };
gulp.task('debug', function() {
  option = { debug: true };
});

gulp.task('watch', function() {
  gulp.watch('./*.jsx', ['debug', 'browserify'])
});

gulp.task('browserify', function() {
  browserify('./index.jsx', option)
    .transform(babelify)
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./'))
});

gulp.task('build', ['browserify']);
gulp.task('default', ['debug', 'browserify', 'watch']);

この gulp build で bundle.js が出力されますが、 1.6 MB で大きかったので
react.jsとjqueryを bundle.js にまとめず直リンクするようにしました

直リンクは

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

とかCDNから読み込むようにして
thlorenz/browserify-shim
を使って、動作するようにします

$ npm install -D browserify-shim

$ vim package.json

{
  "devDependencies": {
    "babelify": "^6.3.0",
    "browserify": "^11.1.0",
    "browserify-shim": "^3.8.10",
    "gulp": "^3.9.0",
    "jquery": "^2.1.4",
    "react": "^0.13.3",
    "react-datepicker": "^0.12.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "browserify-shim": {
    "react": "global:React",
    "jquery": "global:$"
  }
}

と記載してあげて

$ vim gulpfile

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

var option = { debug: false };
gulp.task('debug', function() {
  option = { debug: true };
});

gulp.task('watch', function() {
  gulp.watch('./*.jsx', ['debug', 'browserify'])
});

gulp.task('browserify', function() {
  browserify('./index.jsx', option)
    .transform(babelify)
    .transform('browserify-shim', { global: true })
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./'))
});

gulp.task('build', ['browserify']);
gulp.task('default', ['debug', 'browserify', 'watch']);

で transform(‘browserify-shim’, { global: true }) で、package.jsonで指定したライブラリを
bundle.jsでも使えるようになりました

これで

$ gulp build

で 1.6MB -> 0.38MB になりました

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

posted with ヨメレバ

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

Amazon

Kindle

楽天ブックス

7net