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

无法为Jest自定义匹配器重现文档示例:"Expect“类型上不存在属性

问题描述:

在使用Jest进行测试时,我尝试自定义一个匹配器来重现文档中的示例,但是遇到了一个问题:“Expect”类型上不存在属性。

解决方案:

要解决这个问题,首先需要了解Jest的匹配器是如何工作的。Jest的匹配器是用于对测试结果进行断言的工具,可以用来判断实际值与期望值是否相等。

当我们尝试自定义一个匹配器时,可能会遇到这样的问题。这个问题的原因是我们没有正确地扩展Jest的Expect类型。

为了解决这个问题,我们需要做以下几步:

  1. 创建一个全局的.d.ts文件,用于扩展Jest的Expect类型。可以将这个文件命名为global.d.ts,或者根据自己的项目命名规范进行命名。
  2. 在这个文件中,我们需要声明一个全局的Matcher类型,并在其中添加我们自定义的匹配器方法。可以参考下面的代码示例:
代码语言:txt
复制
declare global {
  namespace jest {
    interface Matchers<R> {
      toBeAwesome(): R;
    }
  }
}

expect.extend({
  toBeAwesome(received) {
    const pass = received === 'awesome';
    if (pass) {
      return {
        message: () => `expected ${received} not to be awesome`,
        pass: true,
      };
    } else {
      return {
        message: () => `expected ${received} to be awesome`,
        pass: false,
      };
    }
  },
});

在上面的代码中,我们声明了一个名为toBeAwesome的匹配器方法,并在其中实现了对应的判断逻辑。这个匹配器用于判断给定的值是否为'awesome'。

  1. 确保在项目的配置文件(如tsconfig.json)中正确引用了这个全局的.d.ts文件。可以使用"include"属性或者"files"属性来指定这个文件。
  2. 现在我们可以在测试代码中使用我们自定义的匹配器了。可以参考下面的代码示例:
代码语言:txt
复制
test('toBeAwesome matcher', () => {
  expect('awesome').toBeAwesome();
  expect('not awesome').not.toBeAwesome();
});

在上面的代码中,我们使用了toBeAwesome匹配器来进行断言。如果实际值为'awesome',则断言会通过;如果实际值为'not awesome',则断言会失败。

根据以上步骤,我们可以成功地自定义一个匹配器并在测试中使用它。

推荐的腾讯云相关产品:云开发(Tencent CloudBase),它是一款无服务器云开发平台,可以帮助开发者更高效地构建云应用。详情请参考Tencent CloudBase

希望以上解决方案能帮助到您!如果您有任何其他问题,请随时提问。

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

相关·内容

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

官方文档在这里[6],如果要指定的话,如下值是对官方文档的简单摘录: •container:React Testing库将创建一个div并将该div附加到文档中。而通过这个参数,可以自定义容器。...以下是一些来自文档的查询示例: •getByLabelText:搜索与作为参数传递的给定文本匹配的标签,然后查找与该标签关联的元素。...•getByPlaceholderText:搜索具有占位符属性的所有元素,并找到与作为参数传递的给定文本相匹配的元素。...这对于断言不存在的元素非常有用。•queryAllBy:返回一个查询的所有匹配节点的数组,如果没有匹配的元素,则返回一个空数组([])。...因此,我们只需断言textContent属性的计数是递增或递减: expect(counter.textContent).toEqual("1"); expect(counter.textContent

14.9K33
  • Vue 业务系统如何落地单元测试

    itemName=firsttris.vscode-jest-runner配置项:设置 => jest-Runner Config Code Lens Selector:匹配的文件,**/*....Jest常用方法:文档 // 例子 describe('versionToNum 版本号转数字', () => { it('10.2.3 => 10.2', () => { expect(versionToNum...image.png 原有逻辑:系统参数存全局变量,自定义参数存全局变量 无法看出多少种类型与接口数量 无法在多个位置直接复用 getCondition (fIndex, oneFunnel) { //...($api.analysis.customAppParameterList).toBeCalled() }) }) it('获取非预置埋点 - 不存在类型', () =>...如果能够养成文档先行的习惯,先设计模块、测试用例,再编写代码,会更高效。 理解: 单元测试有长期价值,也有执行成本。 好的架构设计是单测的土壤,单一职责的模块设计单测、增加单元测试更加顺畅。

    4K30

    Jest单元测试之旅—实践总结

    其中toEqual是jest提供的匹配器,jest提供了非常多的匹配器,这里列举一些常用: toBe:使用Object.is精准匹配 toEqual:相比toBe会做深层比较,一般用于检测对象的值 toBeNull...wait函数其实就是通过setTimeout进行包装的,这个示例中我们重点分析应该如何测试定时。...这是因为Jest默认的超时时间5秒,但是我们在进行测试时不会真的等那么久,这时候Jest就提供了一系列工具方法解决该问题。...; expect(result).resolves.toEqual('success'); }) }) 现实开发中,我们不只是单个定时任务运行,有时候会存在循环调用,而循环调用则无法通过runAllTImers...需要通过对私有成员使用数组访问或者通过prototype属性进行模拟。示例如下: import { randomNumber } from '.

    10.3K20

    你不知道的 Vue 单元测试(6000字实战单元测试)

    主流的单元测试运行有很多,比如 Jest、Mocha 和 Karma 等,这几个在 Vue-Test-Utils 文档里都有对应的教程,这里我们只介绍 Vue-Test-Utils + Jest 结合的示例...需要匹配的文件后缀 transform 匹配到 .vue 文件的时候用 vue-jest 处理, 匹配到 .js 文件的时候用 babel-jest 处理 moduleNameMapper 处理 webpack...修改目录配置 接下来就是开始编写单元测试文件了,写之前我们先把测试文件目录修改下为 __tests__,同时修改 jest.config.js 如下配置,注意其中的 testMatch 已经修改为匹配...,这个对象包含了组件的 name 或 ref 属性,比如可以这样用:wrapper.find({ name: 'my-button' }) wrapper.vm 是一个 Vue 实例,只有 Vue 组件的包裹才有...vm 这个属性;通过 wrapper.vm 可以访问所有 Vue 实例的属性和方法。

    11.3K41

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

    Jest基础使用 项目接入Jest 安装JestJest类型文件,类型文件可以让代码编辑(如Webstorm)提供Jest相关接口的参数提示: npm install -D jest @types/...另外,要注意系统路径的差异,可能会造成Mac编写的测试在Windows却运行失败: // window的路径,在Mac上会报错expect(value).toMatchInlineSnapshot(...具体看istanbul文档介绍 注意,一般来说,无法覆盖的情况都是因为功能代码编写方式的问题,尽量尝试改进功能代码的编写方式来满足测试需求,避免跳过测试覆盖统计。...Webstorm —— Jest最好的调试工具 Webstorm调试Jest测试非常便利,事实,上文中测试截图都是在Webstorm运行的结果,在运行、调试两个方面,Webstorm体验都比node-inspect...定义函数实现 mock模块 自动mock模块 自定义模块 单元测试之于开发 开发掌握单元测试,犹鱼之有水。

    5K40

    实例入门 Vue.js 单元测试

    Comparison Asserts expect(sth).toBeGreaterThan(number) expect(sth).toBeLessThanOrEqual(number) 类型性断言...Jest 是一个由 Facebook 开发的测试运行,相对其他测试框架,其特点就是就是内置了常用的测试工具,比如自带断言、测试覆盖率工具,实现了开箱即用。...实际使用中,适当的在 package.json 的 jest 字段或独立的 jest.config.js 里自定义配置一下,会得到更适合我们的测试场景。...一个 无法测试 或 难以测试 的组件,基本就等同于 设计得很拙劣 的组件. 组件之所以难以测试,是因为其有太多的 props、依赖、引用的模型和对全局变量的访问 -- 这都是不良设计的标志。...(); wrapper.find('.zero').trigger('click'); expect(spy2).toHaveBeenCalled(); }) }); 注:该示例中只是检验了是否被点击

    2.9K20

    Jest测试语法系列之Expect

    pass指示是否存在匹配,message提供了一个没有参数的函数,在失败时返回错误消息。因此当passfalse时,当expect(x). yourmatcher()失败时,消息应该返回错误消息。...因此,你应该编写一个精确的失败消息,以确保自定义断言的用户具有良好的开发经验。 expect.anything() 它匹配除null或undefined之外的任何内容。...(object) 匹配任何未递归地匹配预期属性的接收对象。...如果想要检查两个数组在它们的元素数量是否匹配,而不是arrayinclude,这是非常有用的,因为它允许在接收的数组中添加额外的元素。...下面的示例包含一个带有嵌套属性的houseForSale对象。我们使用tohave属性来检查对象中各种属性的存在性和值。

    3.6K20

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

    然后我翻阅了大量的文档,发现基于dva的单元测试文档比较少,因此在有了一番实践之后,我梳理了几篇文章,希望对于想使用 Jest 进行 React + Dva + Antd 单元测试的你能有所帮助。...(value):与 toBeUndefined 相反 toBeTruthy(value):匹配任何语句真的值 toBeFalsy(value):匹配任何语句假的值 toBeGreaterThan(number...{ error: 'id2的用户不存在', }); }); }); 注意,上面的第二个测试用例可用于测试promise返回reject的情况。...({ error: 'id2的用户不存在', }); }); async/await 我们知道async/await其实是Promise的语法糖,可以更优雅地写异步代码,jest中也支持这种语法...(2); } catch (e) { expect(e).toEqual({ error: 'id2的用户不存在', }); } }); “⚠️ 使用async不用进行

    5K20

    如何做前端单元测试

    另一个方面希望通过代码示例,让你掌握写单元测试实践能力。 前端为什么需要单元测试? 必要性:JavaScript 缺少类型检查,编译期间无法定位到错误,单元测试可以帮助你测试多种异常情况。...(sum(1, 2)).toBe(3); }); }) 可见无论是受欢迎度和写法Jest 都有很大的优势,因此推荐你使用开箱即用的 Jest 如何开始?...*改写 **.babelrc { "presets": ["@babel/preset-env", "@babel/preset-typescript"] } 为了解决编辑jest 断言方法的类型报错.../sum'; test('sum(2, 4) 不等于 5', () => { expect(sum(2, 4)).not.toBe(5); }) .toEqual 匹配器会递归的检查对象所有属性属性值是否相等...(getIntArrayWrapFn).toThrow('"getIntArray"只接受整数类型的参数'); }) .toMatch 传入一个正则表达式,它允许我们来进行字符串类型的正则匹配 .

    3.3K20

    Jest:给你的 React 项目加上单元测试

    注释和文档容易忘记修改,但测试用例的描述永远是准确的,因为不对就无法通过测试; 可测试性好的代码,往往可维护性更好。...可以通过设置 Jest 配置文件的 testMatch 或 testRegex 选项进行修改,或者 package.json 下的 "jest" 属性。...// sum(1, 1) 的结果是否 2 expect(sum(1, 1)).toBe(2); expect 的实现思路大致: function expect(value) { return...describe('一个有多个属性的对象的测试', () => { test('test 1', async () => { expect(obj.a).toBeTruthy(); })...React Testing Library 是 以用户角度 的测试库,能够模拟浏览的 DOM,将 React 组件挂载上去后,我们使用其提供的一些模拟用户操作的 API 进行测试。

    2.9K20

    Jest 进行 JavaScript 测试

    对于每个对象,我们必须检查名为“url”的属性,如果属性的值与给定的术语匹配,那么我们应该在结果数组中包含匹配的对象。...根据规范,测试中的函数应该省略其 url 属性与给定搜索项不匹配的对象。..., "link"); 在 Jest 测试中,你应该将函数调用包含在 expect 中,它与匹配器(用于检查输出的Jest函数)一起进行实际测试。...(filterByTerm(input, "link")).toEqual(output); }); }); (有关 Jest 匹配器的更多信息,请查看文档(https://jestjs.io/docs...实际这是一件好事。我们会在下一节修复它! 修复测试 真正缺少的是 filterByTerm 的实现。方便起见,我们将在测试所在的同一文件中创建该函数。

    2.7K30

    自动化测试 Jest 的使用总结基础篇

    验证参数是否正确 jest 提供了多种匹配器可以对不同的数据类型匹配,比如:array,string,object 等等,而它们的匹配器分别是 toContain ,toMatch,toEqual。...同时, jest 也支持做不匹配的校验,也就是反向的校验。下面就是一些不同的匹配器。 简单类型的校验; 使用 tobe() 匹配器做简单类型的校验,校验结果是否正确。...判断数据是否空的情况 官方文档把这一类的校验命名为 Truthiness ,也就是有效性。...(sum(1,2)).toBeGreaterThan(2) }); 判断字符类型 字符类型是通过增则匹配的方法去进行校验。...(e).toMatch('error'); } }); 其中,在进行异常测试的时候需要加上 expect.assertions(1) 断言次数,否则测试不会通过,这个是jset 文档特别标记的

    2.7K111

    JavaScript测试教程-part 2:引入 Enzyme 并测试 React 组件

    设置 Enzyme 继续一篇文章的内容,假设你 Jest 已经能够工作了。如果还没有,请随时查看课程的一部分。...这里要注意一个非常重要的点:即使我们用了 Enzyme,但测试运行程序仍然是 Jest。由于我们用的是 expect 函数,因此可以使用各种可供调用的匹配器函数。我已经在课程的第一部分中提到了它们。...相关列表,请访问 Jest 文档【https://jestjs.io/docs/zh/expect】。 让我们创建一些更有趣的测试。先创建一个全新的组件。...在第一个测试中,我们使用了 toContainReact 函数,这是一个自定义匹配器函数。它是 enzyme-matchers 库的一部分。...使用的渲染类型称为“浅渲染”。之所以这样称呼,是因为它不渲染任何子组件。在编写单元测试时,它工作得很好。在本教程的后续部分中,我将介绍其他类型的渲染,并学习如何测试程序的不同部分。

    1.4K50

    Jest中Mock网络请求

    描述# 文中提到的示例全部在 jest-axios-mock-server仓库 中,直接使用包管理安装就可以启动示例,例如通过yarn安装: Copy$ yarn install 在package.json...使用了JSDOM模拟的浏览环境,在jest.config.js中配置的setupFiles属性中配置了启动文件test/config/setup.js,在此处初始化了JSDOM。...jest.fn完成Implementations,这里通过在返回之前写入了一个hook函数,并且在各个test时再实现断言或者是指定返回值,这样就可以解决上述问题,实际就是实现了Jest中Mock Functions...,当然这个服务也是在本地启动的,通过指定对应的path相关的请求与响应数据进行测试,如果请求的数据不正确,则不会正常匹配到相关的响应数据,这样这个请求会直接返回500,返回的响应数据如果不正确的话也会在断言时被捕捉...关于要测试的数据,指定了一个DataMapper类型,以减少类型出错导致的异常,在这里示例了两个数据集,另外在匹配query和data时是支持正则表达式的,对于DataMapper类型的结构还是比较标准的

    2.6K30

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

    而且BEM仅仅是一种规范,需要团队中的开发者自行遵守,在可靠性无法得到有效保障,而且还可能和第三方库的命名冲突。...JavaScript是非常灵活的,这得益于它的弱类型语言特点,但也是因为这个原因,我们只有在运行时才知道变量到底是什么类型无法在编译阶段作出任何类型错误的提示,同时由于函数参数类型的不确定性,编译的编译结果很可能无法被复用...PropTypes React在15.5的版本后将类型检查React.PropTypes移除后使用prop-types库代替,它是一种运行时的类型检测机制,包含一整套验证,可用于确保组件属性接收的数据是正确的类型...在**组件文档和demo**这一章节中我们已经有了组件示例,并构建了文档页,可以直接接入团队的自动化测试系统,结合使用puppeteer进行截图对比。...[QMDialog测试结果] mock 这是我们参照官网的文档接入的mock示例,这里需要注意__mock__的目录结构,详见文档

    4.3K112

    Jest中Mock网络请求

    描述 文中提到的示例全部在 jest-axios-mock-server仓库 中,直接使用包管理安装就可以启动示例,例如通过yarn安装: $ yarn install 在package.json中指定了一些命令...使用了JSDOM模拟的浏览环境,在jest.config.js中配置的setupFiles属性中配置了启动文件test/config/setup.js,在此处初始化了JSDOM。...jest.fn完成Implementations,这里通过在返回之前写入了一个hook函数,并且在各个test时再实现断言或者是指定返回值,这样就可以解决上述问题,实际就是实现了Jest中Mock Functions...,当然这个服务也是在本地启动的,通过指定对应的path相关的请求与响应数据进行测试,如果请求的数据不正确,则不会正常匹配到相关的响应数据,这样这个请求会直接返回500,返回的响应数据如果不正确的话也会在断言时被捕捉...关于要测试的数据,指定了一个DataMapper类型,以减少类型出错导致的异常,在这里示例了两个数据集,另外在匹配query和data时是支持正则表达式的,对于DataMapper类型的结构还是比较标准的

    3.4K30

    Vue-Test-Utils + Jest 单元测试入门与实践

    testMatch 匹配哪些文件进行测试 transformIgnorePatterns 不进行匹配的目录 moduleFileExtensions告诉Jest需要匹配的文件后缀 transform...匹配到 .vue 文件的时候用 vue-jest处理, 匹配到.js文件的时候用 babel-jest 处理 moduleNameMapper 处理webpack的别名,比如:将@表示 /src目录...expectJest 内置的断言风格,业界还存在别的断言风格比如 Should、Assert 等。 toBe 是 Jest 提供的断言方法, 更多的可以到Jest Expect 查看具体用法。...,这个对象包含了组件的 name 或 ref 属性,比如可以这样用:wrapper.find({ name: 'my-button' }) wrapper.vm 是一个 Vue 实例,只有 Vue 组件的包裹才有...vm 这个属性;通过 wrapper.vm 可以访问所有 Vue 实例的属性和方法。

    2.6K10
    领券