VSCode - 插件Remote container [Jest unit test] - 学习/实践

偏执的太偏执、 2022-12-27 07:18 157阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于使用vscode进行开发调试测试.</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1.文档阅读 <a href="https://zhuanlan.zhihu.com/p/95878237" rel="nofollow">https://zhuanlan.zhihu.com/p/95878237</a>&nbsp; &nbsp;// VSCode云端开发环境搭建 （Remote-Containers) &nbsp; 2.个人整理/实践输出 TBD &nbsp; 1.vscode中安装[如果没安装], remote-container 插件 <img alt="" height="299" src="https://img-blog.csdnimg.cn/20201208164820115.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="436"> &nbsp; <img alt="" height="378" src="https://img-blog.csdnimg.cn/20201208164852557.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="367"> &nbsp; 2.远程连接容器, 可进行测试[这里Windows下react jest unit test 一直报错, 从而采取这种方法] <img alt="" height="39" src="https://img-blog.csdnimg.cn/20201208165002444.png" width="554"> <img alt="" height="428" src="https://img-blog.csdnimg.cn/20201208165048102.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1029"> 关闭之后, 重新打开该下项目 <img alt="" height="748" src="https://img-blog.csdnimg.cn/20201208165156837.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> <img alt="" height="463" src="https://img-blog.csdnimg.cn/20201208165223328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="982"> 3.查看docker运行的容器 如下可知, 就是vscode插件remote-container 为我们实例化一个docker容器. 开启另外一个环境. 或用于开发用于测试. <img alt="" height="146" src="https://img-blog.csdnimg.cn/20201208165305672.png" width="1200"> &nbsp; &nbsp; 备注: 上面的环境是运行在docker容器中, 所以, 开发/测试的命令都要在连接远程容器的命令终端中执行, 本地执行, 有时会出现问题. <img alt="" height="128" src="https://img-blog.csdnimg.cn/20201209152120560.png" width="605"> 在连接远程容器的终端中, 执行上面命令, 浏览器正常工作. <img alt="" height="671" src="https://img-blog.csdnimg.cn/20201209152143701.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="379"> &nbsp; &nbsp; <h3>之后打开</h3> &nbsp; 重新连接远程容器即可 <img alt="" height="1042" src="https://img-blog.csdnimg.cn/20210119120854580.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="772"> 升级之后, 此时目录并非项目目录下. &nbsp; 需要进入项目目录下: <img alt="" height="638" src="https://img-blog.csdnimg.cn/20210119121308677.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="903"> cd /workspaces/purchase-landing-widget 执行单元测试 yarn test 或者 yarn test:u&nbsp; // 覆盖生成snapshot文件 &nbsp; &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td><a href="https://zhuanlan.zhihu.com/p/95878237" rel="nofollow">https://zhuanlan.zhihu.com/p/95878237</a>&nbsp; &nbsp;// VSCode云端开发环境搭建 （Remote-Containers)</td> 
 </tr> 
 </tbody> 
</table>

后续补充

...