-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtest_for_front_end.html
1 lines (1 loc) · 9.41 KB
/
test_for_front_end.html
1
<!doctype html><html lang="zh-CN" class="night"><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1,maximum-scale=4,user-scalable=0" name="viewport"><title>Ede's Blog</title><meta name="description" content="Try to be a qualified programmer"><meta property="og:type" content="website"><meta property="og:description" content="Try to be a qualified programmer"><meta property="og:title" content="Ede's Blog"><meta property="og:site_name" content="Ede's Blog"><meta property="og:url" content="https://ede.ink"><meta property="og:image" content="https://edeity.oss-cn-shenzhen.aliyuncs.com/public/edeity_o.png"><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"><link rel="mainfest" href="/mainfest.json"><link rel="stylesheet" href="/public/css/common.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_707055_4b9og9sc5lx.css"><script>!function(){var e=-1!==window.location.search.indexOf("theme=night")||"night"===window.localStorage.getItem("edeity-theme_theme"),t=-1!==window.location.search.indexOf("theme=light")||"light"===window.localStorage.getItem("edeity-theme_theme");(new Date).getHours();var n=document.querySelector("html");e?n.classList.add("night"):t?n.classList.remove("night"):n.classList.add("night")}(),document.addEventListener("DOMContentLoaded",function(){null!==document.querySelector("ol.toc")&&(document.querySelector("#nav-bar").style.cssText="display: block")})</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-M3J9QSEE2Z"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-M3J9QSEE2Z")</script><meta name="generator" content="Hexo 5.0.0"></head><body><div class="loading"></div><div id="switch" data-switch="{"toc":true,"use_pwa":false}"></div><header class="fullscreen"><div class="toolbar"><i class="iconfont icon-menu"></i></div><h1><a href="/">Ede's Blog</a></h1><div class="head-link"><a class="btn waves" href="/"><span><i class="iconfont icon-home">Home </i></span></a><a class="btn waves" href="/about/index.html"><span><i class="iconfont icon-me">About </i></span></a><a class="btn waves" target="_blank" rel="noopener" href="https://github.com/edeink"><span><i class="iconfont icon-github">Github</i></span></a></div></header><div class="some-link"><a class="btn" id="light-or-not"><i class="iconfont icon-light"></i> </a><a style="display:none" class="btn" id="up-to-top"><i class="iconfont icon-up"></i></a></div><div id="nav-bar" style="display:none"><div class="toc"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%A8CRA%E4%B8%AD%E4%BD%BF%E7%94%A8mocha"><span class="toc-number">1.</span> <span class="toc-text">在CRA中使用mocha</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%A8Chrome%E4%B8%AD%E8%B0%83%E8%AF%95Node"><span class="toc-number">2.</span> <span class="toc-text">在Chrome中调试Node</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E6%B5%8B%E8%AF%95"><span class="toc-number">3.</span> <span class="toc-text">关于测试</span></a></li></ol></div></div><main id="content-main" class="section"><div class="list-item"><h1 class="post-title"><a id="前端测试简记：mocha + chai" class="article-link" href="">前端测试简记：mocha + chai</a></h1><div class="post-meta"><time class="meta published">Jan 5, 2018</time></div><div class="article"><div class="post-excerpt markdown-body"><p>个人折腾玩具代码时，有一些数据层接口（类Kero接口）需要保证稳定性，因而需要写写单元测试。<code>create-react-app</code>虽自带<a target="_blank" rel="noopener" href="http://facebook.github.io/jest/">jest</a>，<del>但发现<code>mocha+chai</code>用户较多</del>，故学习一下；在create-react-app上使用mocha也非常简单：</p><blockquote><p>Update By 2022.07.16，Jest使用人数接近Mocha的2.5倍，建议从众，使用Jest。</p><ul><li><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/jest">Jest</a> 周下载量：16,615,232</li><li><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/mocha">Mocha</a>周下载量：6,655,130</li></ul></blockquote><h2 id="在CRA中使用mocha"><a href="#在CRA中使用mocha" class="headerlink" title="在CRA中使用mocha"></a>在CRA中使用mocha</h2><p>因为工程是CRA生成的，按照<a target="_blank" rel="noopener" href="https://www.codementor.io/daveschinkel13/running-mocha-enzyme-with-creat-react-app-84flnngkk#getting-mocha-to-work-again-steps">文章</a>步骤：</p><ol><li><p>安装<code>babel-preset-react-app</code></p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">yarn add -D babel-preset-react-app</span><br></pre></td></tr></table></figure></li><li><p>在项目根目录新建<code>.babelrc</code>配置文件，并输入内容</p><figure class="highlight"><table><tr><td class="code"><pre><span class="line">"babel": {</span><br><span class="line"> "presets": [</span><br><span class="line"> <span class="string">"react-app"</span></span><br><span class="line"> ],</span><br><span class="line"> "plugins": [</span><br><span class="line"> <span class="string">"transform-es2015-modules-commonjs"</span></span><br><span class="line"> ]</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p><code>plugins</code>中的配置是为了转移ES6（如import或staic）这样的属性；假若使用的是ES5，则可以不选；</p></li><li><p>在<code>package.json</code> 的 <code>scripts</code>一项中，输入（或覆盖）脚本</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">NODE_ENV=development mocha --require babel-core/register ./src/Hera/<span class="built_in">test</span>/*.test.js</span><br></pre></td></tr></table></figure><p>其中 <code>require</code>选项为使用babel编译ES6语法，而<code>./src/Hera/test/*.test.js</code>为使用通配符匹配测试文件，假若不输入，则默认为<code>/test</code>文件夹；</p></li><li><p>运行测试程序即可，有关mocha和chai的入门可参考阮一峰的<a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html">文章</a></p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">yarn <span class="built_in">test</span></span><br></pre></td></tr></table></figure><p><img src="https://edeity.oss-cn-shenzhen.aliyuncs.com/2018/yarn-test.png" alt="测试结果"></p></li></ol><h2 id="在Chrome中调试Node"><a href="#在Chrome中调试Node" class="headerlink" title="在Chrome中调试Node"></a>在Chrome中调试Node</h2><p>基于上一小节，可以运行mocha，但不知如何断点调试；有文章建议用<code>node-inspector</code>，深入之，发现chrome已经拓展了该工具；可参考<a target="_blank" rel="noopener" href="https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27">文章</a>，步骤也很简单：</p><ol><li><p>在Chrome中输入</p><figure class="highlight http"><table><tr><td class="code"><pre><span class="line"><span class="attribute">chrome://inspect/#devices</span></span><br></pre></td></tr></table></figure><p>点击<code>open dedicated DevTools for Node</code>允许Node连接</p></li><li><p>将package.json中原<code>test</code>脚本，添加<code>--inspect-brk</code>选项</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 原来</span></span><br><span class="line">NODE_ENV=development mocha --require babel-core/register ./src/Hera/<span class="built_in">test</span>/*.test.js</span><br><span class="line"><span class="comment"># 更改后</span></span><br><span class="line">NODE_ENV=development mocha --inspect-brk --require babel-core/register ./src/Hera/<span class="built_in">test</span>/*.test.js</span><br></pre></td></tr></table></figure></li><li><p>在测试的脚本中标注<code>debugger</code>，运行<code>yarn test</code></p><p><img src="https://edeity.oss-cn-shenzhen.aliyuncs.com/2018/chrome-test.png" alt="chrome-test"></p></li></ol><h2 id="关于测试"><a href="#关于测试" class="headerlink" title="关于测试"></a>关于测试</h2><p>平常工作中，调试多，测试少；</p><p>语法方面，编辑器 + eslint即可满足大部分的静态代码检测；</p><p>数据方面，尤其是前端被调用的数据层接口，写单元测试还是蛮重要的；</p><p>视图方面，前一阵子看测试部在用<a target="_blank" rel="noopener" href="http://docs.seleniumhq.org/">Selenium</a> ，感觉中规中矩；然而视图或业务变动太频繁，个人认为初期不用太过关注该部分。大不了一声吼：这个世界就没有没有Bug的程序！</p></div></div></div><div class="more section"><div class="pre"><a class="article-link" href="/my_enterprise_application.html"><i class="iconfont icon-right"></i> <span>我所认知的企业级ERP应用</span></a></div><div class="next"><a class="article-link" href="/bye_2017_and_hi_2018.html">Bye 2017, Hi 2018 <i class="iconfont icon-right"></i></a></div></div></main></body><footer class="section fullscreen"><div class="footer-desc">Edeink © 2015-2022 · Powered by Hexo</div></footer><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="/public/js/init.js"></script></html>