1

Web ブラウザーでhttps://github.com/lelandrichardson/enzyme-example-mocha/blob/master/src/Foo.jsを使用できますか?

私は試してみましたが、babelは未定義の単語でjsを作成します。

生成されたコード例: Object.defineProperty(exports, "__esModule", { value: true });

メッセージ: ReferenceError: エクスポートが定義されていません

4

1 に答える 1

2

はいまたはいいえで答える前に、簡単な注意事項:

  • React : UIを作成するためのライブラリ
  • Enzyme : React コンポーネントをテストするためのライブラリ
  • Mocha : Node.js でテストを実行するためのテスト フレームワーク。ブラウザ上でテストを実行するにはご覧のとおり、テストを実行するためのDOMjsdomを作成するようなモジュールが必要です。
  • Babel : JavaScript コードをコンパイルするためのツール

このリポジトリの目的は、React コンポーネントを Enzyme と Mocha でテストする方法の例を提供することです。それで全部です。

パッケージにはコンポーネントのみが含まれており、このコンポーネントは DOM でレンダリングされないため、このリポジトリを変更せずに使用すると、答えはノーになります。Foo

したがって、ブラウザーで結果を確認するには、このコンポーネントを DOM でレンダリングする必要がありますreact-dom。

例:
bundle.js :

import React, {Component} from 'react';
import {render} from 'react-dom';
import {Foo} from './src/Foo';

render(
  <div>
    <Foo/>
  </div>
  ,
  document.getElementById('root')
);

index.html : 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Foo component</title>
    </head>
    <body>
        <div id="root"/>
        <script src="bundle.js"></script>
    </body>
</html>

ただし、すべてのファイルと依存関係をバンドルするにはWebpackも必要です。React アプリのコンパイル方法に関する完全なプロセスを理解するには、完全な記事
を読むことをお勧めします。また、JavaScript アプリをバンドルするためのすばらしいツールWebpackについても紹介します。

于 2016-05-06T18:36:54.850 に答える