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

如何让Jest自定义匹配器在typescript中工作?

Jest是一个流行的JavaScript测试框架,它提供了许多内置的匹配器来验证测试结果。然而,有时候我们需要自定义匹配器来满足特定的测试需求。在TypeScript中使用Jest自定义匹配器的步骤如下:

  1. 创建一个新的文件,命名为customMatchers.ts(可以根据需要自定义文件名)。
  2. 在该文件中,定义一个全局的expect扩展,用于注册自定义匹配器。可以使用expect.extend方法来实现这一点。
  3. expect.extend方法中,定义一个新的匹配器函数,该函数接收两个参数:实际值(received)和期望值(expected)。
  4. 在匹配器函数中,使用this.utils对象提供的工具方法来执行实际值和期望值之间的比较,并返回一个包含pass属性和message属性的对象。
  5. message属性中,提供一个描述性的错误消息,以便在测试失败时进行显示。
  6. customMatchers.ts文件中,导出自定义匹配器函数。
  7. 在测试文件中,使用import语句将customMatchers.ts文件导入。
  8. 在测试用例中,使用expect函数并调用自定义匹配器函数,传入实际值和期望值。

以下是一个示例,演示如何在TypeScript中使用Jest自定义匹配器:

代码语言:txt
复制
// customMatchers.ts

declare global {
  namespace jest {
    interface Matchers<R> {
      toBeEven(): R;
    }
  }
}

export const customMatchers: jest.ExpectExtendMap = {
  toBeEven(received: number) {
    const pass = received % 2 === 0;
    if (pass) {
      return {
        pass: true,
        message: () => `Expected ${received} not to be even`,
      };
    } else {
      return {
        pass: false,
        message: () => `Expected ${received} to be even`,
      };
    }
  },
};
代码语言:txt
复制
// test.spec.ts

import { customMatchers } from './customMatchers';

expect.extend(customMatchers);

test('should pass when number is even', () => {
  expect(2).toBeEven();
});

test('should fail when number is odd', () => {
  expect(3).toBeEven();
});

在上面的示例中,我们定义了一个自定义匹配器toBeEven,用于验证一个数字是否为偶数。在测试文件中,我们导入了customMatchers.ts文件,并使用expect.extend方法注册了自定义匹配器。然后,在测试用例中,我们使用expect函数并调用自定义匹配器toBeEven来验证数字的偶奇性。

这是一个简单的示例,你可以根据自己的需求定义更复杂的自定义匹配器。请注意,这只是一个示例,实际使用中可能需要根据具体情况进行调整。

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

请注意,以上仅为腾讯云的一些相关产品和服务,其他云计算品牌商也提供类似的产品和服务。

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

相关·内容

从 0 开始手把手带你搭建一套规范的 Vue3.x 工程化项目

自定义配置提交说明 从上面的截图可以看到,git cz 终端操作提示都是英文的,如果想改成中文的或者自定义这些配置选项,我们使用 cz-customizable 适配器。...样式相关'], ['deps', '项目依赖'], ['auth', '对 auth 修改'], ['other', '其他修改'], // 如果选择 custom,后面会你再输入一个自定义的...npm i @types/jest -D TypeScript 的编译器也会提示 jest 的方法和类型找不到,我们还需把 @types/jest 添加根目录下的 ts.config.json(TypeScript...image 执行单元测试 根目录下 package.json 文件的 scripts ,添加一条单元测试命令:"test": "jest"。 ?...你可以 jest.config.js 配置文件,自由配置单元测试文件的目录。 单元测试全部通过时的终端显示信息 ? 单元测试未全部通过时的终端显示信息 ?

6.3K62

Jest + React Testing Library 单测总结

如果想要看如何安装 Jest,可以参考:Jest 上手。 Jest 常用的配置项根目录jest.config.js ,常用的配置可以参考:Jest 配置文件。...2.2 Jest配器 Jest配器 expect 断言时,用来检查值是否满足一定的条件。...还提供了一些匹配器专门用来测试前端组件,这些扩展的匹配器前端组件的测试变得更灵活。...2.3 Jest Mock 查看官方文档的时候,Jest配器还有一类匹配器专门用来检查 Jest Mock 函数的。...3.4 RTL + Jest配器  2.2 Jest配器 可以看到 Jest 提供了一些匹配器,然而 Jest 自己提供的匹配器很难去实现组件测试的一些特殊条件,所以 RTL 自己实现了一个

4.6K20
  • 【Bun1.0】使用 Bun.js 构建快速、可靠和安全的 JavaScript 应用程序

    它们执行了许多冗余工作;当您运行 jest 时,您的代码将被各种工具解析 3 次以上!而为了将所有东西粘合在一起所需的胶带、插件和适配器总是会在最终磨损。...它的目标是构建软件的体验更快、更少令人沮丧,更有趣。 8兼容性 Bun 是 Node.js 的即插即用替代品。这意味着现有的 Node.js 应用程序和 npm 包可以 Bun 中正常工作。...您甚至可以同一文件中使用 import 和 require()。它只是工作。...插件 API 受 esbuild 启发,这意味着大多数 esbuild 插件 Bun 中都可以正常工作。...现在,可以浏览器访问 http://localhost:3000/,并将会看到 file.txt 文件的内容。

    81930

    不影响开发体验,如何将单体 Node.js 变成 Monorepo

    多条 TypeScript 更严谨的规则 */ }, "include": ["src/**/*.ts"], "exclude": ["node_modules", "dist",...此外,我们尽力它的配置(使用命令行参数)与 servers/monolith/package.json 的配置一致。...transpiled 条件是自定义的,所以你可以随意指定其名称。 为了这个包在转译后的运行时上下文中运行,需要修改相应的 node 命令,指定自定义条件。...将通用配置提取到包并扩展它 现在,最关键的构建和开发工作流已经可以正常工作了,接下来,要让测试执行器、代码分析器和格式化器针对不同的包执行时行为一致,同时还要留出定制空间。...、Prettier 和 Jest 配置; 安装 Turborepo 优化开发和构建工作流。

    1.9K20

    可能是目前最详细从零开始配置 TypeScript 项目的教程

    Commit 信息如何和 Github Issues 关联? 设计一些库包时如何生成版本日志? TypeScript 如何自动生成库包的声明文件?...如何设计一个通用的 git hook ? git hook 可以采用 Node 脚本进行设计吗?如何做到? lint-staged 的功能是什么? VS Code 配置的用户和工作区有什么区别?...如何引入 ES Module 库包?构建层面和包描述文件层面需要注意哪些方面? 谈谈你对 TypeScript 声明文件的理解?制作库包时如何对外识别声明文件?在外部使用时有哪些好处?...进行解析,因此为了 ESLint 中支持 TypeScript 代码检查需要制作额外的自定义解析器[54](Custom Parsers,ESLint 的自定义解析器功能需要基于 ESTree[55...温馨提示:想了解更多 Git Hook 信息可以查看 Git Hook 官方文档[84] 或 Git 钩子:自定义你的工作流[85]。

    4.9K22

    如何做前端单元测试

    我认为其中一个很大的原因是很多人对单元测试认知不够,因此我写了这边文章,一方面期望通过这篇文章你对单元测试有一个初步认识。另一个方面希望通过代码示例,你掌握写单元测试实践能力。...调查的另一个有趣的见解是,大型组织单元测试更受欢迎。其中一个原因可能是,由于大型组织需要处理大规模的产品,以及频繁的功能迭代吧。这种持续的迭代方式,迫使他们进行自动化测试的投入。...都有很大的优势,因此推荐你使用开箱即用的 Jest 如何开始?...文件 jest 需要借助 .babelrc 去解析 TypeScript 文件再进行测试 安装依赖 npm install --save-dev @babel/preset-typescript *...同时阅读过程如果你有任何问题,或者有更好见解,更好的框架推荐,欢迎你评论区留言!

    3.3K20

    TypeScript编写React的最佳实践

    React 和 TypeScript 如何一起使用 开始之前,让我们回顾一下 React 和 TypeScript如何一起工作的。...接下来,通过将以下内容添加到您的来更新工作区设置 .vscode/settings.json : { "editor.formatOnSave": true } 保存时, VS Code 会发挥它的魔力并修复您的代码...第一个例子,我们使用函数声明式写法,我们注明了这个函数返回值是 React.ReactNode 类型。相反,第二个例子使用了一个函数表达式。...记住这两种方式可能会人混淆。这主要取决于设计选择。无论您选择项目中使用哪个,都要始终如一地使用它。 Props 我们将介绍的下一个核心概念是 Props。...这是一个 React 和 TypeScript 协同工作的成果。 极少数情况下,你需要使用一个空值初始化 Hook ,可以使用泛型并传递联合以正确键入 Hook 。

    4.7K51

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

    在前端开发单测本身并不是被特别看重的环节,特别是大部分人作为业务开发在如此卷的环境下、业务不断迭代,单测带来的好处并不能被完全发现,反之前期会人觉得浪费时间并且耽误开发进度。...我认为,单测就像基金,需要长期持有才能看到本身的价值,特别是项目不断的迭代、人员流失以至于在后期的维护单测就越发的重要,它是你大胆修改或重构代码的基石,《重构》一书中,第一章节就讲到:“重构的第一步是确保即将修改的代码拥有一组可靠的测试...这里简单搭建typescript+jest环境已供我们学习使用。...其中toEqual是jest提供的匹配器jest提供了非常多的匹配器,这里列举一些常用: toBe:使用Object.is精准匹配 toEqual:相比toBe会做深层比较,一般用于检测对象的值 toBeNull...我们难免会遇到使用setTimeout\setInterval,刚刚在异步用例wait函数其实就是通过setTimeout进行包装的,这个示例我们重点分析应该如何测试定时器。

    10.3K20

    Sentry 的前端测试实践:从 Enzyme 迁移到 RTL

    在这篇文章,我们将讨论如何将我们的组件测试从 Enzyme 迁移到 React Testing Library(RTL)。...上图是对单个组件的 Jest 测试结果。由于每个测试案例执行后缺少清理操作,每个测试的执行时间都会变长。 我们进行了 PoC,证明使用 RTL 会测试执行稍微快一些。...但是,使用 userEvent.type 修改了一些测试后,我们发现一些测试执行超时,因为 Jest 的最长执行时间是 5 秒。...实际的迁移时间线  往后,TypeScript 无处不在 迁移过程,一些工程师将测试转换进一步推进,同时将测试转换为 TypeScript。...TypeScript 与编辑器(如 VS Code)的语言服务器特性相结合,添加代码时不断地提供实时提示,这有助于识别出传给组件的不必要或不正确的 props,并用户体验变得更好。

    62110

    你可能已经忽略的git commit规范

    引言 日常的开发工作,我们通常使用 git 来管理代码,当我们对代码进行某项改动后,都可以通过 git commit 来对代码进行提交。...但是日常工作,大多数同学对于 log 信息都是简单写写,没有很好的重视,这对于项目的管理和维护来说,无疑是不友好的。...然后会你选择本次提交影响到的文件: ? 后面会你分别写一个简短的和详细的提交描述: ? 最后会你去判断本次提交是否是BREAKING CHANGE或者有关联已开启的issue: ?...可以 git hook 的各个阶段执行我们 package.json 配置好的 npm script。...首先安装 husky: npm install --save-dev husky 接着 package.json 配置 commitmsg 脚本: "husky": { "hooks": {

    2.3K30

    写代码无BUG,网易云前端单元测试方案总结

    前端单元测试的领域也很多,这里主要讲对于前端组件如何进行单元测试,最后会主要介绍下对于 React 组件的一些测试方法总结。...,如果在 Node 只需要加一层 babel 转换,如果是真实浏览器,则需要增加 webpack 处理步骤。...,而且支持的功能更加清晰,不用考虑如何组合使用的问题,而且下文介绍的 jest 测试框架也是使用这种风格。...Jest 和 Jasmine 具有非常相似的 API ,所以 Jasmine 中用到的工具 Jest 依然可以很自然地使用。...总结 如果我推荐的话,对于真实浏览器我会推荐 Karma + Jasmine 方案测试,对于 React 测试 Jest + Enzyme JSDOM 环境下已经能覆盖大部分场景。

    9.6K20

    从项目演进看前端工程化发展

    比如,我们要思考: 开源证书如何选择 库文档如何编写,才能做到使用者快速上手 TODO 和 CHANGELOG 需要遵循哪些规范,有什么讲究 如何完成一个流畅 0 error, 0 warning 的构建流程...作为一个库开发者,首先需要在 Github 对项目进行 fork,再通过 Jslib 内置的 npm script 进行自定义的初始化操作。...比如,如果开发者选择了使用 TypeScript 以及英语环境构建项目,那么核心流程初始化 rolluo.config.js 文件时,我们读取 rollup.js.tmpl,并将相关信息(比如对 TS...比如,我习惯使用 Jest 进行单元测试,那么 Jest 相关的 npm 脚本可以进行抽象,新的项目 package.json 引入: "scripts": { "test": "lucas-script...它会在当前的测试流程,赋值相应的环境变量,判断 Jest 的运行是否需要进行监听(watch 参数),同时获取 Jest 配置,并最终运行 Jest

    1.1K20

    Jest进阶:接入ts、集成测试与覆盖率统计

    最坑的一点是,除了 jest 的配置文件,还要修改 typescript 对应的文件, tsconfig.json 内容如下。...types 必须添加 jest ,否则找不到 expect 、 describe 等变量的定义。...集成测试 持续继承测试我们借助 https://travis-ci.org/ 这个平台,它的工作流程非常简单: 它平台上授权 github 仓库的权限,github 仓库下配置 .travis.yml...平台都会接收到通知 读取 .travis.yml 文件,然后创建一个虚拟环境,来跑配置好的脚本(比如启动测试脚本) 它的优点在于,测试代码推上去后,直接在账号下的控制台就能看到测试结果,非常方便;而且可以配置文件...,指明多个测试环境,比如 node 有 6、8、10,测试更具有信服力。

    2.8K20

    前端食堂技术周刊第 37 期:Google IO 2022、TS 4.7 RC、WinterCG 社区组成立、Lerna 复活

    构建目标改为 node16; #private 私有字段上支持 typeof 还存在兼容性问题,不会出现在 4.7 的正式版; Breaking Changes 取消了 strictNullChecks...这样可以云计算或者边缘计算的平台提供和 Web 一致的 API,而不是各自开发自己的 API。对于社区开发者来说,不再需要额外学习一套 API,写一套代码就可以部署到不同平台。”...GitHub 项目精选[10] 这篇博文中作者收集了很多 GitHub 上好玩的项目,工作累了来冲浪一下吧。...好文推荐 下面来看一下好文推荐,本周推荐的好文是: Partytown 如何从第三方脚本给网页“减肥”[13] 【访谈实录】对话 Lee Robinson :聊聊前端的未来 & Vercel 其他信息...www.webdesignmuseum.org/web-design-history [12] State of CSS 2022: https://web.dev/state-of-css-2022/ [13] Partytown 如何从第三方脚本给网页

    55120

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

    设置 Enzyme 继续上一篇文章的内容,假设你 Jest 已经能够工作了。如果还没有,请随时查看课程的上一部分。...这里要注意一个非常重要的点:即使我们用了 Enzyme,但测试运行程序仍然是 Jest。由于我们用的是 expect 函数,因此可以使用各种可供调用的匹配器函数。我已经课程的第一部分中提到了它们。...第一个测试,我们使用了 toContainReact 函数,这是一个自定义配器函数。它是 enzyme-matchers 库的一部分。...要将其与 Jest 一起使用,请安装 jest-enzyme 包。 1npm install jest-enzyme 最后要做的是将其导入 setupTests 文件。...在编写单元测试时,它工作得很好。本教程的后续部分,我将介绍其他类型的渲染,并学习如何测试程序的不同部分。它将包括快照测试和模拟数据之类的技术。下次见!

    1.4K50

    万字详文:彻底搞懂 Jest 单元测试框架

    什么是Jest 测试意味着什么 我怎么知道要测试什么 测试块,断言和匹配器 如何实现测试块 如何实现断言和匹配器 CLI 和配置 模拟 怎么模拟一个函数 执行环境 作用域隔离 V8 虚拟机 运行单测回调...最后&源码 彻底搞懂 Jest 单元测试框架 本文主要给大家深入了解 Jest 背后的运行原理,并从零开始简单实现一个 Jest 单元测试的框架,方便了解单元测试引擎是如何工作的,Jest 编写单测相信我们已经很熟悉了...,但 Jest如何工作的我们可能还很陌生,那让我们一起走进 Jest 内心,一同探究单元测试引擎是如何工作的。...,为了测试同一个文件夹创建一个测试文件,命名为 test.spec.js,这特殊的后缀是 Jest 的约定,用于查找所有的测试文件。...模拟 复杂的测试场景,我们一定绕不开一个 Jest 术语:模拟(mock) Jest 文档,我们可以找到 Jest 对模拟有以下描述:”模拟函数通过抹去函数的实际实现、捕获对函数的调用,以及在这些调用传递的参数

    7.8K20
    领券