type test css,React-Typescript 单元测试:Jest + Enzyme
按道理说官配用起来会更舒服才是,结果接连碰壁,加上雷同情况的资料确实有点少,只能填一下。
0. 目前遇到的问题
首先脚手架肯定不是cra(cra用户请直接用官方封装的测试就行),我们肯定会使用自己定制的脚手架。当我们在选用Jest做单测时,出现了几个问题:
typescript
无法读取 webpack
css-modules
第二点简直硬伤,直接导致第三点无从下手。而鄙人又出于“不敢乱动祖传代码”的原则,只能往上面继续填。
1. 装配 Jest
安装
由你喜欢的方式去安装 Jest
npm i -D jest @types/jest #or yarn
复制代码
接着需要配置启动方式
// package.json
{
...
"scripts": {
"test": "jest",
...
}
...
"jest": {}
}
复制代码
还有一个方法官方并没有提及到(或者我没有注意到)的方法,在你的project放置一个jest.config.js,同样可以配置,对package.json有洁癖的同学适用。
配置
-- 首先我们需要什么?
-- TypeScript!
npm i -D ts-jest #因为我们已经用上了 TypeScript 所以不需要多装一次
复制代码{
"jest": {
"moduleFileExtensions": [
"ts",
"tsx"
],
"transform": {
"^.+\\.tsx?$": "ts-jest",
}
}
}
复制代码
接着,虽然把每个组件的单测放在该组件的文件夹中显得更清晰(cra的做法),但是我们会更愿意把所有测试用例放在test文件夹中。所以建立好test目录,继续加配置
{
"jest": {
"moduleFileExtensions": [
"ts",
"tsx"
],
"transform": {
"^.+\\.tsx?$": "ts-jest",
},
"testMatch": [
"/test/**/?(*.)(spec|test).ts?(x)"
],
}
}
复制代码
这样,在类似ydjnb.test.tsx或者ydjnb.spec.ts等等等等的文件才会被捕获为测试文件进行测试。
// ydjnb.spec.ts
test('Jest-TypeScript 尝试运行', () => {
expect(1+1).toBe(2) // Pass
})
复制代码
至此,你可以使用对Typescript的测试,但对于React来说还差一点。
2. 装配 Enzyme
这里我们就直接选用Enzyme了,在Jest文档,关于Testing React Apps -- DOM Testing中,也提到是建议使用Enzyme。
npm i -D enzyme @types/enzyme
复制代码
回到ydjnb.spec.ts中,现在因为涉及到JSX所以应该改名为*.tsx了
// ydjnb.spec.tsx
import { shallow } from 'enzyme'
test('Jest-React-TypeScript 尝试运行', () => {
const renderer = shallow(
)
expect(renderer.text()).toEqual('hello world')
})
复制代码
当然shallow只是一种“浅渲染”,它只会对当前组件渲染,做断言。一般测试除了关心数据还会关心交互,所以还会有另外两个方法render, mount。
3. 问题解决
-- 配完了!运行一下吧!
-- ERROR
其实细心一点就会发现,我上面的代码段并没有标记// Pass,而且现在你可能还回头看了!
enzyme-adapter-react-16
所以第一个错误还是很好解决的,因为你仔细看一下测试结果,Enzyme已经告诉你了。
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To configure an adapter, you should call Enzyme.configure({ adapter: new Adapter() })before using any of Enzyme's top level APIs, where Adapter is the adaptercorresponding to the library currently being tested. For example:
import Adapter from 'enzyme-adapter-react-15';
To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html
不过我知道我用的已经是react-16了,跟着文档也会提到关于react-16的解决方法。
npm i -D enzyme-adapter-react-16
复制代码
回到ydjnb.spec.tsx中,
// ydjnb.spec.tsx
import { shallow, configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })
test('Jest-React-TypeScript 尝试运行', () => {
const renderer = shallow(
)
expect(renderer.text()).toEqual('hello world') // Pass
})
复制代码
css-modules
根据Jest的文档,加上一个库解决问题:identity-obj-proxy
{
"moduleNameMapper": {
"\\.(css|scss)$": "identity-obj-proxy"
},
"transform": {
...
},
...
}
复制代码
至此,需求已经能完全运作。
type test css,React-Typescript 单元测试:Jest + Enzyme相关推荐
- react 单元测试 (jest+enzyme)
react 单元测试 (jest+enzyme) 为什么要做单元测试 作为一个前端工程师,我是很想去谢单元测试的,因为每天的需求很多,还要去编写测试代码,感觉时间都不够用了. 不过最近开发了一个比较复 ...
- React Jest + enzyme 配置 及 简单用例
这里简单的介绍一下 React 项目下 Jest + enzyme 配置 并运行一个简单的测试用例. 这里跳过React项目的创建,React项目创建可以看下 React项目创建 1.安装 jest ...
- React单元测试:Jest+Enzyme
一.概述 本文介绍基于Jest+Enzyme的React单元测试编写方法,包括对组件.action.reducer和其他工具类和功能类js的测试.主要介绍对组件.action.reducer代码的单元 ...
- React单元测试:Jest + Enzyme(二)
前言 在上一篇教程中,我们成功搭建了基于Jest和Enzyme的单元测试框架并成功地跑起来第一个单元测试,可以点击这里回顾一下.今天,我们重点讨论如何通过Jest来mock数据. 什么是Mock Mo ...
- Jest enzyme 进行react单元测试
下面的文章会默认读者了解 React及其技术栈以及基本的前端单元测试,由于本文涉及到的技术较多,故不宜一一在文中介绍,谅解. 写在前面 在撰写单元测试用例之前,我们需要了解到撰写测试用例的原因.写测试 ...
- 全网最细:Jest+Enzyme测试React组件(包含交互、DOM、样式测试)
介绍 Jest是目前前端工程化下单元测试火热的技术栈,而Enzyme的支持提供了Jest测试React业务.组件的能力,下面来介绍一下React组件测试的一些实际场景. 1. 测试依赖包 " ...
- Jest+Enzyme测试React组件(上)
React函数式组件 fb团队推荐使用函数式组件进行开发,但是函数是无状态的, 用class组件不香嘛,自带state状态,为什么要换写法?原因我们就来讲讲. 1. hooks是比HOC和render ...
- Jest + Enzyme React 组件测试实践
≈ 最近把组件测试接入到日常开发,提高了项目代码健壮性,可维护性.本人也从0到1收获了组件测试的经验. 本文总结一下最近两周 组件测试 相关的研究,包括: Jest + Enzyme 的基本介绍 Je ...
- 搭建 Jest+ Enzyme 测试环境
1.为什么要使用单元测试工具? 因为代码之间的相互调用关系,又希望测试过程单元相互独立,又能正常运行,这就需要我们对被测函数的依赖函数和环境进行mock,在测试数据输入.测试执行和测试结果检查方面存在 ...
- 【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
一.通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目,可以看到 ...
最新文章
- 一个不错的命令行解析类
- springBoot 在线心理咨询管理系统
- Android 页面进行镜像反转-面试
- mac 下搭建 php + apache + mysql 服务器(cool)
- c语言socket发送excel,socket文件传输功能的实现
- union和union all有什么区别_Django基础(29):select_related和prefetch_related的用法与区别...
- [转]Flask --- 框架快速入门
- 短期记忆容量必需有限
- php检查 session是否存在,检查sessionid已知的PHP会话是否处于活动状态
- 全球最顶级的电脑配置_全球最顶级外汇交易员,非这10位莫属
- 11.10金山面试内容
- android购物车栏,Android怎么实现二级列表购物车功能
- Atitit.java expression fsm 表达式词法分析引擎 v2 qaa.docx
- css3伸缩布局(附实例、图解)
- PySide从实战开始学习系列(一)认识PySide
- 网件r7000梅林系统5g不稳定 5g信号经常掉线解决方法
- 51单片机学习笔记——DA转换
- 基于pyod中机器学习与神经网络方法的异常值识别方法合集(含2022年全国服务外包大赛实例)
- oracle 12c id 自增,Oracle 12c Identity Columns 新特性 和 序列 构成自增列
- 实时数据库 - 笔记