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

更新到Jest 26后被破坏的Mocks

Jest是一个流行的JavaScript测试框架,用于编写和运行单元测试。在Jest 26版本中,一些Mocks的行为发生了变化,导致一些旧有的测试代码无法正常运行。下面是对这个问题的完善且全面的答案:

Jest是一个由Facebook开发的JavaScript测试框架,用于编写和运行单元测试。它提供了一套简单而强大的API,可以模拟函数、模块和外部依赖,以便更容易地编写可靠的测试用例。

在Jest 26版本中,一些Mocks的行为发生了变化,这可能导致一些旧有的测试代码无法正常运行。具体来说,以下是一些可能会受到影响的方面:

  1. 模块的自动Mock:在Jest 26之前,当你在测试文件中引入一个模块时,Jest会自动为该模块创建一个Mock。然而,在Jest 26中,这种自动Mock的行为发生了变化。现在,你需要显式地使用jest.mock()函数来创建一个Mock。
  2. Mock函数的默认返回值:在Jest 26之前,当你创建一个Mock函数时,它的默认返回值是undefined。然而,在Jest 26中,Mock函数的默认返回值被更改为undefined的替代值,这可能会导致一些测试代码的行为发生变化。
  3. Mock函数的调用次数:在Jest 26之前,你可以使用mockFn.mock.calls.length来获取Mock函数的调用次数。然而,在Jest 26中,这种方式被废弃了。现在,你应该使用mockFn.mock.calls.length来获取Mock函数的调用次数。

为了解决这些问题,你可以采取以下措施:

  1. 更新你的测试代码:根据Jest 26的变化,更新你的测试代码,确保它们与新版本的Jest兼容。你可以查阅Jest的官方文档,了解更多关于Mocks的变化和如何更新测试代码的信息。
  2. 手动创建Mocks:在测试文件中,使用jest.mock()函数来显式地创建Mocks,以替代Jest 26之前的自动Mock行为。这样可以确保你的测试代码能够正确地模拟依赖项。
  3. 检查Mock函数的默认返回值:检查你的Mock函数的默认返回值是否符合预期。如果需要,你可以使用mockFn.mockReturnValue()函数来设置Mock函数的返回值。
  4. 更新Mock函数的调用次数检查:将你的测试代码中的mockFn.mock.calls.length替换为mockFn.mock.calls.length,以获取Mock函数的调用次数。

总结起来,Jest 26版本对Mocks的行为进行了一些改变,可能会影响旧有的测试代码。为了解决这个问题,你需要更新测试代码,手动创建Mocks,并检查Mock函数的默认返回值和调用次数。你可以参考Jest的官方文档,了解更多关于这个问题的信息和解决方案。

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

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务(Tencent Blockchain):https://cloud.tencent.com/product/tencentblockchain
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 浅谈前端测试

    来源:http://www.51testing.com 前端测试或许好多人误解,也许大家更加倾向于编写面向后端测试,逻辑性强,测试方便等   聊到这导致了好多前端从来不写测试(测试全靠手点~~~...代码完成必不可少就是单元测试,单元测试需要注意问题比较琐碎  mock   当引入三方库时,不得不 mock 数据,因为单元测试更多讲求是局部测试,不要受外界三方引入包影响   例如: const...  我们在最开始创建了一个 mocks 对象,用来模拟数据,由于 readFileSync 方法可能存在多种返回结果(成功或报错),所以暂时用 jest.fn() 模拟   other 里面则是放一些固定测试数据...,注意就是对一个 jest.fn() 多次进行修改会导致测试用例之间相互影响,这里尽量使用 Once 结尾方法,复杂场景可以如下 beforeEach(() => {  mocks.fs.readFileSync.mockReset...,抛开了 mock 流程,这里会报测试未通过,原因是 require 同时 env 已经赋值为 undefined,我们再试着改变 NODE_ENV 环境变量时,程序不会再次执行,当然了,处理起来也十分简单

    1.7K10

    在 vue-test-utils 中 mock 全局对象

    mocks 加载选项 mocks 加载选项 是一种将任何属性附加到 Vue.prototype 上方式。...mocks 选项用处多多,而我觉得最最常用正是开头提到过那三样。...(译注:通过这种方式就不能在单元测试中耦合与特定语言相关内容了,因为翻译功能实际上已失效,也更无法处理可选参数等) 使用配置设置默认 mocks 有时需要一个 mock 默认值,这样就不用为每个测试用例都设置一遍了...Mock Value" 这个示例中用到了 Jest,所以我将把默认 mock 描述在 jest.init.js 文件中 -- 该文件会在测试运行前自动加载。... (译注:依然无法应付复杂翻译) 总结 本文论述了: 在测试用例中使用 mocks 以 mock 一个全局对象 用 config.mocks 设置默认 mock

    1.6K10

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

    在之前两篇教程中,我们学会了如何去测试最简单 React 组件。在实际开发中,我们组件经常需要从外部 API 获取数据,并且组件交互逻辑也往往复杂。...在这篇教程中,我们将学习如何测试复杂组件,包括用 Mock 去编写涉及外部 API 测试,以及通过 Enzyme 来轻松模拟组件交互 初次尝试 Jest Mock 我们应用程序通常需要从外部...首先通过 jest.spyOn,我们便可以监听一个函数使用情况,然后使用配套 toBeCalled Matcher 来判断该函数是否调用。整体代码十分简洁,同时也保持了很好可读性。...更新快照文件反映了我们刚刚做变化: // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ToDoList component when provided...为了进一步说明问题,让我们测试一下用户单击按钮是否从我们组件发送了实际 post 请求。

    4.8K20

    Vue Router 之单元测试

    污染测试全局命名空间,我们将会在测试中创建基础路由。这让我们能在单元测试期间细粒度控制应用状态。 编写测试 先看点代码再说吧。...使用了下面的写法,以上测试也将能通过: jest.mock("@/components/NestedRoute.vue", () => ({ name: "NestedRoute", render...我们当然可以用一个真正路由,但在这样情况下只用一个 mocks 加载选项会容易些: it("renders a username from query string", () => { const...在本例中,我们没有做任何导航或是和路由实现相关任何其他东西,所以 mocks 就挺好。我们并不真的关心 username 是从查询字符串中怎么来,只要它出现就好。...为了确定 hook 真的调用了 bustCache 并且显示了最新数据,可以使用一个诸如 Cypress.io 端到端测试工具,它也在应用脚手架 vue-cli 选项中提供了,可以使用。

    2K10

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

    模拟 对于我们程序来说,从 API 获取一些数据是很常见。但是它可能由于各种原因而失败,例如 API 关闭。我们希望测试可靠且独立,并确保可以模拟某些模块。...此类模拟文件在 _ mocks _ 目录中定义,在该目录中,文件名视为模拟模块名称。...(例如 fs 或 path ),则需要在模拟文件中明确调用 jest.mock('moduleName') Jest 允许我们对函数进行监视:接下来测试是否调用了我们所创建 get 函数。...('axios'),Jest测试和组件中都用我们模拟代替了 axios。...为了更进一步,让我们测试一下用户单击按钮是否从组件发送了实际请求。

    3.7K10

    React 应用架构实战 0x7:测试

    在这一节中,我们将学习如何使用不同测试方法来测试我们应用程序。这将使我们有信心对应用程序进行重构、构建新功能和修改现有功能,而不用担心破坏当前应用程序行为。...# 单元测试 单元测试是在应用程序单元在不依赖于其他部分情况下进行独立测试。 对于单元测试,我们将使用 Jest,它是 JavaScript 应用程序最流行测试框架。...集成测试更有价值,因为它们可以更有全面地测试应用程序,我们会测试不同部分功能、它们之间关系以及它们通信方式。 对于集成测试,我们将使用 Jest 和 React Testing Library。...,以确保所有信息都在表格中显示 waitForLoadingToFinish 是一个函数,在我们进行测试之前,它会等待所有加载提示消失 可应用于当我们必须等待某些数据获取才能断言值时 // src.../mocks/seed-db"; import { server } from ".

    1.6K80

    对 Vue-Router 进行单元测试

    污染测试全局命名空间,我们将会在测试中创建基础路由;这让我们能在单元测试期间细粒度控制应用状态。 编写测试 先看点代码再说吧。...如果你在用 Jest,其强大 mock 系统为此提供了一个优雅解决方法。可以简单 mock 掉子组件,在本例中也就是 。...使用了下面的写法,以上测试也将能通过: jest.mock("@/components/NestedRoute.vue", () => ({ name: "NestedRoute", render...我们当然可以用一个真正路由,但在这样情况下只用一个 mocks 加载选项会容易些: it("renders a username from query string", () => { const...在本例中,我们没有做任何导航或是和路由实现相关任何其他东西,所以 mocks 就挺好。我们并不真的关心 username 是从查询字符串中怎么来,只要它出现就好。

    2.2K10

    手摸手教你封装跨项目复用 Vue 组件库

    在前端项目的开发中,往往会根据业务需求,沉淀出一些项目内UI组件/功能模块(以下通称组件) 等;这些组件初期只在同一个项目中被维护,并该项目中不同页面或模块复用,此时组件逐步完善,是一个只聚焦于功能和健壮性成长期...另一种我们比较习惯方式是通过 npm 安装直接引用组件注册名称(package.json 中 name)。...用 rollup 而不是 webpack 打包组件 本例中选择了 rollup 作为打包工具: webpack 虽然功能强大,但配置复杂、生成代码冗余较多 rollup 适用于库、组件等类型源码编译...(css|less|scss)$': '/__mocks__/emptyMock.js' }, snapshotSerializers: [ 'jest-serializer-vue...,不可避免涉及到一些较通用 UI组件/功能模块 情况,将其集结发布到 npm 上,并辅以完善单元测试和可运行 demo 展示、必要文档,就能将维护组件工作量大大减轻。

    2.7K10

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

    (css|less|scss)$": "/__mocks__/stylesMock.js" }, transform: { //转译配置,RN项目配置如下,普通React项目可以使用...* toBeCalledWith:函数是否以某些参数为入参调用 * assertions:检测用例中有多少个断言调用,一般用于异步测试 四、Jest 周期函数 在写测试用例之前,可以用四个周期函数进行一些处理...七、Jest 异步测试 Jest单元测试是同步,因此面对异步操作如fetch获取数据,需要进行异步模拟测试。...创建一个mock函数,该mock函数不仅捕获函数调用情况,还可以正常执行spy函数。..._onClear).toBeCalled();//测试组件实例上方法是否调用 九、Redux测试 在使用React或者React Native时通常会使用Redux进行状态管理,需要mock store

    6.1K30

    也来扯扯 Vue 单元测试

    在 we-vue 更新到 v2.0 时候,开始全面地编写单元测试。起先使用 karma + mocha + chrome-headless 这种组合完成行级覆盖率达到 96% 测试。...所以一开始我就选择了 expect.js (expect 是 Jest 一部分,可以单独安装使用),主要是它语法符合我口味,这也为后期迁移到 Jest 省了不少事。...而使用 Jest ,只要安装它,全都搞定了。 全面的官方文档,易于学习和使用 Jest 官方文档很完善,对着文档很快就能上手。...配置简单方便 更直观明确测试信息提示 方便命令行工具 全局安装 Jest ,可以在命令行执行单元测试,配合各种命令参数,可以方便地实现执行单个测试、监视文件变化并自动执行等功能。...Chrome headless 对于 PhantomJS 来说算是一个致命打击,特别是 Chrome 官方推出 puppeteer 在短时间内已经广泛接受和使用。

    1.8K30

    前端单元测试那些事

    找到相应dom并触发事件`wrapper.find('.kauthcode_btn').trigger('click'); propsData - 组件挂载时对props设置 import {createLocalVue...作为返回值,当然你也可以给他设置返回值、定义内部实现或返回Promise对象,如下例: // 断言mockFn执行返回值为name it('jest.fn()返回值', () => { let...(mockFn())).toBe("[object Promise]"); }) jest.mock() - jest.mock 会自动根据 mock 模块组织 mock 对象。...,使用toHaveBeenCalled判断这个方法是否调用就可以了 这个例子里面,我们只需关注getCode方法,其他可以忽略。...渲染问题 - 组件库提供组件渲染html,需要通过wrapper.html()来看,可能会与你从控 制台看到html有所区别,为避免测试结果出错,还应console.log一下wrapper.html

    4.3K40

    年轻时,我不写单元测试

    在一个多人协作大型项目中,我们在开发过程中可能经常会面临到这样问题: 哎,这次我没有改动到这里啊,这怎么会有bug呢 哎,怎么新加了个功能原来功能受影响了呢 哎,这里样式为什么乱掉了 当我们提出这些...,关于不同测试框架重点,这篇文章就不详细展开了,最终结合我们项目,最终采用了facebookjest+enzyme。...shapshot就是会对组件进行一次快照记录当前状态,每一次run jest时候,对比上一次,看看是否有变化。...但是仔细想想,这其实就违背了我们单元测试初衷,笔者这里也大胆猜测下,jest官方在实现这个功能时候,应该也只是想记录下一步一步事件,当前组件html结构,对比上一次快照,来看功能是否符合预期.../__mocks__/store.js'; import appInfoData from '@/..

    86920

    2022年3月最新Eslint + Prettier + Husky + Stylelint + Jest + CICD 超详细前端单元测试&规范工程化工作流

    同时个人建议配置react-hooks插件 2.1.2 prettier prettier是格式化工具,我个人使用上偏爱使用prettier做代码格式化,如果你在上一步选择了eslint格式化大可忽略...(css|sass|scss)$": "/__mocks__/styleMock.js", "^.+\\....注意这样是有缺陷,包括但不限于缺少回滚机制、在本地编包风险 可能更多人诉求是当代码合并到某个分支,机器能自动帮我执行完打包和部署这两个步骤,如果是这样后边不用看了哈...周末要结束我要歇歇了有机会额外出...注册完毕可以拿到云开发环境ID,记下来 接着我们需要开通「新建云开发环境」-「静态页面托管」 同时全局安装腾讯云提供cli,并登陆 npm i @cloudbase/cli -g --force...tcb login 登陆做一下开发环境验证: tcb hosting detail -e {{你环境ID}} 确认已上线 4.2 自定义部署脚本 为了便于使用,我们写一个自定义脚本 utils.js

    1.9K10
    领券