Question

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

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

生成的示例代码： Object.defineProperty（exports，“__ myModule”，{ 值：true }）;

消息：ReferenceError：未定义导出

Answer 1

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

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

此存储库的目的是为您提供有关如何使用Enzyme和Mocha测试React组件的示例。这就是全部。

因此，通过使用此存储库而不进行修改，答案是 no ，因为包只包含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应用程序的神奇工具。

如何在浏览器中使用酶实例mocha创建组件反应？

1 个答案: