首先呢，咱这里要求测试覆盖率要有90以上，UI也要测。原本用的mocha测试框架，然后由于有大量的UI需要测试，导致了测试代码比原本的代码还要多(太尼玛真实了..)。然后就换了框架，用jest…还真别说，jest的snapshot是真滴好使，只要mapToSnapShot一个方法就能cover大部分的UI。
1：测试不同分辨率下不同的表现
然而，jest也不是万能的，为了适配分辨率，用mediaquery写了好几套的css，snapshot只能测到某一套css。还有两套的是测不到的(以我个人感觉，测不到就测不到呗，奈何测试覆盖率会低下来哦)…所以这里就记录第一个tips，用jest测试不同分辨率。
首先呢，测UI其实只要html上面的className是我们想要的，具体长啥样我们是不管的。然后media query不同的分辨率下className不同，是根据body里面的clientWidth来判断的。
那么问题简单了，jest啊mocha啊其实算是个js的运行容器，类似于document.body这样的全局属性是存在的，但是它们没有值(直接去获得document.body.clientWidth是拿不到的，因为在jest里面有body，但是body里面没有clientWidth)，所以我们用Object.defineProperty(document.body, ‘clientWidth’, { value: 768 ,configurable: true,});来给jest添加全局clientWidth就可以了(configurable记得要加上，不然不能redefine property)。
2：单独组件不要使用redux
= =这个经验真的是血的教训….
一般来说呢，测试redux包裹的组件呢，就是直接把使用connect之前的组件export出来，然后直接测。因为如果引用的是connect的那个组件，你就需要在测试里面同样的加上provider父组件。而且好多东西你完全测不了(忘了当时遇到啥东西测不了，反正最后还是选择不引用connect那个组件解决的)….如图：
后来碰到一个情况，我特么手贱在某个component里面用了redux，直接导致所有用到该component的container直接测试failed….在shallow component的时候直接就报错，connect过的组件需要provider……然后就只能默默的把东西都改回来….
那么咱为啥要在组件里面写redux呢，因为某个组件就固定要用到redux的某两个数据…参考前面的文章..聊天框动画效果