Typescript+React学习笔记（三）- 实战要点

1. !default的含义

!default 是 scss 提供的关键字，它的作用是指定某个变量的默认值，当用户在其他地方修改这个变量时，原有的默认值将全不生效

2.带下划线的scss文件

例如：_xxx.scss

带下划线的scss文件表示，只能被 @import 引入使用（引入时不用加下划线，如 @import xxx.scss），而不能被单独编译成css文件

3.normalize.css

由于不同浏览器对自身元素基本样式（如margin，padding等等）的定义不尽相同，normalize.css的主要作用就是将不同浏览器元素的基本样式作一个统一的定义，同时修复了浏览器一些bug并作了一些优化处理。

使用方法：
在github上找到该css文件，将里面的内容拷贝出来，粘贴到本地创建的某个scss文件，然后把其中的数值改为自定义的scss变量

4.常规Jest编译单元测试文件

Jest 基础用法 链接

//常规用法，打开cmd
npx jest xxx.test.js    //单次编译xxx单元测试文件
npx jest xxx.test.js --watch  //--watch表示监听xxx文件，一旦发生变化则立即重新编译

5.Jest中的 .toBe() 和 .toEqual()

.toBe() 是判断全等，包括内存地址和值
.toEqual() 只判断值是否相等

except({a: 1}).toBe({a: 1});			//不通过
except({a: 1}).toEqual({a: 1});		//通过

6.在React中使用单元测试

react脚手架中已经集成了Jest，运行命令：npm run test

单元测试文件 规范：

1. __tests__目录下的js或tsx文件
2. .test.js 或 .test.tsx文件
3. .spec.js 或 .spec.tsx文件

7.Jest-dom

Jest-dom是Testing Library旗下的一款产品，Testing Library还有很多其他框架的单元测试库。
Jest中最常用的是断言库（Matchers），而Jest-dom是对断言库的增强，新增了许多针对dom的断言函数。
react testing library 和 Jest-dom 都集成在react脚手架中了。

8.cleanup()

react的Testing Library在单元测试的每个it(…)结束后，都会默认先调用一下cleanup()，否则某些元素可能会被重复渲染。

let wrapper;
describe('test my ...', () => {
	beforeEach(() => { //beforeEach会在每个it开始前执行
		wrapper = render(<div id="a">xxx</div>);
	})
	it('should render correct1 ...', () => {
		...
	})
	it('should render correct2 ...', () => {
		cleanup(); //因为boforeEach已经render过了，下面如果又要render同一个dom的话，需要手动cleanup()一下，否则会报错
		wrapper = render(<div id="a">xxx</div>);
	})
})

9.在线mock数据的网站

• JSONPlaceholder
• Mocky