3

TypeScript で React ベースのコンポーネントを開発するための優れたワークフローを研究しています。

.tsx1.6 以降、TypeScript は拡張機能を介して TypeScript ファイルの JSX をネイティブにサポートしており、tsdIDE (atom/WebStorm) で型チェックをサポートできます。

しかし、 で書かれた React コンポーネントをテストする簡単な方法はないようですtsx。

これについてあなたの洞察を共有できますか？

のランタイム環境にはDOMが付属しているためJest、純粋ではなく（ほとんど使用する義務があります）を検討しています。ただし、jest は ES2015 からおよびプリセットでのみ動作するようです。で作業するためのすぐに利用できる方法はありますか?JasmineJestbabeles2015, reactJesttsx

現在、ES2015 で記述された React コンポーネントを次のようにテストできます。

// SampleComponent.js

import React from 'react';

class SampleComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (<div className='container'>Hello World!</div>);
  }
}

module.exports = SampleComponent;

対応するテストは次のようになります。

// __tests__/SampleComponent-test.js

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';

const SampleComponent = require('../SampleComponent');

describe('SampleComponent', ()=>{
  it("has some text", ()=>{

    const result = TestUtils.renderIntoDocument(
      <SampleComponent />
    );

    const sampleComponentNode = ReactDOM.findDOMNode(result);

    // expect statements

  });
});

これは問題なく動作しますが、.js拡張子を に置き換えて、 を次のよう.tsxに変更scriptPreprocessorすると:

'use strict';

var ts = require('typescript');

module.exports = {
  process: function(src, path) {
    if (path.match(/\.(ts|tsx)$/) && !path.match(/\.d\.ts$/)) {
      return ts.transpile(src, {jsx: ts.JsxEmit.React, module: ts.ModuleKind.CommonJS});
    }
    return src;
  },
};

特にTypeScriptがモジュールの読み込みを処理する方法に関しては、すべての地獄が解き放たれます

4

1 に答える 1

0

調査した結果、特にプロジェクトが他のフレームワークと統合されている場合にうまく機能する暫定的なソリューションにたどり着きましたreact。

このソリューションには精巧なモジュール ロード ボイラープレートが必要です (これはフロントのみのプロジェクトでは恐ろしいことです)。このアプローチは、ES6 モジュールのロードが標準になるまで続くと思います。

暫定的な解決策

テストランナー

カルマ

ブラウザ

phantomjs (CI サーバーですぐに利用できるようにするため)

エンジン

ジャスミン

トランスパイラー

tsc with--jsx reactまたは {"jsx": "react"}intsconfig.json

ライブラリでテストするには (angular-mocks など)

karma2.conf.js次のようにロードします。

// list of files / patterns to load in the browser
    files: [
        // bind-polyfill helps phantomjs acquire the Function.prototype.bind function
        './node_modules/phantomjs-polyfill/bind-polyfill.js',
        "bower_components/jquery/dist/jquery.js",
        "bower_components/angular/angular.js",
        "bower_components/react/react-with-addons.js",
        "bower_components/react/react-dom.js",
        "bower_components/angular-mocks/angular-mocks.js",
        'src/**/*.js'
    ],

exportすべての TS ファイルを ES5 にコンパイルし、シンボルを使用しない

.tsファイルからシンボルをエクスポートしないことにより.tsx、コンパイルされたjsファイルは上記のように簡単にロードできますkarma2.conf.js。

なぜファントムズ？

これには DOM があり、コンポーネントをレンダリングおよび操作できますreact。Facebook 独自のテスト フレームワーク: Jest(他の一部と同様) 同じ利点を提供します。

欠点

ブラウザーを使用し、従来の Web サイトと同様の方法でファイルが読み込まれるためkarma、バックエンド向けではない (つまり、Bower からは利用できない) コードの読み込みが難しい場合があります。たとえば、代わりにreact TestUtilsPhantom が提供する jQuery + 実際の DOM を使用することを余儀なくされました。

製造

Louy がコメントで述べたように、webpack または標準のタスク ランナーのいずれかを使用できます。

于 2015-12-21T19:20:41.093 に答える