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

当尝试在react原生应用程序上运行jest时,测试会失败。找不到"setupDevtools“错误

当尝试在React原生应用程序上运行Jest时,测试会失败并显示"找不到'setupDevtools'"错误。这个错误通常是由于Jest无法找到React开发工具所致。React开发工具是一个浏览器扩展程序,用于在开发过程中检查和调试React组件。

要解决这个问题,你可以尝试以下几个步骤:

  1. 确保你已经安装了React开发工具浏览器扩展程序。你可以在Chrome Web Store中搜索"React Developer Tools"并安装它。安装完成后,确保扩展程序已启用。
  2. 确保你的React应用程序已经正确配置了Jest。在项目的根目录下,检查是否有一个名为"jest.config.js"的文件。如果没有,请创建一个。在配置文件中,确保你已经正确设置了"setupFilesAfterEnv"选项,指向一个包含"setupDevtools.js"的文件。例如:
代码语言:txt
复制
module.exports = {
  // 其他配置选项...
  setupFilesAfterEnv: ['./setupDevtools.js'],
};
  1. 创建一个名为"setupDevtools.js"的文件,并在其中添加以下代码:
代码语言:txt
复制
import { setGlobal } from 'reactn';

// 设置全局变量以模拟React开发工具
setGlobal({
  __REACT_DEVTOOLS_GLOBAL_HOOK__: {},
});

这段代码将设置一个全局变量,以模拟React开发工具的存在。

  1. 运行Jest测试并检查是否仍然出现"找不到'setupDevtools'"错误。如果问题仍然存在,请确保你的React应用程序的依赖项已正确安装,并且没有其他与Jest冲突的配置。

总结起来,要解决"找不到'setupDevtools'"错误,你需要安装React开发工具浏览器扩展程序,并确保在Jest配置中正确设置了"setupFilesAfterEnv"选项,并创建一个包含模拟React开发工具的"setupDevtools.js"文件。这样,你应该能够成功运行Jest测试。

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

相关·内容

React Native自动化测试

你可以react-native源代码的根目录中使用如下命令来运行现有的jest测试代码: npm test 我们建议你贡献代码的时候也添加自己的测试代码。...注意:要运行你自己的测试代码,请首先去jest的官网阅读指导文档,然后package.json中加入jest对象,在其中包含一些预备测试环境的脚本。下面是一个示例: ......测试代码需要以JS写成的,并且必须在测试完成后调用TestModule.markTestCompleted()方法,否则测试过程超时并且失败失败的表现一般是抛出一个JS异常。...:方法,它们按提供的条件去验证抛出的错误是否符合。...参考效果图是通过RCTTestRunner中设置recordMode = YES,然后在运行测试录制的。

3K60

web前端好帮手 - Jest单元测试工具

url中参数为空 获取url参数返回值经过decode Webstorm测试界面能看到清晰的分组: ?...test('必要参数uid漏传报错', () => { expect(fetchUserInfo()).toThrow(); }); 注意测试错误抛出,要在测试逻辑外加一层函数包裹,Jest才能捕获到错误.../test.txt"); expect(data.toString()).toBe("333"); }); 注意,Jest检测到异步测试(比如使用了done或者函数返回promise),Jest等待测试完成...另外,要注意系统路径的差异,可能造成Mac上编写的测试Windows上却运行失败: // window的路径,Mac上会报错expect(value).toMatchInlineSnapshot(...Webstorm —— Jest最好的调试工具 Webstorm调试Jest测试非常便利,事实上,上文中测试截图都是Webstorm上运行的结果,在运行、调试两个方面,Webstorm体验都比node-inspect

4.9K40

React-Native 入门

一、简介 1、React-Native介绍 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 原生移动应用平台的衍生产物...React Native使你能够Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。...下载完成后,放到指定目录下: image.png 然后重新输入命令 react-native run-android 来初始化运行项目,程序首先会解压 gradle 压缩文件,第一次初始化可能需要一点间...四、常见错误 1、没有配置 Android 开发环境 第一次输入 react-native run-android 运行是,出现如下错误: image.png 表明程序没有找到 sdk 路径,首先确定是否配置了...: 4、React Native unable to load script from assets index.android.bundle on windows 运行项目,手机红屏报错,错误信息如下

2.7K10

单元测试

需要基于DOM元素进行匹配测试,推荐引入@testing-library/jest-dom。...对于层级较深的组件,需单测文件中增加注释,说明测试组件所在的路径 运行单测 单测执行 安装 VSCode Jest 运行插件 名称: Jest Runner ID: firsttris.vscode-jest-runner...(目前测试环境单测和打包中心单测是等效的) 点击unitest插件执行报告查看结果 或在任务管理中,进入单元测试报告界面查看 二、行云流水线发布任务自动执行 行云流水线执行项目发布,根据行云的门禁配置自动执行项目的单元测试.../index'; // 这种mock方式需要团队内评审,因为store中新增方法,此处mock也需要同步修改,否则可能导致报错:store下方法找不到 jest.mock('../.....); // 带上 jest 的类型提示 mockedGet.mockResolvedValue(resp); // 含有 jest 的类型提示 jest 单独运行每一个测试用例都可以通过测试,但是运行一组测试用例

18210

使用 React Testing Library 的 15 个常见错误

如果你的目标和我们的一样,都想通过测试来确保用户使用时应用能够正常工作的话,那你就要尽量用更接近用户的使用方式来查询 DOM。...只有当无法满足当前的 HTML 语义(比如你写了一个非原生的 UI 组件,同时也要让它 像 AutoComplete 一样可访问),你才应该使用可访问属性。...这是很重要的,因为类似 get* 和 find* 相关的 API 找不到元素都会自动抛出异常 —— 这样你就可以看到渲染的内容以及为什么找不到元素的原因。...也因为这点,断言是永远不可能失败的(因为如果找不到元素,查询断言之前抛出异常)。 因为这个原因,很多人直接不做断言了。...建议:如果你想断言某个东西是否存在,那么就做显式的断言操作 总结 作为测试库工具系列的维护者,我们尽最大努力使 API 能够引导人们尽可能有效地使用,一些不足之处,我们尝试正确地记录下来,即使这会非常地困难

1.2K20

Jest 进行 JavaScript 测试

Jest 是目前最受欢迎的测试运行器之一,也是 Create React App 的默认选择。 首先要做的事情:我怎么知道要测试些什么? 谈到测试,即使是简单的代码块也会使初学者瘫痪。...但是谈到严肃的事情,大部分时间你都没有那么多的特权。通常我们必须遵循规范,即建立的书面或口头描述。 本教程中,我们从项目经理那里得到了一个相当简单的规范。...作为一个精通测试的 JavaScript 开发人员,你想要遵循测试驱动开发,这是一个强制开始编码之前编写失败测试的学科。 默认情况下,Jest 希望项目下名为 tests 的文件夹中找到测试文件。...Jest 具有内置代码覆盖率,你可以通过两种方式激活: 通过命令行传递标志“-coverage” 通过 package.json 中配置 Jest 使用 coverage 运行测试之前,请确保 tests...Jest 可以顺利地测试 React 应用JestReact 均来自 Facebook 的工程师)。Jest 也是 Create React App 中的默认测试器。

2.7K30

2020 年你应该知道的 React

使用 PropTypes,你可以为你的 React 组件定义传入的 props。无论何时向组件传递了错误的类型,在运行应用程序时都会收到错误消息。但是这种形式的类型检查只应该用于较小的应用程序。...使用这样的类型检查器,您可以开发期间获得错误。您不必启动应用程序就可以找到本可以通过这种类型检查防止的 bug。这样一来,类型检查器就可以提高您的开发人员体验,避免首先引入 bug。...虽然样式指南只给出建议,但是 linter 应用程序中强制执行这个建议。例如,你可以要求遵循流行的 Airbnb 样式指南,你的 IED/编辑器告诉你每一个错误。...至少,您可以使用 React-test-renderer Jest 测试中渲染 React 组件。这已经足以用 jest 来执行所谓的快照测试了。...快照测试的工作方式如下: 运行测试之后,将创建 React 组件中渲染的 DOM 元素的快照。您在某个时间点再次运行测试,将创建另一个快照,用作前一个快照的差异。

14.4K40

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

因此,之前失败测试现在就会通过。 由于 mount 函数模拟实际的 DOM,渲染成本更高,因此运行测试花费更多的时间。...测试与 DOM 的交互或者处理高阶组件,mount 函数也可以派上用场。_Mount 使用 DOM 实现的模拟,Jest 默认使用的是 jsdom。...快照测试 快照测试Jest 的一大招牌功能。所谓快照,可以简单地理解成是我们应用的一个**“代码截图”**。当我们运行快照测试Jest 将会渲染组件并创建其快照文件。...当我们再次运行快照测试Jest 会将新的快照与旧的快照进行比较,如果两者不一致,测试就会失败,从而帮助我们确保用户界面不会发生意外改变。...如果我们要更新所有失败的快照,可以使用 -u 标志(别名为 --updateSnapshot) 来运行 Jest

2.1K20

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

2021 年的今天,构建一个复杂的web应用对于我们来说,并非什么难事。...Jest 关于Jest,我们参考一下其Jest 官网[1],它是Facebook开源的一个前端测试框架,主要用于ReactReact Native的单元测试,已被集成create-react-app...开源社区有超高人气,同时也获得了React官方的推荐。 ? Jest 本篇文章我们着重来介绍一下Jest,也是我们整个React单元测试的根基。 环境搭建 安装 安装Jest、Enzyme。...,在运行测试案例代码之前,Jest 运行这里的配置文件来初始化指定的测试环境 testMatch: 定义被测试的文件 transformIgnorePatterns: 设置哪些文件不需要转译 transform...当我们再次运行快照测试Jest 会将新的快照与旧的快照进行比较,如果两者不一致,测试就会失败,从而帮助我们确保用户界面不会发生意外改变。 ?

4.9K20

React 组件进行单元测试

前端开发的一个特点是更多的涉及用户界面,开发规模达到一定程度,几乎注定了其复杂度会成倍的增长。...断言(assertions) 断言是单元测试框架中核心的部分,断言失败导致测试不通过,或报告错误信息。...号称自己是一个 “Zero configuration testing platform”,只需 npm scripts里面配置了test: jest,即可运行npm test,自动识别并测试符合其规则的...” , 这也是 TDD 中的一般性步骤: 添加一个测试 运行所有测试,看看新加的这个是不是失败了;如果能成功则重复步骤1 根据失败报错,有针对性的编写或改写代码;这一步的唯一目的就是通过测试,先不必纠结细节...明确指定 PropTypes 对于一些之前定义并不清晰的组件,可以统一引入 prop-types,明确组件可接收的props;一方面可以开发/编译过程中随时发现错误,另外也可以团队中其他成员引用组件形成一个明晰的列表

4.2K40

JavaScript 测试系列实战(三):使用 Mock 模拟模块并处理组件交互

之前的两篇教程中,我们学会了如何去测试最简单的 React 组件。实际开发中,我们的组件经常需要从外部 API 获取数据,并且组件的交互逻辑也往往更复杂。...在这篇教程中,我们将学习如何测试更复杂的组件,包括用 Mock 去编写涉及外部 API 的测试,以及通过 Enzyme 来轻松模拟组件交互 初次尝试 Jest Mock 我们的应用程序通常需要从外部的...在编写测试,外部 API 可能由于各种原因而失败。我们希望我们的测试是可靠和独立的,而最常见的解决方案就是 Mock。...打开 TodoList 的测试文件,首先在最前面通过 jest.mock 配置 axios 模块的 Mock(确保要在 import TodoList 之前), Mock 之后,无论测试还是组件中使用的都将是...尝试测试 React Hooks Hooks 是 React 的一个令人兴奋的补充,毫无疑问,它可以帮助我们将逻辑与模板分离。这样做使上述逻辑更具可测试性。不幸的是,测试钩子并没有那么简单。

4.8K20

干货 | 携程租车React Native单元测试实践

Jest 周期函数 测试用例之前,可以用四个周期函数进行一些处理: beforeAll(() => { console.log('所有测试用例测试之前运行'); }); afterAll(()...(() => { console.log('每个测试用例测试完毕后运行'); }); 五、Jest Mock函数 单元测试中,有许多对象或函数并不需要真实的引用,因此需要mock。...快照将在测试文件的当前文件路径自动生成的snapshots文件夹中保存。主动修改造成ui变化时,使用jest -u来更新快照。..._onClear).toBeCalled();//测试组件实例上的方法是否被调用 九、Redux测试 使用React或者React Native通常会使用Redux进行状态的管理,需要mock store...; 通过单元测试,给项目带来了不少好处: 通过单元测试可以确保代码得到预期的结果,测试环境中就发现bug; 修改依赖的组件,能在测试中发现被影响组件的错误,这样可以支持我们更好的重构代码,有利于项目的长期迭代

6K30

QQ音乐商业化Web团队前端工程化实践总结

husky 如果我们把Lint放在了持续集成CI阶段,就会遇到这样一个问题:CI系统Lint发现了问题导致构建失败,这个时候我们需要根据错误重新修改代码,然后重复这个过程直到Lint成功,整个过程可能浪费掉不少时间...,无法在编译阶段作出任何类型错误的提示,同时由于函数参数类型的不确定性,编译器的编译结果很可能无法被复用,比如下面的例子中,执行add(1,2)对add函数的编译结果无法直接被下面的add('1',...流程规范 团队开发,通常会使用版本控制系统来管理项目,常用的有svn和git,如何合并代码、如何发布版本都需要相应的流程规范,这可以让我们规避很多问题,比如合并代码后出现代码丢失,又或者将别人未经测试的代码发布出去等等...puppeteer 真实的浏览器中运行测试,很方便,但是运行速度慢一点。 phantomjs 无头浏览器,puppeteer发布后,作者已经宣布不维护了。...Migrating from Mocha to Jest中介绍了Airbnb的尝试

4.2K112

React背后的工具化体系

一般解法有2种: 运行时动态依赖(注入):把两份都放进bundle,运行时根据配置或环境选择 构建处理依赖:多构建几份,不同的bundle含有各自需要的依赖模块 显然构建处理更干净一些,即mock...简言之,prod bundle中把详细的报错信息替换成对应错误码,生产环境捕获到运行错误就把错误码与上下文信息抛出来,再丢给错误码转换服务还原出完整错误信息。...上例中是^_^),然后运行时(通过DevTools)检查fn.toString()源码,如果含有该标识字符串就说明DCE失败(无用代码没在build过程中去除),异步throw出来 P.S.关于DCE...通过Babel插件来做,测试环境构建注入检查: // ref: https://github.com/facebook/react/blob/master/scripts/jest/preprocessor.js...,包括: 基于WebDriver的应用测试Facebook,这个应用就指主站) 人工测试用例,需要的时候人工验证DOM相关的改动 不做浏览器环境的自动化测试主要有3个原因: 浏览器环境的测试工具不那么可靠

1.5K20

2021年React学习路线图

React 核心库相对简单,但是只学这个库并不够,特别是创建复杂的网页应用时。 我从 2016 年开始用 React 开发,任务变得越来越复杂,我不得不学习其他辅助库,来实现这些功能。...图片 React Bootstrap 主页被分割成多个组件 每个组件有一套生命周期,动态数据保存在状态中。状态中的数据发生改变,组件再次渲染,来更新这些变更。你要理解这几个基础概念。...它使获取数据变得简单,可以实际应用中做一些尝试。...还有其他库,比如 React 测试库。 当应用程序变得复杂,要对单个组件进行良好的单元测试以确保正确性,而不是假设它们按预期的方式运行。...您可以 create-react-app 创建的 React 应用运行 eject,以了解 React 代码是怎样转换并运行在浏览器上。

7.5K21

react生态下jest单元测试

去安装速度更快,npm速度很慢!...–coverage 图片 会在html-report目录下生成report.html文件 图片 2.SnapShot Testing(快照测试): 快照测试第一次运行的时候会将被测试ui组件不同情况下的渲染结果保存一份快照文件...后面每次再运行快照测试,都会和第一次的比较,若组件代码有所改变,则快照测试失败,如果组件代码是最新的,优化过得代码,则需要更新快照,免得每次执行报错。...如果尝试对这些对象进行快照,它们将强制快照在每次运行失败. //2.Jest允许为任何属性提供非对称匹配器。...如果尝试对这些对象进行快照,它们将强制快照在每次运行失败. //2.Jest允许为任何属性提供非对称匹配器。

2.2K20

React团队是如何测试并发特性的

React18进入大家视野已经有一段时间了,不知道各位有没有尝试「并发特性」呢? 启用「并发特性」后,React从「同步更新」变为「异步、带优先级、可中断的更新」。...对于测试React内部运行机制」这样的场景,掺杂了宿主环境相关信息显然测试用例编写起来更繁琐。 2. 如何测试并发环境?...那能不能为测试「内部运行流程」专门开发一个渲染器呢? 答案是肯定的。 这个渲染器叫React-Noop-Renderer。 简单的说,这个渲染器渲染出纯JS对象。...比如,我想测试组件卸载useEffect回调的执行顺序。...记录过程信息 脱离宿主环境,单独测试React内部运行流程的,使用React-Noop-Renderer 测试并发下的场景,需要结合上述工具与jest-react一起使用 如果想深入学习下React中与测试相关的技巧

1.3K20
领券