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

当被测试的动作返回一个fetch调用时,Jest测试抛出“无法读取未定义的属性‘原型’”

的错误,这通常是因为在测试中没有正确模拟fetch函数的行为。

要解决这个问题,可以使用Jest提供的mock函数来模拟fetch函数的行为。下面是一个示例代码:

代码语言:txt
复制
// 要测试的代码
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

// 测试代码
test('fetchData函数能够正确返回数据', async () => {
  const mockResponse = { data: 'test data' };
  const mockJsonPromise = Promise.resolve(mockResponse);
  const mockFetchPromise = Promise.resolve({
    json: () => mockJsonPromise,
  });
  global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);

  const data = await fetchData();

  expect(global.fetch).toHaveBeenCalledTimes(1);
  expect(global.fetch).toHaveBeenCalledWith('https://api.example.com/data');
  expect(data).toEqual(mockResponse);
});

在这个示例中,我们使用了Jest的mock函数来模拟fetch函数的行为。首先,我们创建了一个mockResponse对象,它代表了我们期望从fetch函数中返回的数据。然后,我们创建了两个Promise对象,分别用于模拟response.json()和fetch()函数的返回值。接下来,我们使用global.fetch = jest.fn().mockImplementation()来将fetch函数替换为我们的mock函数。最后,我们调用fetchData函数,并使用expect断言来验证fetch函数是否被正确调用,并且返回的数据是否与我们期望的一致。

这是一个简单的示例,你可以根据实际情况进行修改和扩展。如果你想了解更多关于Jest的mock函数的用法,可以参考Jest官方文档:Jest Mock Functions

腾讯云相关产品和产品介绍链接地址:

  • 云函数(Serverless):云函数是一种无需管理服务器即可运行代码的计算服务,可用于处理各种事件驱动型的任务。详情请参考:云函数产品介绍
  • 云开发(CloudBase):云开发是一站式后端云服务,提供了云函数、数据库、存储等功能,帮助开发者快速构建全栈应用。详情请参考:云开发产品介绍
  • 云服务器(CVM):云服务器是一种可弹性伸缩的计算服务,提供了高性能的虚拟机实例,适用于各种应用场景。详情请参考:云服务器产品介绍
  • 云数据库 MySQL 版(CDB):云数据库 MySQL 版是一种高性能、可扩展的关系型数据库服务,适用于各种在线应用场景。详情请参考:云数据库 MySQL 版产品介绍
  • 云存储(COS):云存储是一种安全、稳定、低成本的云端存储服务,适用于各种数据存储和传输场景。详情请参考:云存储产品介绍
  • 人工智能平台(AI):人工智能平台提供了丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等功能。详情请参考:人工智能平台产品介绍
  • 物联网开发平台(IoT):物联网开发平台提供了设备接入、数据存储、数据分析等功能,帮助开发者构建物联网应用。详情请参考:物联网开发平台产品介绍
  • 区块链服务(BCS):区块链服务提供了一站式区块链解决方案,包括区块链网络搭建、智能合约开发等功能。详情请参考:区块链服务产品介绍
  • 腾讯会议(Tencent Meeting):腾讯会议是一种高清、流畅、安全的在线会议服务,适用于各种远程协作场景。详情请参考:腾讯会议产品介绍
  • 腾讯云直播(Cloud Live):腾讯云直播是一种高可用、高并发的直播服务,适用于各种直播场景。详情请参考:腾讯云直播产品介绍
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 React Testing Library 15 个常见错误

以前我(Kent)并不是很喜欢那个时候测试环境,为此写了一个 React Testing Library。...你应该按这个页面中顺序来使用 Query API。如果你目标和我们一样,都想通过测试来确保用户在使用时应用能够正常工作的话,那你就要尽量用更接近用户使用方式来查询 DOM。...只有当无法满足当前 HTML 语义时(比如你写了一个非原生 UI 组件,同时也要让它 像 AutoComplete 一样可访问),你才应该使用可访问属性。...API 出来唯一原因是:可以在找不到元素情况下不会抛出异常(返回 null)。...建议:查询那些不能立马能访问到元素时,使用 find* 给 waitFor 传空 callback 重要程度:高 // ❌ await waitFor(() => {}) expect(window.fetch

1.3K20

JavaScript 权威指南第七版(GPT 重译)(五)

对于典型迭代器和生成器,如果value属性定义,则done属性未定义或为false。如果done为true,则value为未定义。...请记住,fetch()返回一个 Promise 对象,实现时,将传递一个 Response 对象给我们注册函数。...您将回c传递给then()方法时,then()返回一个 Promisep并安排在稍后某个时间异步调用c。回执行一些计算并返回一个值v。返回时,p解析为值v。...传递给 .then()(或 .catch())抛出一个值时,作为 .then() 调用返回 Promise 将被拒绝,并带有该抛出值。...但假设我们希望在第一个 fetch 结果变为可用时获取结果,并且不想等待所有 URL 获取。

21810

JavaScript 常见面试题速查

instanceof 可以用来测试一个对象在其原型链中是否存在一个构造函数 prototype 属性。...可以任何编程语言读取或作为数据格式来传递。...在实际开发中,this 指向可以通过四种调用模式来判断: 函数调用模式:一个函数不是一个对象属性时,直接作为函数来调用时,this 指向全局对象 方法调用模式:如果一个函数作为一个对象方法来调用时...Promise 缺点: 无法取消 Promise,一旦新建它就会立即执行,无法中途取消 如果不设置回函数,Promise 内部错误抛出,不会反应到外部 处于 pending 状态时,无法得知目前进展到哪一阶段...# 哪些情况会导致内存泄露 意外全局变量 由于使用未声明变量,而意外创建了一个全局变量,而使这个变量一直留在内存中无法回收 遗忘计时器或回函数 设置了 setInterval() 定时器

51830

JavaScript小技能:原型运作机制、Promise链

引言 回函数是一个传递到另一个函数中会在适当时候调用函数,如事件处理程序就是一种特殊类型函数。...1.2 对象原型prototype 属性:继承成员定义地方 prototype 属性值是一个对象,我们希望原型链下游对象继承属性和方法,都被储存在其中。... Promise 完成时,它 then() 处理函数调用。 fetch() 认为服务器返回一个错误(如404 Not Found)时请求成功,但如果网络错误阻止请求被发送,则认为请求失败。...一个 Promise 失败时,它 catch() 处理函数调用。 在基于 Promise API 中,异步函数会启动操作并返回 Promise 对象。...这使得代码在该点上等待,直到 Promise 完成,这时 Promise 响应当作返回值,或者拒绝响应作为错误抛出

93220

对 React 组件进行单元测试

前端开发一个特点是更多会涉及用户界面,开发规模达到一定程度时,几乎注定了其复杂度会成倍增长。...、传入什么参数、返回什么结果,甚至是抛出异常情况。...,对于某些不容易构造或者不容易获取对象,用一个虚拟对象来创建以便测试测试方法 广义讲,以上 spy 和 stub 等,以及一些对模块模拟,对 ajax 返回模拟、对 timer 模拟,...react-bootstrap/Modal 无法 enzyme 测试 const { show, bgSize, dialogClassName...sinon 中有一些模拟 XMLHttpRequest 请求方法, jest 也有一些第三方库解决 fetch 测试; 在我们项目中,根据实际用法,自己实现一个类来模拟请求响应: //FakeFetch.jsimport

4.3K40

Jest + React Testing Library 单测总结

整个流程和写法也不是特别难,所以就理所当然地觉得,写测试也不是特别难。 加上之前实际工作中,也没有太多测试经历,所以自己需要对组件库补充单元测试时候,发现并不能照葫芦画瓢来写单测。.../function.js'; // 假设 aFunction 读取一个 bool 参数,并返回该 bool 参数 describe('a example test suite', () => {  ...在组件单测中,有的时候我们可能只关注一个函数是否正确地调用了,或者只想要某个函数返回值来支持该组件渲染逻辑是否正确,而并不关心这个函数本身逻辑。...get 和 query 区别主要是在未找到元素时,queryBy 会返回 null,这对于我们测试一个元素是否存在时非常有帮助。...();        // await 一个元素找到,并且最终确实找到 promise resolves 并且组件重新渲染之后。

4.6K20

从echarts-for-react源码中学习如何写单元测试

,但它们值是一样,也是可以 小结 对于有返回function,就是通过判断「返回值」,是否与「期望值」相等即可 这样好处: ① 有新需求要扩展该函数时,可以保证该函数返回值仍保持不变,进而不会影响到使用到该函数旧需求...② 测试函数比较复杂时,非常方便,不用了解内部详细代码,只需返回值符合期望即可 如何测试ReactComponent 当我写完一个React组件时,我该如何测试它呢?...不会渲染内部子组件,也无法与子组件互动 // render()用于将React组件渲染成静态HTML并分析生成HTML结构 // 渲染一个react组件 const component...,应该将关注点放在「测试目标」上,onChartReady 作为依赖function, // 内部发生了什么与「测试目标」无关,只需关注返回值(return xxx)即可, //...() 作用: 新建mock function 在进行单元测试时,应该将关注点放在「测试目标」上,而onChartReady作为依赖function,不管它内部发生了什么,都与「测试目标」无关,只需关注返回

6.2K50

34. 精读《React 代码整洁之道》

可预测、可测试 如果使用 Jest 测试,可以考虑截图测试插件:Jest Image Snapshot 自我解释 尽可能减少代码中注释。...根据我体验,尤为痛恨违背第二条组件,比如 React 组件使用了数据流,但必须依赖项目初始化该数据流才能执行,如果不是生活所迫,我才不会使用这种组件。...第三条也一样,如果你是一个知名轮子作者,请毫不留情使用最严格 lint 规则。如果使用者 lint 规则比你还严格,你组件将无法使用。...name)) 不要信任任何回函数给你变量,它们随时可能是 undefined,使用初始值是个不错选择,但有的时候初始值没什么意义,使用 ?....语法可以安全访问属性,是时候抛弃 _.get 了。 4. 总结 我要回去重构代码了,你呢?

35720

浅谈前端测试

配置注意事项 {  testEnvironment: 'node' // 如不声明默认浏览器环境  }   针对 node 只聊一下单元测试,e2e 测试比较少见   决定写一个 npm 模块时,...,我们关注点应该在于读取文件错误时能否及时抛出异常,以及 console.log() 是否如预期执行   对应到测试 const getFile = require('....,先别急着纠错,这段测试本身是错,下面慢慢分析   我们在最开始创建了一个 mocks 对象,用来模拟数据,由于 readFileSync 方法可能存在多种返回结果(成功或报错),所以暂时用 jest.fn...  在第一个 test 里面我们改写 mocks.fs.readFileSync 返回形式,这里使用 mockImplementation 是直接模拟了一个执行函数,当然也可以模拟返回值,具体可以到...require 本身并不复杂,但是如果搞不清楚执行时机,那么测试无法进行,来一个例子 const env = process.env.NODE_ENV  module.export = () => env

1.7K10

使用 Jest 进行前端单元测试

我们在写一个测试用例前,如果能对非关键依赖进行 mock,只约定好最后返回,就不用再先解决一堆依赖和环境问题,把精力集中在要测试单元上来编写 test case ,同时也缩短测试用例执行时间,做到最小化测试...我们只要稍作加工,就可以指定各个文件行为,并模拟我们想要情况来进行不同测试,例如本例中控制 fetchUser 返回。...,例如我想拿到第 m 次用时第 n 个参数,就可以通过 mock.calls 来访问到: var myMock = jest.fn(); myMock('1'); myMock('a', 'b'...,测试用例关注点应是要确保取到正确数据后能够正常写到 DOM 上,应该把网络拉取部分 mock 掉,构造测试数据返回,在当前代码就是 fetch 部分。...另外因为在 fetch promise 链上连续操作,mock 时还要注意实现 response.json() 等操作。 这样代码不仅显得比较长,单独一个测试用例 mock 也很长。

5.5K90

JavaScript单元测试利器Jest+mocha+chai

同步代码测试比较简单,直接判断函数返回值是否符合预期就行了,而异步函数,就需要测试框架支持回、promise或其他方式来判断测试结果正确性了。...chai 是一个针对 Node.js 和浏览器行为驱动测试测试驱动测试断言库,可与任何 JavaScript 测试框架集成。istanbul是一个 JavaScript 代码覆盖率检查库。...String:单引号和双引号不能交叉使用;使用.length属性访问字符串长度;字符串一旦创建,其值不能改变,若想改变必须销毁原有字符串。...最终返回给调用是Module.exports而不是exports。 所有的exports收集到属性和方法,都赋值给了module.exports。...,一目了然哪个case是失败3.2:Jest实例演练安装jest:npm install -g jest初始化项目的jest配置: jest --init针对JS方法测试用例:import { timestampToTime

53520

JavaScript测试教程–part 4:模拟 API 调用和模拟 React 组件交互

模拟 对于我们程序来说,从 API 获取一些数据是很常见。但是它可能由于各种原因而失败,例如 API 关闭。我们希望测试可靠且独立,并确保可以模拟某些模块。...spyOn 函数返回一个 mock函数。有关其功能完整列表,请阅读文档。我们测试检查组件在渲染和运行之后是否从模拟中调用 get函数,并成功执行。...一个窍门是它是附加到 window 对象全局函数并对其进行模拟,可以将其附加到 global 对象。首先,让我们创建模拟 fetch 函数。...,通过它我们可以得到返回 promise:在 value 属性中可用。...从测试返回 promise 是能够确保 Jest 等待其解决一种方法。 总结 在本文中,我们介绍了模拟模块,并将其用于伪造 API 调用。由于没有发出实际请求要求,我们测试可以更可靠、更快。

3.7K10

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

在较大规模前端项目中,测试对于保证代码质量十分重要,而React组件化和函数式编程, 这种相同输入一定返回相同输出幂等特性特别适合单元测试。...1.2 Enzyme Enzyme是AirBnb开源React测试工具库,通过一套简洁api,可以渲染一个或多个组件,查找元素,模拟元素交互(如点击,触摸),通过和Jest相互配合可以提供完整...快照将在测试文件的当前文件路径自动生成snapshots文件夹中保存。主动修改造成ui变化时,使用jest -u来更新快照。...七、Jest 异步测试 Jest单元测试是同步,因此面对异步操作如fetch获取数据,需要进行异步模拟测试。...创建一个mock函数,该mock函数不仅捕获函数调用情况,还可以正常执行spy函数。

6.1K30

10 种 JavaScript 最常见错误

当你读取一个未定义对象属性或调用其方法时,这个错误会在 Chrome 中出现。 您可以很容易在 Chrome 开发者控制台中进行测试。 ?...2、 TypeError: ‘undefined’ is not an object 这是在 Safari 中读取属性或调用未定义对象上方法时发生错误。...8、 TypeError: Cannot read property ‘length’ 这是因为读取未定义变量长度属性而发生错误。 您可以在 Chrome 开发者控制台中进行测试。 ?...,它总是返回 undefined,我们不能获取或设置任何未定义属性。...ReferenceError: event is not defined 您尝试访问未定义变量或超出当前作用域变量时,会引发此错误。 您可以在 Chrome 浏览器中测试。 ?

8.5K20

拿Proxy可以做哪些有意思事儿

当我们写了某个trap以后,在做对应动作时,就会触发我们函数,由我们来控制代理对象行为。 最常用两个trap应该就是get和set了。...然后我们可以直接调用obj.age来获取一个返回值,也可以对其进行赋值。 这么做有几个缺点: 针对每一个要代理属性都要编写对应getter、setter。...在前端发送请求,我们现在经常用到应该就是fetch了,一个原生提供API。...实现一个简易断言工具 写过测试各位童鞋,应该都会知道断言这个东西 console.assert就是一个断言工具,接受两个参数,如果第一个为false,则会将第二个参数作为Error message抛出...preventExtensions 设置对象为不可扩展 getOwnPropertyDescriptor 获取一个自有属性 (不会去原型链查找) 属性描述 参考资料 Magic Methods in

50720

14万字 | 400多道JavaScript 面试题及详细答案(建议收藏)

返回顶部 回到第50题 ---- 54.什么是回函数? 回函数是作为参数传递给另一个函数函数。这个函数在外部函数内部调用以完成一个动作。...一旦promise解决,价值就不能改变。 ⬆ 返回顶部 回到第50题 ---- 62.回是什么? 您可以将一个嵌套在另一个中,以依次执行操作。这被称为回。...undefined 属性表示一个变量没有赋值,或者根本没有声明。未定义类型也是未定义。...事件循环是一个函数队列。异步函数执行时,回函数推入队列。JavaScript 引擎在异步函数执行完代码之前不会开始处理事件循环。...直到几天前,原生 promise 一个缺点是无法直接取消 fetch 请求。但是新AbortController js 规范允许您使用信号来中止一个或多个 fetch 调用。

12.7K20

拿Proxy可以做哪些有意思事儿

当我们写了某个trap以后,在做对应动作时,就会触发我们函数,由我们来控制代理对象行为。 最常用两个trap应该就是get和set了。...然后我们可以直接调用obj.age来获取一个返回值,也可以对其进行赋值。 这么做有几个缺点: 针对每一个要代理属性都要编写对应getter、setter。...在前端发送请求,我们现在经常用到应该就是fetch了,一个原生提供API。...实现一个简易断言工具 写过测试各位童鞋,应该都会知道断言这个东西 console.assert就是一个断言工具,接受两个参数,如果第一个为false,则会将第二个参数作为Error message抛出...preventExtensions 设置对象为不可扩展 getOwnPropertyDescriptor 获取一个自有属性 (不会去原型链查找) 属性描述 参考资料 Magic Methods in

81180

前端一面高频面试题(附答案)

3)Promise缺点1、无法取消Promise,一旦新建它就会立即执行,无法中途取消。2、如果不设置回函数,Promise内部抛出错误,不会反应到外部。...3、处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。...person.constructor时,其实person中并没有constructor属性,不能读取到constructor属性时,会从person原型 //也就是Person.prototype...什么是闭包,闭包作用是什么一个内部函数调用,就会形成闭包,闭包就是能够读取其他函数内部变量函数。...,在 bind() 用时,这个新函数 this 指定为 bind() 一个参数,而其余参数将作为新函数参数,供调用时使用。

54820
领券