【实战】二、Jest难点进阶(一) —— 前端要学的测试课 从Jest入门到TDD BDD双实战(五)

这篇具有很好参考价值的文章主要介绍了【实战】二、Jest难点进阶(一) —— 前端要学的测试课 从Jest入门到TDD BDD双实战(五)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


学习内容来源: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 前端自动化测试框架基础入门(一)

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

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

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

二、Jest难点进阶

1.snapshot 快照测试

新建 lesson9.js

export const generateConfig = () => {
  return {
    server: 'http://localhost',
    port: 8080
  }
}

新建 lesson9.test.js

import { generateConfig } from "./lesson9";

test('测试 generateConfig', async () => {
    expect(generateConfig()).toEqual({
      server: 'http://localhost',
      port: 8080
    })
})

对于这种配置文件最简单的测试思路就是如上面这样写,但是这样的话每次配置文件有改动都需要相应修改测试案例,并不友好,因此快照功能应运而生!!!

修改 lesson9.test.js

test('测试 generateConfig', async () => {
  expect(generateConfig()).toMatchSnapshot();
})

运行,日志如下:

 PASS  ./lesson9.test.js
  √ 测试 generateConfig (6ms)1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        3.697s

toMatchSnapshot: 匹配快照,首次执行会在 测试案例文件所在目录下生成一个 __snapshots__ 目录,目录下有个文件 lesson9.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`测试 generateConfig 1`] = `
Object {
  "port": 8080,
  "server": "http://localhost",
}
`;

若是下次测试生成快找文件与之前不同,则测试不会通过,试一下:

修改 lesson9.js

export const generateConfig = () => {
  return {
    server: 'http://localhost',
    port: 8080,
    alisa: {}
  }
}

运行测试用例,日志如下:

FAIL  src/lesson9/__tests__/lesson9.test.js
  × 测试 generateConfig (10ms)

  ● 测试 generateConfig

    expect(received).toMatchSnapshot()

    Snapshot name: `测试 generateConfig 1`

    - Snapshot
    + Received

      Object {
    +   "alisa": Object {},
        "port": 8080,
        "server": "http://localhost",
      }

      2 |
      3 | test('测试 generateConfig', async () => {
    > 4 |   expect(generateConfig()).toMatchSnapshot();
        |                            ^
      5 | })

      at Object.<anonymous> (src/lesson9/__tests__/lesson9.test.js:4:28)1 snapshot failed.
Snapshot Summary
 › 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with `-u` to update them.

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   1 failed, 1 total
Time:        4.32s

失败,快照不匹配,若是确定要修改,且在命令行模式,可以输入 u 更新快照,若是一个文件中只能有一个包含多个快照 需要输入 i 进行交互式的一个个对比更新。最后回车返回即可。

【实战】二、Jest难点进阶(一) —— 前端要学的测试课 从Jest入门到TDD BDD双实战(五),前端,tdd

不过这样的配置文件都是写死的,若是配置文件内容是动态变化的比如:

修改 lesson9.js

export const generateConfig = () => {
  return {
    server: 'http://localhost',
    port: 8080,
    time: new Date()
  }
}

这样的话每次生成的快照一定是不一样的,也就通不过测试了

修改 lesson9.test.js

test('测试 generateConfig', async () => {
  expect(generateConfig()).toMatchSnapshot({
    time: expect.any(Date)
  });
})

这样的话 time 只会对比类型,不会对比值,测试就可以通过啦

安装 prettier

npm i prettier@1.18.2 -S

修改 lesson9.test.js(toMatchSnapshot 改为 toMatchInlineSnapshot)

test("测试 generateConfig", async () => {
  expect(generateConfig()).toMatchInlineSnapshot({
    time: expect.any(Date)
  });
});

运行测试用例,日志如下:

PASS  src/lesson9/__tests__/lesson9.test.js
  √ 测试 generateConfig (27ms)1 snapshot written.
 › 1 snapshot obsolete.
   • 测试 generateConfig 1
Snapshot Summary
 › 1 snapshot written from 1 test suite.
 › 1 snapshot obsolete from 1 test suite. To remove it, re-run jest with `-u`.
   ↳ src/lesson9/__tests__/lesson9.test.js
       • 测试 generateConfig 1

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 obsolete, 1 written, 1 total
Time:        4.151s

运行过后 lesson9.test.js 变了样子:

test("测试 generateConfig", async () => {
  expect(generateConfig()).toMatchInlineSnapshot(
    {
      time: expect.any(Date)
    },
    `
    Object {
      "port": 8080,
      "server": "http://localhost",
      "time": Any<Date>,
    }
  `
  );
});

可以看到快照作为第二个参数被保存到了测试案例里。


本文仅作记录, 实战要点待后续专文总结,敬请期待。。。文章来源地址https://www.toymoban.com/news/detail-829712.html

到了这里,关于【实战】二、Jest难点进阶(一) —— 前端要学的测试课 从Jest入门到TDD BDD双实战(五)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端自动化测试(二)Vue Test Utils + Jest

    项目会从快速迭代走向以维护为主的状态,因此引入自动化测试能有效减少人工维成本 。 自动化的收益 = 迭代次数 * 全手动执行成本 - 首次自动化成本 - 维护次数 * 维护成本 对于自动化测试,相对于发现未知问题,更倾向于避免可能的问题。 (1) 单元测试 单元测试(unit t

    2024年02月08日
    浏览(42)
  • react+jest+enzyme配置及编写前端单元测试UT

    安装相关库: 首先,使用npm或yarn安装所需的库。 配置Jest: 在项目根目录下创建一个 jest.config.js 文件,并配置Jest。 在上述配置中,设置了 setupFilesAfterEnv 为 src/setupTests.js ,指定了测试环境为 jsdom ,并设置了模块名称映射以处理CSS和LESS文件。 创建 setupTests.js 文件: 在项目

    2024年02月15日
    浏览(50)
  • Jest | 测试框架实战之-测试用例编写与覆盖率解读

    通常写完库的测试用例,总要跑跑覆盖率,看看测试用例写得如何,jest刚好也支持查看覆盖率,对应的指令是:jest --coverage。当然在继续往下看,如果还没搭建jest环境,可以先搭建,毕竟实践出真知。 如何编写测试用例,已经存在很多教程,官方也有非常多例子,因此这里

    2024年02月03日
    浏览(46)
  • Web自动化测试进阶:网页中难点之等待机制 —— 强制等待,隐式等待

    为什么要添加等待 避免页面未渲染完成后操作,导致的报错 经常会遇到报错:selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {\\\"method\\\":\\\"xpath\\\",\\\"selector\\\":\\\"//*[text()=\\\'个人中心\\\']\\\"} 页面还在加载时,就在进行查收元素,此时元素还没显示加载出来,而报

    2024年02月05日
    浏览(73)
  • 40个web前端实战项目,练完即可就业,从入门到进阶,基础到框架,html_css【附视频+源码】

    当下前端开发可以说是一个比较火的职业,所以学习的人比较多,不管是培训还是自学都是希望通过前端可以找到一份好的工作,但是很多自学的朋友在自学过程中有些盲目,不仅大大降低了学习的效率,而且也会打击自己的学习热情。 那么当我们学习了前端的一部分知识之

    2023年04月09日
    浏览(65)
  • 前端必学的CSS3波浪效果演示

    使用 translateX 和 translateZ 属性创建波浪效果: 使用场景: 适用于需要在X轴上平移和在Z轴上应用3D变换的波浪效果。 可以用于创建具有起伏效果的海浪、水面波纹等效果。 优点: 通过3D变换,可以实现更加真实的波浪效果。 可以通过调整 translateX 和 translateZ 的值来控制波浪

    2024年02月02日
    浏览(49)
  • 【前端进阶】前端安全:从入门到实践

    前言: Web应用程序的广泛使用,使得Web安全变得越来越重要。随着Web技术的不断发展和Web应用程序的复杂性增加,越来越多的前端安全漏洞受到广泛关注。为了保护Web应用程序和用户数据,我们需要了解和掌握前端安全的知识和实践。 在本文中,我们将介绍前端安全的基本

    2024年02月12日
    浏览(48)
  • 什么是 Jest ? Vue2 如何使用 Jest 进行单元测试?Vue2 使用 Jest 开发单元测试实例

    Jest 是一个流行的 JavaScript 测试框架,由 Facebook 开发并维护,专注于简单性和速度。它通常用于编写 JavaScript 和 TypeScript 应用程序的单元测试、集成测试和端到端测试。 特点: 简单易用: Jest 提供简洁的 API 和易于理解的语法,使得编写测试用例变得简单快捷。 零配置:

    2024年01月25日
    浏览(54)
  • 【前端】ECMAScript6从入门到进阶

    1.ES6简介及环境搭建 1.1.ECMAScript 6简介 (1)ECMAScript 6是什么 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 (2)ECMAScript 和 JavaScript 的关系 E

    2024年02月07日
    浏览(43)
  • 前端Vue入门-day06-路由进阶

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 路由的封装抽离 声明式导航 导航链接  两个类名  自定义高亮类名  跳转传参 1. 查询参数传参 2. 动态路由传参 两种传参方式的区别  Vue路由  重定向 404 编程式导航

    2024年02月14日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包