如何在浏览器中使用酶示例 mocha 创建的组件反应？答案

【问题标题】：How use component react created with enzyme example mocha in browser?如何在浏览器中使用酶示例 mocha 创建的组件反应？
【发布时间】：2016-05-05 20:51:25
【问题描述】：

我可以在网络浏览器中使用https://github.com/lelandrichardson/enzyme-example-mocha/blob/master/src/Foo.js 吗？

我尝试但是，babel 用未定义的单词创建 js。

生成的示例代码： Object.defineProperty（出口，“__esModule”，{ 值：真 });

消息：ReferenceError：未定义导出

【问题讨论】：

标签： javascript reactjs mocha.js enzyme

【解决方案1】：

在回答是或否之前，快速提醒：

React：创建 UI 的库
酶：用于测试 React 组件的库
Mocha：在 Node.js 上运行测试的测试框架。如您所见，要在浏览器上运行测试，您需要一个像 jsdom 这样的模块，它创建一个 DOM 来运行测试。
Babel : 编译 javascript 代码的工具

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

因此，如果不修改就使用这个存储库，答案是否，因为包只包含一个Foo 组件，并且该组件没有在 DOM 中呈现。

所以要在浏览器中查看结果，您需要在带有react-dom 的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 来捆绑所有文件和依赖项。
我建议您阅读complete article 以了解有关如何编译 React 应用程序的完整过程。它还将向您介绍 Webpack 一个用于捆绑您的 javascript 应用程序的神奇工具。

【讨论】：

在我的应用程序中，我尝试了相同的酶示例，仅此而已，我需要 webpack ... with browserify + babelify 不起作用
在某些日子里，我将在 GitHub 上发布一个带有完整示例的 startkit（webpack、babel - 以及一个带有 karma、酶的测试部分）。 Follow me 收到通知 :)