1幻易云-湖北十堰高防云服务器 4H4G15M月付88元6982Zbolg插件免登录购买插件免授权破解版5013蓝易云-11月推广得现金红包-最高奖励1000元！65542022年最新wordpress主题破解版本Zibll子比主题V6.5最新完美破解版 全网首发 站长亲测9635CentOS系统怎么设置自动连接网络，图文教程详解810
注册登录

【实战】一、Jest 前端自动化测试框架基础入门（二） —— 前端要学的测试课 从Jest入门到TDD BDD双实战（二）

马肤
这是懒羊羊

文章目录

    • 一、Jest 前端自动化测试框架基础入门
      • 5.Jest 中的匹配器
        • toBe 匹配器
        • toEqual匹配器
        • toBeNull匹配器
        • toBeUndefined匹配器和toBeDefined匹配器
        • toBeTruthy匹配器
        • toBeFalsy匹配器
        • 数字相关的匹配器
        • 字符串相关的匹配器
        • 数组相关的匹配器
        • 异常情况的匹配器
        • 6.Jest 命令行工具的使用
          • 模式 f
          • 模式 o
          • 模式 t
          • 模式 p

            学习内容来源：Jest入门到TDD/BDD双实战_前端要学的测试课

            相对原教程，我在学习开始时（2023.08）采用的是当前最新版本：

            项版本
            @babel/core^7.16.0
            @pmmmwh/react-refresh-webpack-plugin^0.5.3
            @svgr/webpack^5.5.0
            @testing-library/jest-dom^5.17.0
            @testing-library/react^13.4.0
            @testing-library/user-event^13.5.0
            babel-jest^27.4.2
            babel-loader^8.2.3
            babel-plugin-named-asset-import^0.3.8
            babel-preset-react-app^10.0.1
            bfj^7.0.2
            browserslist^4.18.1
            camelcase^6.2.1
            case-sensitive-paths-webpack-plugin^2.4.0
            css-loader^6.5.1
            css-minimizer-webpack-plugin^3.2.0
            dotenv^10.0.0
            dotenv-expand^5.1.0
            eslint^8.3.0
            eslint-config-react-app^7.0.1
            eslint-webpack-plugin^3.1.1
            file-loader^6.2.0
            fs-extra^10.0.0
            html-webpack-plugin^5.5.0
            identity-obj-proxy^3.0.0
            jest^27.4.3
            jest-enzyme^7.1.2
            jest-resolve^27.4.2
            jest-watch-typeahead^1.0.0
            mini-css-extract-plugin^2.4.5
            postcss^8.4.4
            postcss-flexbugs-fixes^5.0.2
            postcss-loader^6.2.1
            postcss-normalize^10.0.1
            postcss-preset-env^7.0.1
            prompts^2.4.2
            react^18.2.0
            react-app-polyfill^3.0.0
            react-dev-utils^12.0.1
            react-dom^18.2.0
            react-refresh^0.11.0
            resolve^1.20.0
            resolve-url-loader^4.0.0
            sass-loader^12.3.0
            semver^7.3.5
            source-map-loader^3.0.0
            style-loader^3.3.1
            tailwindcss^3.0.2
            terser-webpack-plugin^5.2.5
            web-vitals^2.1.4
            webpack^5.64.4
            webpack-dev-server^4.6.0
            webpack-manifest-plugin^4.0.2
            workbox-webpack-plugin^6.4.1"

            具体配置、操作和内容会有差异，“坑”也会有所不同。。。

            一、Jest 前端自动化测试框架基础入门

            • 一、Jest 前端自动化测试框架基础入门（一）

              5.Jest 中的匹配器

              什么是匹配器呢？在之前的案例中，toBe就是一个最基本的匹配器

              toBe 匹配器

              toBe 匹配器类似于 Object.is 或者 ===，精确相等。

              test('测试toBe', () => {
  expect(10).toBe(10); // passed
});
 
 
test('测试toBe', () => {
  const a = {one: 1}
  expect(a).toBe( {one: 1});  // failed,因为两个对象的地址是不一样的
});
              toEqual匹配器

              测试对象的内容是否相等，不比较对象的地址，只关心对象的内容是否一致，递归检查对象或数组的每个字段。

              test('测试toEqual', () => {
  const a = {one: 1}
  expect(a).toEqual( {one: 1});  // passed
});
              toBeNull匹配器

              测试某个变量是否为null，如果是则Passed，否则failed

              test('测试toBeNull', () => {
  const a = null
  expect(a).toBeNull();  // passed
});
              toBeUndefined匹配器和toBeDefined匹配器

              测试某个变量是否未定义，如果是则Passed，否则failed

              test('测试toBeUndefined', () => {
  const a = undefined;
  expect(a).toBeUndefined();  // passed
});
 
test('测试toBeUndefined', () => {
  const a = '';
  expect(a).toBeUndefined();  // failed
});
 
test('测试toBeUndefined', () => {
  const a = null;
  expect(a).toBeUndefined();  // failed
});
test('测试toBeDefined', () => {
  const a = null;
  expect(a).toBeDefined();  // passed
});
 
test('测试toBeDefined', () => {
  const a = undefined;
  expect(a).toBeDefined();  // failed
});
              toBeTruthy匹配器

              测试某个变量是否为真，如果是则Passed，否则failed

              test('测试toBeTruthy', () => {
  const a = undefined;
  expect(a).toBeTruthy();  // undefined 视为false
});
 
test('测试toBeTruthy', () => {
  const a = null;
  expect(a).toBeTruthy();  // null视为false
});
 
test('测试toBeTruthy', () => {
  const a = 0;
  expect(a).toBeTruthy();  // 0 视为false
});
 
test('测试toBeTruthy', () => {
  const a = 1;
  expect(a).toBeTruthy();  // 1 视为true
});
              toBeFalsy匹配器

              测试某个变量是否为假，如果是则Passed，否则failed

              test('测试toBeFalsy', () => {
  const a = 1;
  expect(a).toBeFalsy();  // failed，因为1 视为true
});
 
test('测试toBeFalsy', () => {
  const a = undefined;
  expect(a).toBeFalsy();  // passed，因为undefined 视为false
});
 
test('测试toBeFalsy', () => {
  const a = null;
  expect(a).toBeFalsy();  // passed，因为null 视为false
});
 
test('测试toBeFalsy', () => {
  const a = 0;
  expect(a).toBeFalsy();  // passed，因为0 视为false
});
test('测试toBeFalsy', () => {
  const a = 0;
  expect(a).not.toBeFalsy();  // failed，因为0 视为false,但是匹配器要的是真
});
              数字相关的匹配器
              test('测试toBeGreaterThan', () => {
  const count = 10;
  expect(count).toBeGreaterThan(9);  // passed，表示希望count这个变量的值比9大
});
 
test('测试toBeLessThan', () => {
  const count = 10;
  expect(count).toBeLessThan(9);  // failed，表示希望count这个变量的值比9小
});
 
test('测试toBeGreaterThanOrEqual', () => {
  const count = 9;
  expect(count).toBeGreaterThanOrEqual(9);   // passed，表示希望count这个变量的值大于等于9
});
 
test('测试toBeLessThanOrEqual', () => {
  const count = 9;
  expect(count).toBeLessThanOrEqual(9);   // passed，表示希望count这个变量的值小于等于9
});
 
 
test('测试toBeCloseTo', () => {
  const firstNumber = 0.1;
  const secondNumber = 0.2;
  expect(firstNumber + secondNumber).toEqual(0.3);  // 结果是failed，因为js计算浮点数的时
  expect(value).toBe(0.3);          //  这句会报错，因为浮点数有舍入误差候，有可能会溢出或者说不准确，这种情况下最好用toBeCloseTo
});
 
test('测试toBeCloseTo', () => {
  const firstNumber = 0.3;
  const secondNumber = 0.4;
  expect(firstNumber + secondNumber).toBeCloseTo(0.7);   // passed
});
              字符串相关的匹配器
              test('测试toMatch', () => {
  const str = 'www.baidu.com';
  expect(str).toMatch('baidu');   // passed, 表示str字符串中是否包含baidu这个字符串，是返回passed
  expect(str).toMatch(/baidu/); //passed，这里还可以写正则表达式
});
              数组相关的匹配器
              test('测试toContain', () => {
  const arr = ['dee', 'lee'];
  expect(arr).toContain('dee');   // passed, 表示arr数组中是否包含dee这个字符串元素，是返回passed
});
 
test('测试toContain', () => {
  const arr = ['dee', 'lee'];
  const data = new Set(arr);
  expect(data).toContain('dee');   // passed, 表示arr数组中是否包含dee这个字符串元素，是返回passed
});
              异常情况的匹配器
              const throwNewErrorFunc =  () => {
  throw new Error('this is a new error');
}
 
test('测试toThrow', () => {
  expect(throwNewErrorFunc).toThrow();   // passed, 表示希望throwNewErrorFunc这个方法运行的时候能够抛出一个异常
});
 
test('测试toThrow', () => {
  expect(throwNewErrorFunc).not.toThrow();   // failed, 表示希望throwNewErrorFunc这个方法运行的时候不能够抛出异常
});
 
test('测试toThrow', () => {
  expect(throwNewErrorFunc).toThrow('this is a new error');   // passed, 表示希望throwNewErrorFunc这个方法运行的时候能够抛出一个异常，并且内容是'this is a new error'
  expect(throwNewErrorFunc).toThrow(/this is a new error/); // 也可以是正则表达式
});

              更多的匹配器可以查看Jest官网：

              • 匹配器的使用 · Jest
              • Expect 断言 · Jest

                6.Jest 命令行工具的使用

                Ctrl + Shift + P 打开 vscode 的命令窗口，输入

                install code command

                会显示如下

                【实战】一、Jest 前端自动化测试框架基础入门（二） —— 前端要学的测试课 从Jest入门到TDD BDD双实战（二）,在这里插入图片描述,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,进入,安装,第1张

                直接点击，code 命令会添加到系统 path 中

                这样在随便一个命令行窗口输入 code 就可以打开 vscode，输入 code filePath/directoryPath 即可在 vscode 中打开对应文件或目录

                目前在 windows 中安装 vscode 过程中该命令会自动添加到 path 中

                接下来这节内容便是和这命令行有关啦

                运行 npm run test 之后，jest 会运行所有测试用例，最后会显示这样一句：

                Watch Usage: Press w to show more.

                输入 w 后，显示：

                Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.     
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
                模式 f

                在修改测试用例所在文件后只运行上一次失败了的测试用例，其他跳过（skip）

                PS：若是上一次运行成功，后面再改动也不会自动运行

                模式 o

                只运行与修改文件相关联的测试用例

                需要借助 git 来获取文件变动记录，否则会报错

                • 安装 git
                • 项目根目录运行 git init 初始化一个 git 仓库
                • 运行 git add . 将项目下的所有文件添加到 git 仓库
                • 运行 git commit -m 'version 1' 将文件变化提交并做备注（到了这一步就已经满足 o 模式的运行条件啦）
                • 运行 git push 将已提交的文件变动推送到线上 git 仓库

                  之前配置 package.json："test": "jest --watchAll" 默认会进入 a 模式，配置为 --watch 则会默认进入 o 模式：

                  {
  ...
  "scripts": {
    "test": "jest --watch"
  },
  ...
}
                  模式 t

                  通过正则表达式过滤，只运行通过过滤的测试用例

                  模式 p

                  类似模式 t， 通过正则表达式过滤，只运行通过过滤的测试文件

                  q : 退出监听模式

                  本文仅作记录， 实战要点待后续专文总结，敬请期待。。。


相关阅读：

1、替换FeedBurner邮件为Follow.it

2、Windows 10下注册32位OCX控件的方法

3、小储云商城V1.78破解版

4、wordpress阿里百xiu主题破解版

5、如何 BestTrace 在 Linux VPS 上查看回程路由？

文章版权声明：除非注明，否则均为VPS857原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

  • WPS二次开发系列：如何使用WPS返回的FileUri
  • WPS加载项(wps jsapi)创建及部署--新版
  • GraphQL在现代Web应用中的应用与优势
  • 【半夜学习MySQL】表结构的操作（含表的创建、修改、删除操作，及如何查看表结构）
  • GraphQL和RESTful的对比：通过实际的示例来介绍GraphQL的构成和操作方式，并和传统的RESTful API进行比较，分析它们的优劣势
  • 目标检测算法YOLOv7简介
  • 计算机视觉与深度学习实战：以Python为工具，基于块匹配的全景图像拼接
  • Express框架下搭建GraphQL API

    • 发表评论

    快捷回复：表情：
    评论列表 （暂无评论，0人围观）

    还没有评论，来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码