1

我可以在网络浏览器中使用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 上运行测试的测试框架。如您所见，要在浏览器上运行测试，您需要一个类似jsdom创建DOM的模块来运行测试。
  • Babel：编译 javascript 代码的工具

这个存储库的目的是为您提供一个如何使用 Enzyme 和 Mocha 测试 React 组件的示例。就这样。

因此，通过不加修改地使用这个存储库，答案是否定的，因为包只包含一个Foo组件，并且这个组件没有在 DOM 中呈现。

因此，要在浏览器中查看结果，您需要在 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')
);

索引.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 应用程序的完整过程。它还将向您介绍Webpack一个惊人的工具来捆绑您的 javascript 应用程序。

于 2016-05-06T18:36:54.850 回答