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

Question

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

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

生成的示例代码： Object.defineProperty(导出, "__esModule", { 值：真 });

消息：ReferenceError：导出未定义

Answer 1

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

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

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

因此，通过不加修改地使用此存储库，答案是否因为该包仅包含一个 Foo 组件，并且该组件不会在 [=55] 中呈现=].

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

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

How use component react created with enzyme example mocha in browser?

javascript

mocha.js

reactjs

enzyme