代码拆分` `import` `会破坏Jest测试 - 腾讯云开发者社区

当使用SPA（单页应用）的时候，为了提高性能，我们经常使用动态import来拆分代码。...给动态引入的JS加上hash值，这一块不懂的可以看这篇文章 //动态import处代码 import(/* webpackChunkName: "[request]" */`../.....其他代码 output: { //... 其他代码 filename: '[name].[hash].js', chunkFilename: '[name]....其他代码 3....这里需要注意的一点就是服务端新发布的代码最好可以兼容一下旧的界面，比如旧的界面要报个错什么的。

5844 0

提高代码质量——使用Jest和Sinon给已有的代码添加单元测试

现在，我们可以使用单元测试来提高自己的代码质量。下面，我将自己在使用Jest和Sinon.js配置和编写单元测试中的收获的经验和踩到的坑进行总结，根据从零开始配置和编写单元测试这一条线来进行分享。...Jest与Sinon.js是什么 Jest是FaceBook推出的一个针对JavaScript进行单元测试的库，它提供了断言、函数模拟等API来对你自己编写的业务逻辑代码进行测试后。...Jest配置安装依赖包需要使用Jest，首先你需要进行安装，执行以下命令: npm install jest -D 如果你的项目中存在.babelrc文件（使用了babel 6）时，不论你测试的代码是否通过...编写单元测试在本章中，我们会针对如何编写单元测试文件进行一个具体的讲解，其中包含：同步函数测试异步函数测试 HTTP测试同时，我们会对当中使用到的Jest和Sinon.js的API会进行简单介绍...(callback) { callback('hjava'); } 针对上面的源代码文件编写的一个单元测试文件： // user.test.js import userFunc, {handleUserData

3.8K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

2022-07-06：以下go语言代码是否会panic？A：会；B：不会。 package main import “C“ func main() { var

2022-07-06：以下go语言代码是否会panic？A：会；B：不会。...如果把 import "C" 注释掉，会 panic。原因是 cgo 会使死锁检查失效。图片图片

1602 0

测试代码时你会犯的 11 个错误

他们可能会验证模拟代码是否正确，或者模拟代码是否和真正代码做相同的事情，或没有任何断言而只是执行代码。这样的“测试”都是白费力气，特别是如果它们的存在只是为了提高代码覆盖率水平的话。...8.担心代码覆盖率代码覆盖率的理念很崇高，但往往实际价值有限。知道运行测试的时候有多少代码被执行应该是有用的，但因为它不考虑正在执行代码的测试的质量，因此就变得没有意义。...代码覆盖率在它数值非常高或非常低的时候，是挺博人眼球的。如果非常高，就表明，比起带来的价值，过多的代码可能正在被测试。非常低的代码覆盖率表明有可能代码的测试不够。...如果我们在任意点重访代码，那么它就需要测试。如果在现有代码中发现过bug，那就说明这一块的代码对其复杂性没有进行充分的测试。 9.着眼于一种类型的测试一旦你开始测试，很容易只纠结于一种风格的测试。...最后，你需要为任何不容易自动化的部分和探索性尝试进行手动测试。 10.着眼于短期测试来自于测试的价值大多数会随着时间的推移而获得。

3822 0

JavaScript 测试系列实战（一）：使用 Jest 和 Enzyme 测试 React 组件

初识 Jest 单元测试测试是检查代码的代码，能够大大增强我们对应用的信心。更重要的是，测试会阻止你在修复一件事情的同时破坏另一件事情，让我们能够放开手脚进行功能的添加与大规模重构。...通过及早发现问题并避免 bug 回归，它可以帮助我们确保代码的各个部分按预期工作。集成测试即使所有单元测试都通过了，我们的应用仍然可能会崩溃。...配置 jest-enzyme 你应该还记得，在刚才的测试代码中，我们还是使用了 Jest 自带的 Matcher（toEqual）。...import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import 'jest-enzyme...创建 src/TodoList.test.js ，代码如下： // src/TodoList.test.js import React from 'react'; import { shallow }

3K1 0

单元测试

测试目的测试的目的是为了带给我们带来强大的代码信心，如果把测试初衷忘掉，会很容易掉入测试代码细节的陷阱。一旦关注点不是代码的信心，而是测试代码细节，那么测试用例会变得非常脆弱，难以维护。...代码信心的体现测试可以确保得到预期的结果作为现有代码行为的描述促使开发者写可测试的代码，可测试的代码可读性会更高如果依赖的组件有修改，受影响的组件能在测试中发现错误测试内容什么是细节？...注意：测试覆盖率可以让我们自检路径覆盖、判定覆盖及语句覆盖，指导我们更好的提前发现代码中的问题覆盖率数据只能代表你测试过哪些代码，不能代表你是否测试好这些代码。...快照测试的基本理念：先保存一份副本文件，下次测试时把当前输出和上次副本文件对比就知道此次改动是否破坏了某些东西。...检查测试用例代码中是否存在任何可能导致测试环境污染或干扰的因素，例如全局状态、全局变量等。尽量将测试用例代码进行封装和隔离，以确保每个测试的独立性。

3131 0

Go 1.18 让写测试的代码量骤减，你会开始写测试吗？

Go 从1.18 版本开始正式把模糊测试（Go Fuzz）加入到了其工具集中，不再依靠三方库就能在程序代码中进行模糊测试。那么为什么要引入模糊测试呢，引入后我们在写单元测试的时候要有哪些调整呢？...这里直接放代码了，如果对表格测试和各种Go单测知识不了解的可以回看之前的文章：Go单元测试基础，文末会给出链接。...可以看到使用模糊测试后，代码量明显减少了很多。模糊测试会帮我们生产随机的输入，来供要测试的目标来使用。...，就能测出我上面说的索引越界的问题，这个时候我们就可以回去完善我们的工具函数，然后再进行模糊测试了，通过几轮执行，会让被测试的函数足够健壮。...这就是模糊测试和普通单测的另一个大区别了，普通单测执行完我们提供的 Case 后就会停止，而模糊测试是会不停的跑样本，直到发生测试失败的情况才会停止。

3093 0

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

演进：构建可测试单元模块将业务代码代码演变为可测试代码，重点在：设计：将业务逻辑拆分为单元模块（UI组件、功能模块）。时间：可行的重构目标与重构方法，要有长期重构的心理预期。...为单一职责的模块设计测试用例，才会对功能覆盖的更全面，所以设计这一步尤为重要。如果挽救一个系统的办法是重新设计一个新的系统，那么，我们有什么理由认为从头开始，结果会更好呢?...回顾定义安装与使用（安装、调试、git拦截、测试报告）常用API（jest、vue组件）落地单元测试（拆分关键模块加单测）演进：构建可测试单元模块（设计原则、重构）可维护的单元模块（代码规范...）落地线路： ① 安装使用 => ② API学习 => ③ 落地：拆分关键模块加单测 => ④ 演进：架构设计与重构 => ⑤ 代码规范未来： ⑥ 文档先行(待探索) 在较为复杂的业务系统开发过程中...如果能够养成文档先行的习惯，先设计模块、测试用例，再编写代码，会更高效。理解：单元测试有长期价值，也有执行成本。好的架构设计是单测的土壤，为单一职责的模块设计单测、增加单元测试更加顺畅。

4K3 0

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

作者 | Adrien Joly 译者 | 平川策划 | 丁晓昀将单体拆分成服务会带来维护多个存储库（每个服务一个存储库）的复杂性，每个存储库都有独立（但相互依赖）的构建流程和版本控制历史...而且，随着时间的推移，代码的耦合度会变得越来越高，代码会越来越脆弱，越来越难维护。 “Monorepo 结构”是一个有趣的折衷方案：在共享存储库的同时将代码库分割成包。...开发工具的配置：tsconfig.json、.eslintrc.js、 .prettierrc.js 和 jest.config.js 也将拆分成两部分：一个“基础”部分，然后每个包里有一个对它的扩展。...持续集成工作流的配置：.github/workflows/ci.yml 需要做多处调整，例如，确保其中的步骤会针对每个包运行，多个包的指标（如测试覆盖率）会合并成一个。...使用迁移脚本让我们可以在准备和测试迁移时避免代码冻结和 Git 冲突，确保构建和开发工具不会因为迁移脚本添加 CI 作业而遭到破坏。

1.9K2 0

年轻时，我不写单元测试

其实之前就已经简单的了解过了单元测试，但当时对于单元测试我是持有一种很否定的态度的，因为他太过于鸡肋，都是测试一些很基础的功能，但是当笔者被这次重构折磨之后，有重新思考了下如何能够保证代码的健壮性，抱着这个态度...从字面解析来看，那就是把你的代码，拆分成一个一个的单元，然后针对不同的单元，编写不同的测试用例。...，关于不同测试框架的重点，这篇文章就不详细展开了，最终结合我们的项目，最终采用了facebook的jest+enzyme。...重点将展开以下两种react组件类型测试。展示型组件测试展示型组件测试，意思就是要确保每一次的修改都是符合预期的，这里笔者要着重介绍下jest框架里面的snapshot功能。...那其实整个流程就是初始化这个组件，看看渲染的html结构是否符合预期，然后点击下拉框，选中其中第一个，发起请求，拉回详细数据，再观察组件是否展示正常,编写完测试用例后，就已经用代码模拟了整个手工操作，怎么样

8762 0

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

下面会根据各种场景进行分析二、异步函数在我们实际开发中我们会遇到很多异步函数，但是因为Jest在进行测试时，默认情况下一旦到达运行上下文底部当前测试立即结束，这样意味着测试将不能按照我们的预期进行，...async/await：可以在传递给it的函数前面加上async，这样就和我们写代码时是一样的，会依次执行。...如果一直没有调用会导致超时并且当前用例失败。示例如下： // src/example2.ts import { wait } from '....，是因为jest.runAllTimers会运行所有定时器，而我们需要测试的代码是不会停止的。...因为在测试中我们可能会多次用到，为了避免重复的代码，这里我们使用了beforeAll进行处理，与之对应的是afterAll。它们两的作用主要是文件内所有测试开始或结束前执行的钩子函数。

10.3K2 0

测试中如何处理 Http 请求？

正片开始我们先来看下面这段测试代码有什么问题： // __tests__/checkout.js import * as React from 'react' import {render, screen...我不想再把那里面的测试代码也在这复制一份”。行行行，我知道。但如果有一种即可以不用复制 client 的测试代码，又能提高代码自信的方法呢？继续往下看。...这里举个例子： // 把它放在 Jest 的 setup 文件中，就会在所有测试文件前被引入了 import * as users from '....这种测试策略一大优势就是：当你完全忽略代码的实现细节，你就可以尽情地重构代码，同时你的测试会源源不断地给你信心，让你不用担心会破坏用户体验。这才是测试应该做的事。好了，这篇外文就给大家带到这里了。...当你发现要测试的东西太复杂，或者太多干扰项时，使用集成测试会让你真正从用户的角度来写测试。这样一来，你就不会过度关注那些覆盖率指标了，而是从一个用户的角度来思考这样的用例能给我带来多少信心。

1.3K1 0

Vue 应用单元测试的策略与实践 04 - Vuex 单元测试

如何对 Vuex 进行单元测试得益于 Vuex 能够将 Vue 应用的共享状态进行隔离，我们的代码也因此变得更加结构化且易于维护，Vuex 中的 mutation、action 和 getter 都被放在了合理的位置...所以我们在测试 action 的时候就可以只关心 action 的触发，而至于触发之后对 store 做了什么事情我们就不需要再关心了，因为 Vuex 的单元测试会涵盖相关的代码逻辑。...这是因为我们不想影响到全局的 Vue 构造函数，如果直接使用 Vue.use(Vuex) 会让 Vue 的原型上会增加 $store 属性从而影响到其他的单元测试。...Vuex 等 Redux-like 架构在前端应用中的 “状态管理模式” ，已经将 View 视图层和 State 数据层尽可能合理得拆分与隔离，那么单元测试就只需要分别测试 Vue 和 Vuex，从而就能保证...未完待续…… ## 单元测试基础 ### 单元测试与自动化的意义 ### 为什么选择 Jest ### Jest 的基本用法 ### 该如何测试异步代码？

1.6K3 0

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

在这一节中，我们将学习如何使用不同的测试方法来测试我们的应用程序。这将使我们有信心对应用程序进行重构、构建新功能和修改现有功能，而不用担心破坏当前的应用程序行为。...# 单元测试单元测试是在应用程序单元在不依赖于其他部分的情况下进行独立测试。对于单元测试，我们将使用 Jest，它是 JavaScript 应用程序最流行的测试框架。...更多代码细节请参考 Github (opens new window)。 # 集成测试集成测试是一种测试方法，其中多个应用程序部分一起进行测试。...集成测试通常比单元测试更有用，大多数应用程序测试应该是集成测试。集成测试更有价值，因为它们可以更有全面地测试应用程序，我们会测试不同部分的功能、它们之间的关系以及它们的通信方式。...对于集成测试，我们将使用 Jest 和 React Testing Library。这是一种很好的方法，可以以用户使用应用程序的方式测试应用程序的功能。

1.6K8 0

Unit Testing

"test": "jest" } } 之后只需要在 Command Line 中输入 yarn test 即可开启测试 #配置时遇到的麻烦在我配置 Jest 时遇到了几个麻烦，让我的测试代码运行不起来...运行 Jest 测试代码时出现 Cannot use import statement outside a module 不能在其他模块使用 import 语句出现这个问题的主要原因在于 Webpack...编译时并未转换 Jest，导致测试代码不识别 ES6 语法，需要配置一下 Jest 的 transform 字段 JS 代码，需要安装 babel-jest 包来转换代码 transform: {...$1' } } 用来匹配 @/ 都指向到根目录/src/前文中(.*)`匹配的分组未忽略 node_modules 文件夹下的代码一般来说这个是默认的，Jest 默认会忽略 node_modules...#一个好的测试可以为我们带来什么安全重构已有代码 -> 当你在重构当前代码时，完全不必担心会损坏其功能保存业务原有逻辑 -> 只要 PM 没有改动需求，这个需求就应该是这样的，如果测试代码出了问题，

1.3K2 0

Jest 单元测试快速上手指南

你可以完善测试用例, 或者可能有些文件(譬如 config)和代码分支并不需要测试, 可以将其在测试覆盖率结果中排除, 参考如下配置忽略目录下所有文件在 jest.config.js 中添加 collectCoverageFrom..., 结果和之前一致执行单测时不校验 ts 类型有时你可能会希望不校验 ts 类型, 仅执行代码测试, 比如需要在 CI 中将类型校验和单元测试分为两个任务在 jest.config.js 中添加如下内容...} export default Title; 新增测试用例 test/Title.spec.tsx /** * @jest-environment jsdom */ import React...test/Title.spec.ts 查看结果处理静态资源引用 react 组件有时引用一些静态资源, 譬如图片或者 css 样式表, webpack 会正确的处理这些资源, 但是对 Jest 来讲.../jest.setup.js'], 重新执行测试就可以了测试交互事件新增 Count.tsx 组件 import React, { useState } from 'react'; function

3.4K3 0

使用 Jest 进行前端单元测试

Timer 业务代码中如果有 setTimeout 这样的计时器，在测试过程中如果真实的去执行，可能会严重拖慢整个测试项目的执行时间，设想一个功能有 n 个用例去测试，延时就会被重复 n 倍。...总之 Jest 是一款上手很快，功能齐全，高定制性的测试框架。社区的活跃程度也和其他 Facebook 项目一样，值得一试。扩展：关于编写可测试的代码最后再来一个关于写 mock 的实例。...我们都知道保持编写可测试的代码的习惯是非常重要的。可测试性差的代码，在写测试用例时也会花费成倍的时间。例如下面这个例子： ....这样的代码不仅显得比较长，单独一个测试用例的 mock 也很长。可以设想如果代码中间的过程再增加，相应的 mock 还要再修改。要怎么写才能够更加方便测试呢？...优化一下结构，写出更好测试的代码其实很容易。

5.6K9 0

前端自动化测试实践03—jest异步处理&mock

1. async 异步请求处理一般项目代码中会有不少异步 ajax 请求，例如测试下面 async.js 中的代码 import axios from 'axios'; // 传入 callback...('/api').then(res => res.data) } 测试用例，jest.mock('axios') 模拟 axios 请求 import { getData } from '..../mock' import axios from 'axios' // jest 模拟 axios 请求 jest.mock('axios') test('测试 axios getData', async...: true，程序会自动在 mocks 文件夹下找同名文件，省去了手动调用 jest.mock('..../es6-class') jest.mock 如果发现是一个类，会自动把构造函数和方法变成 jest.fn() 以提升性能，相当于执行了 const Util = jest.fn() Util.a =

5.2K8 5

react生态下jest单元测试

去安装速度会更快，npm速度会很慢！...后面每次再运行快照测试时，都会和第一次的比较，若组件代码有所改变，则快照测试会失败，如果组件代码是最新的，优化过得代码，则需要更新快照，免得每次执行报错。...更新快照命令：jest --updateSnapshot 被测组件代码如下： //被测组件 import React from 'react'; const STATUS = { HOVERED...： import { jest } from '@jest/globals'; import ReactTestUtils from 'react-dom/test-utils'; 'user strict...方法并传入要 render 的组件就可以获得一个 TestRenderer 的实例 import { jest } from '@jest/globals'; import ReactTestUtils

2.3K2 0

精读《React 代码整洁之道》

div> ); 但也不要过度优化，过度优化和搞破坏没什么区别...可预测、可测试如果使用 Jest 测试，可以考虑截图测试插件：Jest Image Snapshot 自我解释尽可能减少代码中的注释。...对于 React，遵循以下几个最佳实践：单一责任原则, 确保每个功能都完整完成一项功能，比如更细粒度的组件拆分，同时也更利于测试。不要把组件的内部依赖强加给使用方。 lint 规则尽量严格。...考虑到以上几点并不会降低编码速度编写整洁的代码在开始一定会放慢开发速度，因为你需要转变自己的思维模式，但随着不断迭代，它的带来的效率提升会逐渐弥补前面的损失，并不断带来开发效率的提升。...当然有人可能会问 “就算逻辑与渲染分离了，但组成的大组件不还是逻辑耦合的吗”，对，这就像函数单一指责一样，render 是过程代码，但过程中涉及到的逻辑，分配给单一指责的渲染组件渲染，如果把逻辑与渲染写在一起

3662 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

动态import来拆分代码后发布问题

提高代码质量——使用Jest和Sinon给已有的代码添加单元测试

2022-07-06：以下go语言代码是否会panic？A：会；B：不会。 package main import “C“ func main() { var

测试代码时你会犯的 11 个错误

JavaScript 测试系列实战（一）：使用 Jest 和 Enzyme 测试 React 组件

单元测试

Go 1.18 让写测试的代码量骤减，你会开始写测试吗？

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

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

年轻时，我不写单元测试

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

测试中如何处理 Http 请求？

Vue 应用单元测试的策略与实践 04 - Vuex 单元测试

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

Unit Testing

Jest 单元测试快速上手指南

使用 Jest 进行前端单元测试

前端自动化测试实践03—jest异步处理&mock

react生态下jest单元测试

精读《React 代码整洁之道》

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐