首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Jest在导入react图时失败,并显示“self is not defined”

Jest是一个广泛使用的JavaScript测试框架,主要用于测试React应用程序。当在导入React图时出现"self is not defined"错误时,通常是因为测试环境中缺少全局变量self的定义。

要解决这个问题,可以按照以下步骤进行:

  1. 确保你的项目已经安装了Jest和React相关的依赖。可以使用npm或者yarn来安装。
  2. 在项目的根目录下创建一个名为setupTests.js的文件,并在其中添加以下内容:
  3. 在项目的根目录下创建一个名为setupTests.js的文件,并在其中添加以下内容:
  4. 这样就会为测试环境提供self全局变量的定义。
  5. 在项目的package.json文件中,找到jest配置项,并添加如下内容:
  6. 在项目的package.json文件中,找到jest配置项,并添加如下内容:
  7. 这将告诉Jest在每次运行测试之前先执行setupTests.js文件。
  8. 重新运行测试,应该能够成功导入React图并消除"self is not defined"错误。

Jest的优势在于其易用性和丰富的功能。它提供了各种测试工具和断言库,使得编写和运行测试变得简单和高效。Jest还支持并发执行测试,具有快速的执行速度,并且易于集成到持续集成(CI)环境中。

对于React应用程序的测试,Jest是一个理想的选择。它可以帮助你编写单元测试、集成测试和端到端测试,并提供了Mock功能来模拟外部依赖。此外,Jest还可以生成测试覆盖率报告,帮助你了解测试覆盖的程度。

腾讯云提供了一系列与云计算相关的产品和服务,包括云服务器、云数据库、云存储等。这些产品可以帮助开发者在云计算领域进行应用开发和部署。具体的产品介绍和文档可以在腾讯云官方网站上找到。

注意:本回答并未提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。如需了解更多相关信息,请参考腾讯云官方网站。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Jest 进行 JavaScript 测试

Jest 是目前最受欢迎的测试运行器之一,也是 Create React App 的默认选择。 首先要做的事情:我怎么知道要测试些什么? 当谈到测试,即使是简单的代码块也会使初学者瘫痪。...作为一个精通测试的 JavaScript 开发人员,你想要遵循测试驱动开发,这是一个强制开始编码之前编写失败测试的学科。 默认情况下,Jest 希望项目下名为 tests 的文件夹中找到测试文件。...测试结构和第一次失败的测试 现在创建你的第一次Jest测试。...项目根目录中创建一个名为 src 的新文件夹,创建一个名为 filterByTerm.js 的文件,放置导出我们的函数: mkdir src && cd _$ touch filterByTerm.js...Jest 可以顺利地测试 React 应用(JestReact 均来自 Facebook 的工程师)。Jest 也是 Create React App 中的默认测试器。

2.7K30
  • 如何测试驱动开发 React 组件?

    TDD 的过程 编写测试用例 运行测试,测试失败 修改代码 测试通过 重构/优化代码 新增功能,重复上述步骤 image.png 某种程度上,它可能在初学者看来是单调乏味或者不切实际的,但是严格按照这个步骤来做这件事...先找个设计: image.png 那么,让我们开始吧。 测试组件 首先使用 create-react-app 初始化一个 react 项目。..."> } export default Confirmation 然后把这个组件导入到测试中,它现在通过了。...现在我们得到了我们想要的组件渲染的 HTML ,现在我想要确保我可以从外部传递这个组件的按钮的回调函数,确保它们单击按钮被调用。...例如: 如何出测试 react hooks ? 如何测试 react 路由? 如何测试接口? 希望这篇文章对大家有所帮助,也可以参考我往期的文章或者评论区交流你的想法和心得,欢迎一起探索前端。

    2.2K10

    如何测试 React 异步组件?

    前言 本文承接上文 如何测试驱动开发 React 组件?,这次我将继续使用 @testing-library/react 来测试我们的 React 应用,简要简要说明如何测试异步组件。...登录测试 先来实现登录页,先脑补一个效果吧 我们先来写下测试用例 界面包含账号和密码输入框 接口请求包含 username 和 password 防止登录重复点击 登录成功跳转页面 登录失败显示错误信息...,登录失败在登录框下显示服务端返回信息。...,我们先来写下测试用例: 接口请求中页面显示 loading 请求成功显示博客列表 列表为空显示暂无数据 请求失败显示服务端错误 博客列表代码 下面的代码中, 使用了 react-use,首先我们先要安装这个包.../api/posts"); 我们可以官方文档中阅读关于 jest.mock 的更多信息。 它所做的就是告诉 Jest 替换/api/posts 模块。

    3.3K50

    如何测试驱动开发 React 组件?

    TDD 的过程 编写测试用例 运行测试,测试失败 修改代码 测试通过 重构/优化代码 新增功能,重复上述步骤 某种程度上,它可能在初学者看来是单调乏味或者不切实际的,但是严格按照这个步骤来做这件事,...先找个设计: 那么,让我们开始吧。 测试组件 首先使用 create-react-app 初始化一个 react 项目。...现在我们得到了我们想要的组件渲染的 HTML ,现在我想要确保我可以从外部传递这个组件的按钮的回调函数,确保它们单击按钮被调用。...这个测试显然失败了,下面是补充代码: import React from "react"; const Confirmation = ({ title, question, onOk }) => {...如何测试react 路由? 如何测试接口? 希望这篇文章对大家有所帮助,也可以参考我往期的文章或者评论区交流你的想法和心得,欢迎一起探索前端。

    2.1K10

    JavaScript 测试系列实战(二):深层渲染和快照测试

    测试与 DOM 的交互或者处理高阶组件,mount 函数也可以派上用场。_Mount 使用 DOM 实现的模拟,Jest 默认使用的是 jsdom。...快照测试 快照测试是 Jest 的一大招牌功能。所谓快照,可以简单地理解成是我们应用的一个**“代码截图”**。当我们运行快照测试Jest 将会渲染组件创建其快照文件。...当我们再次运行快照测试Jest 会将新的快照与旧的快照进行比较,如果两者不一致,测试就会失败,从而帮助我们确保用户界面不会发生意外改变。...,并且显示当前渲染结果与快照之间的精确差异。...小结 本文中,我们介绍了如何直接去测试组件的 Props,学习了 mount 函数和浅层渲染之间的区别。

    2.1K20

    React 测试驱动开发:从用户故事到产品

    一旦完成本教程,你将能够: 基于需求创建 epic 和 user stories(用户故事) 基于用户故事创建测试 使用 TDD 开发一个 React 应用 使用 Enzyme 和 Jest 测试 React...确保用户能够: *启动计时器 *看到计时器开始倒计时 即便用户多次点击启动按钮,倒计时也不应被中断作为一个用户,我要能停止计时器,这样只有我需要才会倒计时。...现在,将 Jest 和 Enzyme 加入依赖: $ npm i -D enzyme $ npm i -D react-test-renderer enzyme-adapter-react-16 同时...: 0; } 现在,需要将该 CSS 导入应用。...TimerButton.jsx 中引入样式,显示按钮 value : import React from 'react'; import PropTypes from 'prop-types'; import

    3.3K30

    Jest来给React完成一次妙不可言的~单元测试

    这将用作查询的基本元素,以及使用debug()打印的内容。•hydrate:用于服务端渲染,使用 ReactDOM.hydrate 加载你的组件。...当我们点击按钮,测试计数器的增减是否正确: import React from 'react'; import "@testing-library/jest-dom/extend-expect"; import...这样,我们现在就可以测试开始加载的页面是否是主页。以及导航栏是否加载了预期的链接。...来验证数据是否正确获取和显示: TextAxios.test.js import React from 'react' import "@testing-library/jest-dom/extend-expect...对于第一个测试,我们只检查加载消息没有数据要显示是否显示。 也就是说,我们现在已经完成了八个简单的步骤来测试你的React应用程序。

    14.9K33

    JavaScript 测试教程–part 3:测试 props,挂载函数和快照测试

    JavaScript测试教程-part 1:用 Jest 进行单元测试 2. JavaScript测试教程–part 2:引入 Enzyme 测试 React 组件 3....前面失败的测试现在将会通过。 由于 mount 函数可渲染更多内容模仿实际的 DOM,所以测试将会花费更多时间。使用 mount 函数可能意味着你是进行单元测试,而现在在进行集成测试。...测试与 DOM 的交互或高阶组件,它也被证明是有用的。...测试期间,将渲染组件创建其快照。它包含渲染组件的整个结构,应该与测试本身一起提交给存储库。再次运行快照测试,新的快照将与旧的进行比较。如果它们不同,则测试将失败。...公众号内回复“体系”查看高清大

    1.7K20

    React Native 持续部署实践— push 代码构建出新版的 Growth

    因此在这一篇文章里, 我们将介绍基于下面的几个框架来搭建持续集成: React Native 与持续集成服务器 Travis CI 的使用 单元测试 Jest 及 UI 测试框架 React Test...新的 Growth 里,我们配置 Travis CI 来做下面的一些事情: 配置基础环境 Travis CI 上改用了 Node.js 的包管理工具 npm 为 yarn,使用了缓存的机制来加速构建... before_deploy 的时候,将会安装 Android 的打包环境,执行打包操作、 deploy 的时候,则会执行上传 apk 包到 GitHub Release 页面。...中 mock 这些方法,如下是用来 mock 包 react-native-device-info 中的 getVersion 方法: jest.mock('react-native-device-info...总的来说,React Native 有一些测试还是不容易写的。并且诸如 WebView 这样的组件,测试的时候会报错~~。

    2.1K50

    React 设计模式 0x8:测试

    如果快照不匹配,则测试将失败。 # 使用 Cypress 进行端到端(e2e)测试 当涉及端到端测试,Cypress 在其他框架/库中处于领先地位。...文件中的 scripts 部分下: { "e2e-test": "cypress open." } 然后终端中运行 npm run e2e-test 等待。...这将打开一个新窗口,显示您可以使用的一些预配置测试。 要了解有关 Cypress 的更多信息,可以访问 React Quickstart (opens new window)。...# 使用 Jest 进行集成测试 大多数 React 应用程序中,通常需要与外部 API 集成以应用程序中发布和获取数据。 可以使用 Jest 来测试 API 行为,以查看预期和意外结果。...,确保各个组件之间的交互和数据传递是正确的 使用 CI/CD 将测试集成到 CI/CD 管道中,以便在每个提交自动运行测试及时发现问题 运行覆盖率测试 运行覆盖率测试以检查测试代码是否覆盖了应用程序的所有部分

    1.8K10

    React Native自动化测试

    使用Jest来测试 Jest命令行通过node来执行的纯js测试工具。测试代码放置__tests__目录下。...你可以react-native源代码的根目录中使用如下命令来运行现有的jest测试代码: npm test 我们建议你贡献代码的时候也添加自己的测试代码。...注意:要运行你自己的测试代码,请首先去jest的官网阅读指导文档,然后package.json中加入jest对象,在其中包含一些预备测试环境的脚本。下面是一个示例: ......参考效果是通过RCTTestRunner中设置recordMode = YES,然后在运行测试录制的。...只需UIExplorer/UIExplorerSnapshotTests.m中设置_runner.recordMode = YES;,然后重新运行先前失败的测试代码,再之后将这一设置改回去,最后提交/

    3K60

    WebStorm for Mac(JavaScript开发工具)中文版

    TypeScript文件中,弹出窗口还将列出导入此文件的所有符号。...突出显示测试中的失败行当您使用Jest,Karma,Mocha或Protractor运行测试并且某些测试失败,您现在可以在编辑器中看到问题发生的位置。...IDE将使用堆栈跟踪中的信息突出显示失败的代码。悬停,您将看到来自测试运行器的错误消息,您可以立即开始调试测试。...它现在使用树视图显示对象,它支持使用CSS设置日志消息样式使用console.group()和 对它们进行分组console.groupEnd()。您还可以过滤掉任何类型的日志消息。...它显示了最近在编辑器中打开的所有文件和代码行的列表。您可以开始键入以过滤结果跳转到您需要的代码。

    4.9K50

    那些年错过的React组件单元测试(上)

    Jest 关于Jest,我们参考一下其Jest 官网[1],它是Facebook开源的一个前端测试框架,主要用于ReactReact Native的单元测试,已被集成create-react-app...开源社区有超高人气,同时也获得了React官方的推荐。 ? Jest 本篇文章我们着重来介绍一下Jest,也是我们整个React单元测试的根基。 环境搭建 安装 安装Jest、Enzyme。...如果React的版本是15或者16,需要安装对应的enzyme-adapter-react-15和enzyme-adapter-react-16配置。...所有的模块都自动从 mock 导入. clearMocks: 每个测试前自动清理 mock 的调用和实例 instance collectCoverage: 是否收集测试的覆盖率信息 collectCoverageFrom...当我们再次运行快照测试Jest 会将新的快照与旧的快照进行比较,如果两者不一致,测试就会失败,从而帮助我们确保用户界面不会发生意外改变。 ?

    5K20

    React 组件测试技巧

    unmountComponentAtNode(container); container.remove(); container = null; }); 你可以使用不同的测试模式,但请记住,即使测试失败...React 提供了一个名为 act() 的助手,它确保进行任何断言之前,与这些“单元”相关的所有更新都已处理应用于 DOM: act(() => { // 渲染组件 }); // 进行断言 这有助于使测试运行更接近真实用户使用应用程序时的体验...使用“假”数据 mock 数据获取可以防止由于后端不可用而导致的测试不稳定,使它们运行得更快。注意:你可能仍然希望使用一个"端到端"的框架来运行测试子集,该框架可显示整个应用程序是否一起工作。...); container.remove(); container = null; }); it("点击更新值", () => { const onChange = jest.fn();...选择性地 mock 一些子组件可以帮助减小快照的大小,使它们代码评审中保持可读性。

    4.9K00

    React背后的工具化体系

    “重新打包React构建去掉process.env.NODE_ENV”(当然,React 16不需要再这样做了,原因见上面提到的bundle形式变化) 丢弃了过于复杂(overly-complicated...mock module 构建可能面临动态依赖的场景:不同的bundle依赖功能相似但实现存在差异的module,例如ReactNative的错误提醒机制是显示个红框,而Web环境就是输出到Console...App测试,还有一个更狠的:Enzyme,可以采用Jest + Enzyme对React组件进行深度测试,更多信息请查看Unit Testing React Components: Jest or Enzyme...– 张云龙的回答 – 知乎 P.S.可以repl.it – try-jest by @amasad在线试玩 preventing Infinite Loops 即死循环检查,不希望测试过程被死循环阻塞...通过Babel插件来做,测试环境构建注入检查: // ref: https://github.com/facebook/react/blob/master/scripts/jest/preprocessor.js

    1.5K20

    如何自动化测试 React Native 项目 (下篇) - 单元测试

    当 snapshot 结果需要升级更新, 只需要执行 jest -u 指令即可更新之前生成的 snapshot 结果。 为什么 Snapshot React 测试中是可靠的呢?... React(以及 React Native ) 的开发理念中, 开发者把重点放在描述要显示的组件不同输入时的静态状态,然后交给React去处理UI的更新。...可以想象成每次UI有变化时会重新生成这个组件刷新, React会帮开发者处理具体怎么高效的变化。 因此我们测试组件的时候, 也只要把重点放在测试我们如何描述这个组件。...这样的好处是比如本来UI上需要显示一段 text, 这段 text 根据几个复杂的 Object 计算出来,那原本的测试就需要mock这些复杂的 Object 保证 snapshot 的正确性。...Views)显示需要的简单的Prop Component 要改变 App state 的时候, dispatch 一个 action 到 Action handler 中(react-thunk),

    3.3K21
    领券