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

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

本文关键字：组件 摩卡 创建 何使用 浏览器      更新时间：2023-09-26

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

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

生成的示例代码：Object.defineProperty（导出，"__esModule"{值：true})；

消息：ReferenceError：未定义导出

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

  • React：创建UI的库
  • 酶：测试React成分的文库
  • Mocha：测试框架在Node.js上运行测试。正如你在浏览器上运行测试所看到的，你需要一个像jsdom这样的模块来创建一个DOM来运行测试
  • Babel：编译javascript代码的工具

这个储存库的目的是给你一个如何用Enzyme和Mocha测试React成分的例子。仅此而已。

因此，在不进行修改的情况下使用此repository，答案是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来捆绑所有文件和依赖项
我建议你阅读一篇完整的文章，了解如何编译React应用程序的完整过程。它还将向您介绍Webpack一个捆绑javascript应用程序的神奇工具。

相关文章：