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

React 造轮子系列:Icon 组件思路

3.为了创造 你为别人做了这么久的事情,有没有自己做什么?自驱动力。 4.为什么是 UI 轮子,不是其他方面的轮子 比如,为什么不自己写一个 React 框架,要写 React UI 框架呢?...,我需要使用哪个 svg, 需要在对应的 icon 组件导入对应的 svg,这样要是我需要100个 svg ,我就要导入100次,这样做太傻,文件也会变得冗长。...image.png 解决办法: yarn add -D @types/jest文件开头加一句 import 'jest' 这是因为 describe 和 it 的定于位于 jest 的类型声明文件...,不信你可以按住 ctrl 并点击 jest 查看。...如果还不行,你需要在 WebStorm 里设置对 jest 的引用: image.png 这是因为 typescript 默认排除了 node_modules 里的类型声明。

2.1K20

React 造轮子系列:Icon 组件思路

3.为了创造 你为别人做了这么久的事情,有没有自己做什么?自驱动力。 4.为什么是 UI 轮子,不是其他方面的轮子 比如,为什么不自己写一个 React 框架,要写 React UI 框架呢?...,我需要使用哪个 svg, 需要在对应的 icon 组件导入对应的 svg,这样要是我需要100个 svg ,我就要导入100次,这样做太傻,文件也会变得冗长。...image.png 解决办法: yarn add -D @types/jest文件开头加一句 import 'jest' 这是因为 describe 和 it 的定于位于 jest 的类型声明文件...,不信你可以按住 ctrl 并点击 jest 查看。...如果还不行,你需要在 WebStorm 里设置对 jest 的引用: image.png 这是因为 typescript 默认排除了 node_modules 里的类型声明。

4.6K70
您找到你想要的搜索结果了吗?
是的
没有找到

编写接口请求库单元测试与 E2E 测试的思考

而对于这个库而言只需要测试有没有注入 adaptor 后,用 adaptor 请求数据之后有没有拿到了正确的值。...但是写了还是写一下,我也不知道有什么好的办法。还是使用 mock 的方法 mock 掉 adaptor 的请求返回。简单说说就是这样写了。...await client.comment.getById('11111') 22 expect(data).toEqual(mocked) 23 }) 24} COPY 这边主要就是测试这个方法请求的路径有没有写对了...我已 Express 、 Jest 为例。我的想法是直接用 Express 托管一系列接口。当然不是手动去启动一个服务,而是 Express 直接跑在 Jest 测试。...因为固定端口在 Jest 并行测试容易被占用。 测试用例也比较好写,只要按照传统前后端接口请求去写就可以了。

1K40

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

: 生成测试覆盖报告时检测的覆盖文件 coverageDirectory: Jest 输出覆盖信息文件的目录 coveragePathIgnorePatterns: 排除出 coverage 的文件列表...,在运行测试案例代码之前,Jest 会先运行这里的配置文件来初始化指定的测试环境 testMatch: 定义被测试的文件 transformIgnorePatterns: 设置哪些文件不需要转译 transform...: 设置哪些文件的代码是需要被相应的转译器转换成 Jest 能识别的代码,Jest 默认是能识别 JS 代码的,其他语言,例如 Typescript、CSS 等都需要被转译。...我们发现有以下几种模式: f: 只会测试之前没有通过的测试用例 o: 只会测试关联的并且改变的文件(需要使用 git)(jest --watch 可以直接进入该模式) p: 测试文件名包含输入的名称的测试用例...t: 测试用例的名称包含输入的名称的测试用例 a: 运行全部测试用例 在测试过程,你可以切换适合的模式

4.9K20

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

test=hash-test")).toBe("hash-test"); // ... }); test("浏览器地址获取查询参数", () => {...}); test("当url...基于以上划分,测试逻辑和范围就很清晰了: url.parse方法支持: 解析一般url 解析带hash的url 解析url片段 url.getParameter方法支持: 指定url获取查询参数 浏览器地址获取查询参数...- --updateSnapshot # 或者 npm run jest -- -u 这个命令会把本次测试的实际结果更新到快照缓存文件。...测试覆盖率统计 Jest自带测试覆盖率功能,在jest.config.js配置文件开启即可: // jest.config.jsmodule.export = { // ......指定文件统计覆盖率 如果我们需要对项目某几个文件进行测试覆盖率统计,排除其他文件

4.9K40

Jest 单元测试快速上手指南

, 容易上手且功能十分强大的测试框架 安装 yarn add -D jest 使用 创建 test 目录, 添加 plus.spec.js 文件 describe('example', () => {...你可以完善测试用例, 或者可能有些文件(譬如 config)和代码分支并不需要测试, 可以将其在测试覆盖率结果中排除, 参考如下配置 忽略目录下所有文件jest.config.js 添加 collectCoverageFrom...和声明 并在 jest.config.js 添加 preset: 'ts-jest' 将 plus.js 重命名为 plus.ts export default function plus(a: number...添加如下内容 globals: { 'ts-jest': { isolatedModules: true, }, } 测试 React 组件 安装 react 依赖...mock axios npm 模块的例子 https://jestjs.io/docs/en/mock-functions#mocking-modules mock 环境变量和命令行参数 有的模块会环境变量和命令行参数取值

3.3K30

原创干货:前端单元测试Jest零基础入门教学

---- 写在开头: 单元测试对于很多人比较模式,它是一种推动开发,或者提高产品质量的手段, 我画一张图,大家就能理解 ---- 其实单元测试,就是先编写单元测试代码,然后使用单元测试框架,去模拟环境...console.log('App-mountComponent test function stop --success '); }); yarn test 启动结果 发现报错,测试没有通过,那么我们要想办法让它测试通过...lcov-report文件夹,进入后我们直接打开里面的index.html文件,可以看到单元测试报告 ---- 这样里面有一些像分支覆盖率、函数、代码函数覆盖等 其实像Jest用起来还是比较方便的,核心理念就是使用测试框架运行业务代码...然后等部分代码跑完后,再生成一次快照,跟之前的快照进行对比,这样就能判断你中间的这部分代码有没有影响UI,这样能确定有没有BUG的出现 ---- 页面快照: import App from '.....__snapshots__文件夹 后面测试代码如果有操作改变了这个页面,那么就会报错,单元测试不通过 ---- 下面的内容希望你也能认真看完 常见的单元测试代码例子 单元测试的编写难度可能比业务代码难度更高

1.1K20

使用Jest测试包含setTimeout调用的函数踩坑记录

而解决办法也非常简单,只需要在调用enqueueJob调用后先调用一下await delay(0)就行了,这句话意味着我们的测试用例代码在执行后面的代码之前一定要至少等待一轮Tick,于是我们catch...虽然错误信息我们知道可以通过jest.setTimeout来修改这个默认超时时间,但这个测试用例在实际运行的时候也的确需要等待6s,如果我们有什么测试用例需要等待几分钟甚至几小时,那总不能在CI上卡个几小时等待用例通过吧...于是,搜索一番之后,我发现Jest提供了假计时器、也即fake timer相关API。 通过jest.useFakeTimers()即可对当前文件启用fake timer。...当然你也可以在单个测试用例前后调用useFakeTimers和useRealTimers来在两个模式之间切换。...根据Jest的官方文档,调用这个函数后,所有队列的“微任务”都会被立刻执行,这里的目的就是保证catch回调能被立刻调用; 使用jest.advanceTimersByTime(6000)代替await

6.6K60

工程化角度讨论如何快速构建可靠React组件

例如像这篇《重新设计 React 组件库》,里面涉及一个组件设计的各方面,如粒度控制、接口设计、数据处理等等(不排除后续也写一篇介绍组件设计理念哈)。 本文关键词是三个,工程化、快速和可靠。...跟只跟开发流程、构建、测试相关的,我们一律放在 devDependencies ,组件实际依赖的库,则主要放在 dependencies 。...要注意的是,你的组件可能含有样式文件,配置命令的时候要记得将样式文件也复制过去,像下面的命令,--copy-files 参数就是为了将样式文件直接拷贝到 dist 目录下。...通过 jest-environment-jsdom,它能够将 jsdom 注入到 node 运行环境,因此你可以在测试文件中直接使用 window 对象进行模拟。...除此之外,定时器里还有个 try catch 的逻辑,主要是如果 expect 验证不通过,jest 会报告错误,这时需用错误捕获的办法将错误传给 done (异步测试的回调),这样才能正常退出这一个测试用例

1.9K60

Sentry 开发者贡献指南 - 测试技巧

处理异步动作 视觉回归 处理不断变化的数据 Jest 测试 API Fixtures CI 的 Kafka 测试 更多 作为 CI 流程的一部分,我们在 Sentry 运行了多种测试。...运行 pytest 您可以根据更改的范围使用 pytest 运行单个目录、单个文件或单个测试: # 对整个目录运行测试 pytest tests/sentry/api/endpoints/ # 对目录匹配模式的所有文件运行测试...pytest tests/sentry/api/endpoints/test_organization_*.py # 单个文件运行测试 pytest tests/sentry/api/endpoints...test_organization_events_distribution.py::OrganizationEventsDistributionEndpointTest::test_this_thing # 在匹配子字符串的文件运行所有测试...17 张详细脑图) Sentry Web 前端监控 - 最佳实践(官方教程) Sentry 后端监控 - 最佳实践(官方教程) Sentry 监控 - 私有 Docker Compose 部署与故障排除详解

1.6K50

使用ELK+SpringBoot+bboss实现日志分析一例

从这个功能的目标和过往的分析积累了一些分析模式,举例如下: 一些Oracle error可以忽略; 一些Oracle error是定位前提,当定位到这些error后,再在它之前搜索一些关键字,并取距离...error最近的匹配行; 一些搜索要求信息包含某些关键字,同时不包含某些其它关键字; 这些分析模式便成了AC日志分析系统的设计基础。...bboss和spring-data-elastic类似,也是一款Elastic ORM开发库,采用xml文件管理Elastic的DSL脚本,在DSL脚本可以使用变量、循环、逻辑判断和注释等,开发和调试非常方便...2.3、bboss DSL配置文件片段 AC日志展示的主要场景可以归纳出基本的DSL语句,这里仅举几例说明: 2.3.1、查找包含Oracle error,而并不包含特定Oracle error的消息...bboss表达式会根据OERR_EXCLUSIONS列表动态生成要排除的Oracle error。 2.3.2、查找指定字段包含指定关键字的DSL语句 ?

1.1K30

React单元测试:Jest + Enzyme(一)

但如果涉及到以下几个方面,你就要考虑是否有必要引入单测了: 业务比较复杂,前端参与的人员超过3人 公司非常注重代码质量,想尽一切办法杜绝线上出bug 你是跨项目组件的提供方 你在做一个开源项目 React...安装完后,在项目的根目录新建__jest__文件夹和__tests__文件夹,此时__mocks__文件夹我们暂时不管,如下图所示: mudules文件夹将存放各个模块的单测代码,而utils文件夹里面是对一些公用的函数写的测试代码.../math.js' test('adds 1 + 2 to equal 3', () => { expect(add(1, 2)).toBe(3); }); 同时,在package.json文件...我们来回顾下我们都做了些什么: 安装Jest并让其支持ES6语法 新建对应的单测文件夹并新建一个单测文件 针对项目的webpack做相应的Jest配置 配置运行测试脚本 万事开头难,你已经踏出万里长征的第一步了...在下一篇文章,我将会详细介绍如何使用Jest来mock方法和数据,敬请期待。

1.4K20

前端自动化测试实践01—持续集成之jest自动化测试环境搭建

1.2 分类 前端自动化测试可以按照开发模式分两类:TDD (Test-Driven Development) 测试驱动开发、BDD (Behavior Driven Development) 行为驱动开发...并根据需要修改根目录下生成的配置文件 jest.config.js $ npx jest --init 修改 package.json 的 scripts,添加执行指令 (1) 普通执行测试,即 $...3) 持续监听变化,默认 o 模式 { "test": "jest --watch" } (4) 持续监听所有文件变化 { "test": "jest --watchAll" } 2.3 编写测试用例...现实项目中,往往不会零搭建 jest 项目,更多的情况是,需要在一个脚手架已经搭建好的项目中引入自动化测试,此处在 vue-cli 基础上修改 jest 配置,安装好 jest 后需要修改项目根目录下的配置文件...jest.config.js,重点关注 testMatch 和 testPathIgnorePatterns 两个属性,testMatch 指定了匹配的测试用例文件的路径,而 testPathIgnorePatterns

2.4K54

浅谈前端测试

文件在https://github.com/xianggu625/bug2testscript, 主文件是:zentao.py 。...() 模拟   other 里面则是放一些固定的测试数据(不会随着测试过程而改变)   beforeAll 钩子里面执行我们的 mock,把 require 进来的 fs 模块拦截调,也是本测试用例的关键步骤...()  })   每次执行 test 前先清除 mock,避免多个测试用例之间复杂化 mock 导致错误   小结:单元测试的 mock 是个测试思路,我们无需关心外部文件和依赖是什么,只要能模拟出正确的情况程序是否按规则执行...这样就能排除外界干扰,使得我们测试的当前一小部分是可靠的,稳定的即可。...每次测试生成随机的 list 进行测试,现有库 mockjs   强关联测试,证明 map 方法的确执行了,并且参数正确,先 spy spyOn(Array.prototype, 'map') 然后断言   聊了一圈覆盖率聊到了测试健壮性的问题

1.7K10

学习笔记——在vue如何配置Jest(一)

最近在搞Jest单元测试,如何在vue安装和使用jest我就不说了,前一篇文章简单的说了一下在使用jest时遇到的一些问题,但是我觉得并没有真正的解决的很好。...采用的方式就是新建一个空的vue-cli生成的用jest来做单元测试的项目,这就导致了测试环境的配置是极为脆弱的。而且还有十分大的隐患。但是又没办法一下子解决。...所以,我想在这篇文章,整理记录一下jest的配置参数的用法等。   jest的配置文件是单独生成在unit文件夹下的一个独立文件,并没有和vue-cli生成的webpack构建的环境相关联。...这是当前版本的vue-cli生成的jest.conf.js的配置文件,我们可以在package.json的配置项里看到,我们在npm run unit 的时候,真正运行的就是这个文件的配置。   ...snapshotSerializers:快照测试的插件,会生成测试文件的一个快照版本,可以再package.json查看安装的快照插件。

1.8K10

spring boot 配置属性大全(1)

%i.gz 过渡日志文件名的模式。仅默认的Logback设置受支持。 logging.register-shutdown-hook false 初始化日志系统时,注册一个关闭挂钩。...spring.autoconfigure.exclude 要排除的自动配置类。 spring.banner.charset UTF-8 标语文件编码。...如果它不包含包限定符(例如“ org.mypackage”),它将从类路径根目录解析。 spring.messages.cache-duration 加载的资源束文件缓存持续时间。...spring.gson.exclude-fields-without-expose-annotation 是否排除有没有“ Expose”注释的字段以进行序列化或反序列化。...默认情况下,它是类路径自动检测到的。 spring.datasource.url 数据库的JDBC URL。 spring.datasource.username 数据库的登录用户名。

3.3K51
领券