React Unit Test - 学习/实践

野性酷女 2022-12-27 01:59 160阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> 主要用于如何编写react单元测试, 构建健壮前端项目. 这里主要使用 Jest/React test library 进行react单元测试. </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1.文档阅读 <a href="https://zh-hans.reactjs.org/docs/testing.html" rel="nofollow">https://zh-hans.reactjs.org/docs/testing.html</a>&nbsp; &nbsp;// react测试 -- 有些懵懵懂懂 <a href="https://reactjs.org/docs/test-utils.html" rel="nofollow">https://reactjs.org/docs/test-utils.html</a>&nbsp; &nbsp;// 官网提供的讲解与一些例子 <a href="https://jestjs.io/docs/en/getting-started" rel="nofollow">https://jestjs.io/docs/en/getting-started</a>&nbsp; // Jest 官网 <a href="http://wiki.c2.com/?ArrangeActAssert" rel="nofollow">http://wiki.c2.com/?ArrangeActAssert</a> <a href="https://testing-library.com/docs/react-testing-library/intro/" rel="nofollow">https://testing-library.com/docs/react-testing-library/intro/</a>&nbsp; &nbsp;// 测试用例代码库 -- 推荐 <a href="https://www.robinwieruch.de/react-testing-library" rel="nofollow">https://www.robinwieruch.de/react-testing-library</a>&nbsp; &nbsp;//&nbsp;How to use React Testing Library Tutorial&nbsp; -- 推荐阅读 --- 后续添加翻译文本 <a href="https://jestjs.io/docs/en/tutorial-react" rel="nofollow">https://jestjs.io/docs/en/tutorial-react</a>&nbsp; &nbsp;// 有讲解到如何编写单元测试 <a href="https://github.com/facebook/jest/tree/master/examples/snapshot" rel="nofollow">https://github.com/facebook/jest/tree/master/examples/snapshot</a>&nbsp; &nbsp;// Jest&nbsp; example <a href="https://github.com/facebook/jest/tree/master/examples" rel="nofollow">https://github.com/facebook/jest/tree/master/examples</a>&nbsp; &nbsp;// 多看学习下大神的实践 <a href="https://github.com/facebook/jest/blob/master/examples/snapshot/__tests__/link.react.test.js" rel="nofollow">https://github.com/facebook/jest/blob/master/examples/snapshot/__tests__/link.react.test.js</a>&nbsp; &nbsp;// 详细的代码例子可供参考 &nbsp; <a href="http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html" rel="nofollow">http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html</a>&nbsp; &nbsp;// 可类比思考总结 <img alt="" src="https://img-blog.csdnimg.cn/img_convert/9c3ec902d8281e342ec1542b1ea4fa1e.png"> &nbsp; 视频资源 <a href="https://www.bilibili.com/video/BV1Pv411q7Hz/?spm_id_from=333.788.videocard.2" rel="nofollow">https://www.bilibili.com/video/BV1Pv411q7Hz/?spm_id_from=333.788.videocard.2</a>&nbsp; &nbsp;// 英文, 且没有字幕 中文视频/文档很少 &nbsp; 2.整理输出 大概思路: 安装jest库进行react application的unit test, 也可以使用react-test-library进行react unit test的编写. &nbsp; 实践文档参考来源: <a href="https://zh-hans.reactjs.org/docs/testing-recipes.html" rel="nofollow">https://zh-hans.reactjs.org/docs/testing-recipes.html</a>&nbsp; <img alt="" height="274" src="https://img-blog.csdnimg.cn/20201209172247267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="967"> 解读: 即可不使用<a href="https://testing-library.com/docs/react-testing-library/intro" rel="nofollow">react-testing-library</a>, 直接是同jest进行编写unit test. 但是, 可能写起来会比较冗余, 所以又建议使用二次封装库. <a href="https://testing-library.com/docs/react-testing-library/intro" rel="nofollow">https://testing-library.com/docs/react-testing-library/intro</a> &nbsp; 代码实践:&nbsp; 使用create-react-app脚手架创建react app, 并在其中实践react unit test的编写运行测试. <a href="https://github.com/ningxiaofa/react-unit-test-learning" rel="nofollow">https://github.com/ningxiaofa/react-unit-test-learning</a> &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

<table> 
 <tbody> 
 <tr> 
 <td> 1.突然发现, 有时候, 编写unit test不是一件很容易的事, 特别是集成使用到比较多的东西~~~ // 知识欠缺 &nbsp; 2. window下cmd执行 单元测试:&nbsp; yarn test&nbsp; 一直报错, 原因Windows下cmd存在环境问题, 需要在docker容器中执行单元测试 参见:&nbsp;&nbsp;<a href="https://blog.csdn.net/william_n/article/details/110876725" rel="nofollow">https://blog.csdn.net/william_n/article/details/110876725</a> </td> 
 </tr> 
 </tbody> 
</table>

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://zh-hans.reactjs.org/docs/testing.html" rel="nofollow">https://zh-hans.reactjs.org/docs/testing.html</a>&nbsp; &nbsp;// react测试 <a href="https://testing-library.com/docs/react-testing-library/intro/" rel="nofollow">https://testing-library.com/docs/react-testing-library/intro/</a>&nbsp; &nbsp;// 测试用例代码库 -- 推荐 </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...

![react testing library tutorial][]

[react testing library tutorial]: /images/20221120/1e77bce1b5ab46b39e926fa1c002f7af.png