脚本宝典收集整理的这篇文章主要介绍了

前端单元测试

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>为保证代码的质量,单元测试必不可少。本文记录自己在学习单元测试过程中的一些总结。</p> <h3 id="articleHeader0">TDD与BDD的区别</h3> <p>TDD属于测试驱动开发,BDD属于行为驱动开发。个人理解其实就是TDD先写测试模块,再写主功能代码,然后能让测试模块通过测试,而BDD是先写主功能模块,z再写测试模块。详见<a href="https://github.com/jdavis/tdd-vs-bdd" rel="nofollow noreferrer" target="_blank">示例</a></p> <h3 id="articleHeader1">服务端代码测试</h3> <p>所谓服务端代码,指的就是一个<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>的模块,能在<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>的环境中运行。以一个项目为例,代码结构如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=". ├── index.js ├── node_modules ├── package.json └── test └── test.js" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>. ├── <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>dex</span><span class="hljs-selector-class">.js</span> ├── <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules</span> ├── <span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a></span><span class="hljs-selector-class">.json</span> └── <span class="hljs-selector-tag">test</span> └── <span class="hljs-selector-tag">test</span><span class="hljs-selector-class">.js</span></code></pre> <p>前端测试框架主要是<a href="https://mochajs.org/" rel="nofollow noreferrer" target="_blank">Mocha</a>与<a href="https://jasmine.github.io/" rel="nofollow noreferrer" target="_blank">Jasmine</a>,这里我们选择Mocha,断言库有<a href="https://github.com/shouldjs/should.js" rel="nofollow noreferrer" target="_blank">should</a>、<a href="https://github.com/Automattic/expect.js" rel="nofollow noreferrer" target="_blank">expect</a>、<a href="http://chaijs.com/" rel="nofollow noreferrer" target="_blank">chai</a>以及node自带的assert。这里我们选择chai,chai中包含了expect、should及assert的书写风格。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install mocha chai --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code class="Git" style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">inst<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a></span> mocha chai <span class="hljs-comment">--save-dev</span></code></pre> <ul> <li><a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.js</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const getNum = (value) => {<br /> return value * 2<br /> }</p> <p>module.exports = getNum" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> getNum = <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> value * <span class="hljs-number">2</span> } <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = getNum</code></pre> <ul> <li>test.js</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const chai = require('chai') const expect = chai.expect const getNum = require('../index') describe('Test', function() { it('should return 20 when the value is 10', function() { expect(getNum(10)).to.equal(20) }) })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">const</span> chai = <span class="hljs-built_in">require</span>(<span class="hljs-string">'chai'</span>) <span class="hljs-keyword">const</span> expect = chai.expect <span class="hljs-keyword">const</span> getNum = <span class="hljs-built_in">require</span>(<span class="hljs-string">'../index'</span>) describe(<span class="hljs-string">'Test'</span>, <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>(<span class="hljs-params"></span>) </span>{ it(<span class="hljs-string">'should return 20 when the value is 10'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ expect(getNum(<span class="hljs-number">10</span>)).to.equal(<span class="hljs-number">20</span>) }) })</code></pre> <p>describe用于给测试用例分组,it代表一个测试用例。</p> <ul> <li><a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;scripts&quot;: { &quot;test&quot;: &quot;mocha&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"test"</span>: <span class="hljs-string">"mocha"</span> }</code></pre> <p>&nbsp;需要在全局下安装Mocha</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install mocha -g" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> mocha -g</code></pre> <p>项目目录下执行</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm run test" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs bash"><code class="git" style="word-break: break-word; white-space: initial;">npm run <span class="hljs-built_in">test</span></code></pre> <p>测试通过<br /><span class="img-wrap"><img data-src="/img/remote/1460000013470488?w=648&amp;h=220" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>完成代码测试之后我们再去看看代码测试的覆盖率。测试代码覆盖率我们选择使用<a href="https://github.com/gotwarlost/istanbul" rel="nofollow noreferrer" target="_blank">istanbul</a>,全局安装</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install -g istanbul" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> -g istanbul</code></pre> <p>使用istanbul启动Mocha</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="istanbul cover _mocha" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">istanbul</span> cover _mocha</code></pre> <p>测试通过,覆盖率100%</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013470489?w=1130&amp;h=548" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>行覆盖率(l<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>e coverage):是否每一行都执行了?<br />函数覆盖率(<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> coverage):是否每个函数都调用了?<br />分支覆盖率(branch coverage):是否每个<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>代码块都执行了?<br />语句覆盖率(statement coverage):是否每个语句都执行了?</p> <p>修改index.js再看代码覆盖率</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const getNum = (value) => {<br /> if(value === 0) {<br /> return 1<br /> }else {<br /> return value * 2<br /> }<br /> }</p> <p>module.exports = getNum" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">const</span> getNum = <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span>(value === <span class="hljs-number">0</span>) { <span class="hljs-keyword">return</span> <span class="hljs-number">1</span> }<span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> { <span class="hljs-keyword">return</span> value * <span class="hljs-number">2</span> } } <span class="hljs-built_in">module</span>.exports = getNum</code></pre> <p>发现代码覆盖率发生了变化</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013470490?w=1134&amp;h=548" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>修改test.js添加测试用例</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="describe('Test', function() { it('should return 20 when the value is 10', function() { expect(getNum(10)).to.equal(20) }) it('should return 1 when the value is 0', function() { expect(getNum(0)).to.equal(0) }) })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code>describe('Test', function() { it('should return <span class="hljs-number">20</span> when the value is <span class="hljs-number">10</span>', function() { expect(<span class="hljs-name">getNum</span>(<span class="hljs-number">10</span>)).to.equal(<span class="hljs-number">20</span>) }) it('should return <span class="hljs-number">1</span> when the value is <span class="hljs-number">0</span>', function() { expect(<span class="hljs-name">getNum</span>(<span class="hljs-number">0</span>)).to.equal(<span class="hljs-number">0</span>) }) })</code></pre> <p>代码覆盖率又回到了100%</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013470491?w=1134&amp;h=580" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h3 id="articleHeader2">客户端代码</h3> <p>客户端代码即运行在浏览器中的代码,代码中包含了win<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>w、<a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>等对象,需要在浏览器环境下才能起作用。还是以一个项目为例,代码结构如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=". ├── index.js ├── node_modules ├── package.json └── test └── test.js └── test.html" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>. ├── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.js</span> ├── <span class="hljs-selector-tag">node_modules</span> ├── <span class="hljs-selector-tag">package</span><span class="hljs-selector-class">.json</span> └── <span class="hljs-selector-tag">test</span> └── <span class="hljs-selector-tag">test</span><span class="hljs-selector-class">.js</span> └── <span class="hljs-selector-tag">test</span><span class="hljs-selector-class">.html</span></code></pre> <p>我们依然使用Mocha测试库及chai断言库。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install mocha chai --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> mocha chai <span class="hljs-comment">--save-dev</span></code></pre> <ul> <li>index.js</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="window.createDiv = function(value) { var oDiv = document.createElement('div') oDiv.id = 'myDiv' oDiv.innerHTML = value document.body.appendChild(oDiv) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-built_in"><a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a></span>.createDiv = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> oDiv = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.createElement(<span class="hljs-string">'<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>'</span>) oDiv.id = <span class="hljs-string">'myDiv'</span> oDiv.inner<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a> = value <span class="hljs-built_in"><a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>cument</span>.body.appendChild(oDiv) }</code></pre> <ul> <li>test.js</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="mocha.ui('bdd') var expect = chai.expect describe(&quot;Tests&quot;, function () { before(function () { createDiv('test') }) it(&quot;content right&quot;, function () { var el = document.querySelector('#myDiv') expect(el).to.not.equal(null) expect(el.innerHTML).to.equal(&quot;test&quot;) }) }) mocha.run()" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>mocha.ui(<span class="hljs-string">'bdd'</span>) <span class="hljs-keyword">var</span> expect = chai.expect describe(<span class="hljs-string">"Tests"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ be<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>e(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ createDiv(<span class="hljs-string">'test'</span>) }) it(<span class="hljs-string">"content right"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> el = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#myDiv'</span>) expect(el).to.not.equal(<span class="hljs-literal"><a href="http://www.js-code.com/tag/null" title="浏览关于“null”的文章" target="_blank" class="tag_link">null</a></span>) expect(el.innerHTML).to.equal(<span class="hljs-string">"test"</span>) }) }) mocha.run()</code></pre> <ul> <li>test.html</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<html><br /> <head><br /> <title> Tests </title> <link rel=&quot;stylesheet&quot; href=&quot;../node_modules/mocha/mocha.css&quot;/> </head><br /> <body></p> <div id=&quot;mocha&quot;></div> <p> <script src=&quot;../node_modules/mocha/mocha.js&quot;></script><br /> <script src=&quot;../node_modules/chai/chai.js&quot;></script><br /> <script src=&quot;../index.js&quot;></script><br /> <script src=&quot;./test.js&quot;></script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span> Tests <span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</a></span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../node_modules/mocha/mocha.css"</span>/&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mocha"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../node_modules/mocha/mocha.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../node_modules/chai/chai.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../index.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./test.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>直接用浏览器打开test.html文件便能看到测试结果<br /><span class="img-wrap"><img data-src="/img/remote/1460000013470492" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="2018-01-11 2 15 12" title="2018-01-11 2 15 12" style="cursor: pointer;"></span></p> <p>当然我们可以选择<a href="http://phantomjs.org/" rel="nofollow noreferrer" target="_blank">PhantomJS</a>模拟浏览器去做测试,这里我们使用<a href="https://github.com/nathanboktae/mocha-phantomjs" rel="nofollow noreferrer" target="_blank">mocha-phantomjs</a>对test.html做测试。</p> <p>全局安装mocha-phantomjs</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install mocha-phantomjs -g" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> mocha-phantomjs -g</code></pre> <p>修改<a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;scripts&quot;: { &quot;test&quot;: &quot;mocha-phantomjs test/test.html&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"test"</span>: <span class="hljs-string">"mocha-phantomjs test/test.html"</span> }</code></pre> <p>项目目录下执行</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm run test" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs bash"><code style="word-break: break-word; white-space: initial;">npm run <span class="hljs-built_in">test</span></code></pre> <p>mocha-phantomjs在mac下执行会报<code>phantomjs terminated with signal SIGSEGV</code>,暂时没有找到什么解决方案。所以我在ubuntu下执行,结果显示如图</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013470493?w=389&amp;h=197" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="2018-01-11 2 31 45" title="2018-01-11 2 31 45" style="cursor: pointer;"></span></p> <p>上述方式虽然能完成代码的单元测试,但是要完成代码覆盖率的计算也没有什么好的方式,所以我选择引入测试管理工具<a href="https://karma-runner.github.io/2.0/index.html" rel="nofollow noreferrer" target="_blank">karma</a></p> <h3 id="articleHeader3">karma使用指南</h3> <p>略去一大堆介绍karma的废话,项目下引入karma</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install karma --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> karma <span class="hljs-comment">--save-dev</span></code></pre> <p>初始化配置karma配置文件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install karma -g karma init" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">npm</span> <span class="hljs-string">install karma -g</span> <span class="hljs-attr">karma</span> <span class="hljs-string">init</span></code></pre> <p>使用karma默认配置看看每一项的作用</p> <ul> <li>Karma.conf.js</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = function(config) { config.set({ basePath: '', // 设置根目录 frameworks: ['jasmine'], // 测试框架 files: [ // 浏览器中加载的文件 ], exclude: [ // 浏览器中加载的文件中排除的文件 ], preprocessors: { // 预处理 }, reporters: ['progress'], // 添加额外的插件 port: 9876, // 开启测试服务时监听的端口 colors: true, logLevel: config.LOG_INFO, autoWatch: true, // 监听文件变化,发生变化则重新编译 browsers: ['Chrome'], // 测试的浏览器 singleRun: false, // 执行测试用例后是否关闭测试服务 concurrency: Infinity }) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">config</span>) </span>{ config.set({ <span class="hljs-attr">basePath</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 设置根目录</span> <a href="http://www.js-code.com/tag/frame" title="浏览关于“frame”的文章" target="_blank" class="tag_link">frame</a>works: [<span class="hljs-string">'jasmine'</span>], <span class="hljs-comment">// 测试框架</span> files: [ <span class="hljs-comment">// 浏览器中加载的文件</span> ], <span class="hljs-attr">exclude</span>: [ <span class="hljs-comment">// 浏览器中加载的文件中排除的文件</span> ], <span class="hljs-attr">preprocessors</span>: { <span class="hljs-comment">// 预处理</span> }, <span class="hljs-attr">reporters</span>: [<span class="hljs-string">'progress'</span>], <span class="hljs-comment">// 添加额外的插件</span> port: <span class="hljs-number">9876</span>, <span class="hljs-comment">// 开启测试服务时监听的端口</span> colors: <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>, <span class="hljs-attr">logLevel</span>: config.LOG_INFO, <span class="hljs-attr">autoWatch</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 监听文件变化,发生变化则重新编译</span> browsers: [<span class="hljs-string">'Chrome'</span>], <span class="hljs-comment">// 测试的浏览器</span> singleRun: <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>, <span class="hljs-comment">// 执行测试用例后是否关闭测试服务</span> concurrency: <span class="hljs-literal"><a href="http://www.js-code.com/tag/Infinity" title="浏览关于“Infinity”的文章" target="_blank" class="tag_link">Infinity</a></span> }) }</code></pre> <p>此时的项目结构如下所示</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=". ├── index.js ├── node_modules ├── package.json ├── karma.conf.js └── test └── test.js" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>. ├── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.js</span> ├── <span class="hljs-selector-tag">node_modules</span> ├── <span class="hljs-selector-tag">package</span><span class="hljs-selector-class">.json</span> ├── <span class="hljs-selector-tag">karma</span><span class="hljs-selector-class">.conf</span><span class="hljs-selector-class">.js</span> └── <span class="hljs-selector-tag">test</span> └── <span class="hljs-selector-tag">test</span><span class="hljs-selector-class">.js</span></code></pre> <p>首先我们将测试框架jasmine改为我们熟悉的mocha及chai,添加files及<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>s</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install karma karma-mocha karma-chai mocha chai karma-chrome-launcher --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> karma karma-mocha karma-chai mocha chai karma-chrome-launcher <span class="hljs-comment">--save-dev</span></code></pre> <ul> <li>karma.conf.js</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = function(config) { config.set({ basePath: '', frameworks: ['mocha', 'chai'], files: [ 'index.js', 'test/*.js' ], exclude: [ ], preprocessors: { }, reporters: ['progress'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false, concurrency: Infinity, plugins: [ 'karma-chrome-launcher', 'karma-mocha', 'karma-chai', ] }) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>module.exports = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(config)</span></span> { <span class="hljs-built_in">config</span>.set({ basePath: <span class="hljs-string">''</span>, frameworks: [<span class="hljs-string">'mocha'</span>, <span class="hljs-string">'chai'</span>], files: [ <span class="hljs-string">'index.js'</span>, <span class="hljs-string">'test/*.js'</span> ], exclude: [ ], preprocessors: { }, reporters: [<span class="hljs-string">'progress'</span>], port: <span class="hljs-number">9876</span>, colors: <span class="hljs-literal">true</span>, logLevel: <span class="hljs-built_in">config</span>.LOG_INFO, autoWatch: <span class="hljs-literal">true</span>, browsers: [<span class="hljs-string">'Chrome'</span>], singleRun: <span class="hljs-literal">false</span>, concurrency: Infinity, <a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a>s: [ <span class="hljs-string">'karma-chrome-launcher'</span>, <span class="hljs-string">'karma-mocha'</span>, <span class="hljs-string">'karma-chai'</span>, ] }) }</code></pre> <p>全局安装karma-cli</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install -g karma-cli" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> -g karma-cli</code></pre> <p>修改package.json</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;scripts&quot;: { &quot;test&quot;: &quot;karma start karma.conf.js&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"test"</span>: <span class="hljs-string">"karma start karma.conf.js"</span> }</code></pre> <p>执行npm run test便可以启用chrome去加载页面。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013470494?w=1220&amp;h=382" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h3 id="articleHeader4">karma测试代码覆盖率</h3> <p>测试代码覆盖率,我们还是选择使用PhantomJS模拟浏览器,将<code>singleRun</code>设为<code><a href="http://www.js-code.com/tag/true" title="true" target="_blank">true</a></code>,即执行完测试用例就退出测试服务。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install karma-phantomjs-launcher --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> karma-phantomjs-launcher <span class="hljs-comment">--save-dev</span></code></pre> <p>将<code>browsers</code>中的<code>Chrome</code>改为<code>PhantomJS</code>,<code><a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>s</code>中的<code>karma-chrome-launcher</code>改为<code>karma-phantomjs-launcher</code></p> <p>执行npm run test ,测试通过且自动退出如图所示</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013470495?w=1130&amp;h=370" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>引入karma代码覆盖率模块karma-coverage,改模块依赖于istanbul</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install istanbul karma-coverage --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> istanbul karma-coverage <span class="hljs-comment">--save-dev</span></code></pre> <p>修改karma.conf.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = function(config) { config.set({ basePath: '', frameworks: ['mocha', 'chai'], files: [ 'index.js', 'test/*.js' ], exclude: [ ], preprocessors: { 'index.js': ['coverage'] }, reporters: ['progress', 'coverage'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['PhantomJS'], singleRun: true, concurrency: Infinity, coverageReporter: { type : 'text-summary' }, plugins: [ 'karma-phantomjs-launcher', 'karma-mocha', 'karma-coverage', 'karma-chai', ] }) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>module.exports = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(config)</span></span> { <span class="hljs-built_in">config</span>.set({ basePath: <span class="hljs-string">''</span>, frameworks: [<span class="hljs-string">'mocha'</span>, <span class="hljs-string">'chai'</span>], files: [ <span class="hljs-string">'index.js'</span>, <span class="hljs-string">'test/*.js'</span> ], exclude: [ ], preprocessors: { <span class="hljs-string">'index.js'</span>: [<span class="hljs-string">'coverage'</span>] }, reporters: [<span class="hljs-string">'progress'</span>, <span class="hljs-string">'coverage'</span>], port: <span class="hljs-number">9876</span>, colors: <span class="hljs-literal">true</span>, logLevel: <span class="hljs-built_in">config</span>.LOG_INFO, autoWatch: <span class="hljs-literal">true</span>, browsers: [<span class="hljs-string">'PhantomJS'</span>], singleRun: <span class="hljs-literal">true</span>, concurrency: Infinity, coverageReporter: { <span class="hljs-built_in">type</span> : <span class="hljs-string">'<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>-summary'</span> }, plugins: [ <span class="hljs-string">'karma-phantomjs-launcher'</span>, <span class="hljs-string">'karma-mocha'</span>, <span class="hljs-string">'karma-coverage'</span>, <span class="hljs-string">'karma-chai'</span>, ] }) }</code></pre> <p>对index.js文件使用coverage进行预处理,加入karma-coverage插件,覆盖率测试输出coverageReporter配置,详见<a href="https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md" rel="nofollow noreferrer" target="_blank">这里</a>这里为了方便截图显示将其设为<code><a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>-summary</code></p> <p>执行npm run test,显示结果如下图所示</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013470496?w=1138&amp;h=594" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h3 id="articleHeader5">ES6代码覆盖率计算</h3> <p>目前的浏览器并不能兼容所有ES6代码,所以ES6代码都需要经过<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>编译后才可在浏览器环境中运行,但编译后的代码webpack会加入许多其他的模块,对编译后的代码做测试覆盖率就没什么意义了。</p> <ul> <li>index.js</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const createDiv = value => {<br /> var oDiv = document.createElement('div')<br /> oDiv.id = 'myDiv'<br /> oDiv.innerHTML = value<br /> document.body.appendChild(oDiv)<br /> }</p> <p>module.exports = createDiv" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">const</span> createDiv = <span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> { <span class="hljs-keyword">var</span> oDiv = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'div'</span>) oDiv.id = <span class="hljs-string">'myDiv'</span> oDiv.innerHTML = value <span class="hljs-built_in">document</span>.body.appendChild(oDiv) } <span class="hljs-built_in">module</span>.exports = createDiv</code></pre> <p>我们使用ES6中的<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a></p> <ul> <li>test.js</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const createDiv = require('../index') describe(&quot;Tests&quot;, function () { before(function () { createDiv('test') }) it(&quot;content right&quot;, function () { var el = document.querySelector('#myDiv') expect(el).to.not.equal(null) expect(el.innerHTML).to.equal(&quot;test&quot;) }) })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code>const createDiv = require('../index') describe(<span class="hljs-string">"Tests"</span>, function () { before(<span class="hljs-name">function</span> () { createDiv('test') }) it(<span class="hljs-string">"content right"</span>, function () { var el = document.querySelector('#myDiv') expect(<span class="hljs-name">el</span>).to.not.equal(<span class="hljs-name">null</span>) expect(<span class="hljs-name">el</span>.innerHTML).to.equal(<span class="hljs-string">"test"</span>) }) })</code></pre> <ul> <li>kama.conf.js</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = function(config) { config.set({ basePath: '', frameworks: ['mocha', 'chai'], files: [ 'test/*.js' ], exclude: [ ], preprocessors: { 'index.js': ['coverage'], 'test/*.js': ['webpack'] }, reporters: ['progress', 'coverage'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['PhantomJS'], singleRun: true, concurrency: Infinity, coverageReporter: { type : 'text-summary' }, webpack: { module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { &quot;presets&quot;: [&quot;es2015&quot;], &quot;plugins&quot;: [[&quot;istanbul&quot;]] } } } ] } }, plugins: [ 'karma-phantomjs-launcher', 'karma-mocha', 'karma-coverage', 'karma-webpack', 'karma-chai', ] }) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>module.exports = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(config)</span></span> { <span class="hljs-built_in">config</span>.set({ basePath: <span class="hljs-string">''</span>, frameworks: [<span class="hljs-string">'mocha'</span>, <span class="hljs-string">'chai'</span>], files: [ <span class="hljs-string">'test/*.js'</span> ], exclude: [ ], preprocessors: { <span class="hljs-string">'index.js'</span>: [<span class="hljs-string">'coverage'</span>], <span class="hljs-string">'test/*.js'</span>: [<span class="hljs-string">'webpack'</span>] }, reporters: [<span class="hljs-string">'progress'</span>, <span class="hljs-string">'coverage'</span>], port: <span class="hljs-number">9876</span>, colors: <span class="hljs-literal">true</span>, logLevel: <span class="hljs-built_in">config</span>.LOG_INFO, autoWatch: <span class="hljs-literal">true</span>, browsers: [<span class="hljs-string">'PhantomJS'</span>], singleRun: <span class="hljs-literal">true</span>, concurrency: Infinity, coverageReporter: { <span class="hljs-built_in">type</span> : <span class="hljs-string">'text-summary'</span> }, webpack: { module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: <span class="hljs-string">'<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-loader'</span>, <a href="http://www.js-code.com/tag/option" title="浏览关于“option”的文章" target="_blank" class="tag_link">option</a>s: { <span class="hljs-string">"p<a href="http://www.js-code.com/tag/reset" title="浏览关于“reset”的文章" target="_blank" class="tag_link">reset</a>s"</span>: [<span class="hljs-string">"es2015"</span>], <span class="hljs-string">"plugins"</span>: <span class="hljs-string">[["istanbul"]]</span> } } } ] } }, plugins: [ <span class="hljs-string">'karma-phantomjs-launcher'</span>, <span class="hljs-string">'karma-mocha'</span>, <span class="hljs-string">'karma-coverage'</span>, <span class="hljs-string">'karma-webpack'</span>, <span class="hljs-string">'karma-chai'</span>, ] }) }</code></pre> <p>test.js文件通过require引入index.js文件,所以files只需引入test.js文件,再对test.js做webpack预处理。</p> <p>需要相关的<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>,webpack,karma依赖如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;devDependencies&quot;: { &quot;babel-core&quot;: &quot;^6.26.0&quot;, &quot;babel-loader&quot;: &quot;^7.1.2&quot;, &quot;babel-plugin-istanbul&quot;: &quot;^4.1.5&quot;, &quot;babel-preset-es2015&quot;: &quot;^6.24.1&quot;, &quot;chai&quot;: &quot;^4.1.2&quot;, &quot;istanbul&quot;: &quot;^0.4.5&quot;, &quot;karma&quot;: &quot;^2.0.0&quot;, &quot;karma-chai&quot;: &quot;^0.1.0&quot;, &quot;karma-coverage&quot;: &quot;^1.1.1&quot;, &quot;karma-mocha&quot;: &quot;^1.3.0&quot;, &quot;karma-phantomjs-launcher&quot;: &quot;^1.0.4&quot;, &quot;karma-webpack&quot;: &quot;^2.0.9&quot;, &quot;mocha&quot;: &quot;^4.1.0&quot;, &quot;webpack&quot;: &quot;^3.10.0&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-string">"devDependencies"</span>: { <span class="hljs-string">"babel-core"</span>: <span class="hljs-string">"^6.26.0"</span>, <span class="hljs-string">"babel-loader"</span>: <span class="hljs-string">"^7.1.2"</span>, <span class="hljs-string">"babel-plugin-istanbul"</span>: <span class="hljs-string">"^4.1.5"</span>, <span class="hljs-string">"babel-preset-es2015"</span>: <span class="hljs-string">"^6.24.1"</span>, <span class="hljs-string">"chai"</span>: <span class="hljs-string">"^4.1.2"</span>, <span class="hljs-string">"istanbul"</span>: <span class="hljs-string">"^0.4.5"</span>, <span class="hljs-string">"karma"</span>: <span class="hljs-string">"^2.0.0"</span>, <span class="hljs-string">"karma-chai"</span>: <span class="hljs-string">"^0.1.0"</span>, <span class="hljs-string">"karma-coverage"</span>: <span class="hljs-string">"^1.1.1"</span>, <span class="hljs-string">"karma-mocha"</span>: <span class="hljs-string">"^1.3.0"</span>, <span class="hljs-string">"karma-phantomjs-launcher"</span>: <span class="hljs-string">"^1.0.4"</span>, <span class="hljs-string">"karma-webpack"</span>: <span class="hljs-string">"^2.0.9"</span>, <span class="hljs-string">"mocha"</span>: <span class="hljs-string">"^4.1.0"</span>, <span class="hljs-string">"webpack"</span>: <span class="hljs-string">"^3.10.0"</span> }</code></pre> <p>执行npm run dev显示如图所示</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013470497?w=1130&amp;h=954" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h3 id="articleHeader6">travisCI及cover<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a>s</h3> <p>travisCI的配置这里不做详解,我们将通过代码测试覆盖率上传到cover<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a>s获取一个co<a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a>age的icon。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000013470498?w=103&amp;h=25" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="2018-01-11 6 29 18" title="2018-01-11 6 29 18" style="cursor: pointer;"></span></p> <p>如果你是服务端代码使用istanbul计算代码覆盖率的</p> <ul> <li>.travis.yml</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="language: node_js node_js: - 'stable' - 8 branches: only: - master install: - npm install script: - npm test after_script: &quot;npm install coveralls &amp;&amp; cat ./coverage/lcov.info | coveralls&quot;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">language:</span> node_js <span class="hljs-string">node_js:</span> - <span class="hljs-string">'stable'</span> - <span class="hljs-number">8</span> <span class="hljs-string">branches:</span> <span class="hljs-symbol"> only:</span> - master <span class="hljs-string">install:</span> - npm install <span class="hljs-string">script:</span> - npm test <span class="hljs-string">after_script:</span> <span class="hljs-string">"npm install coveralls &amp;&amp; cat ./coverage/lcov.info | coveralls"</span></code></pre> <p>如果你是服务端代码使用karma计算代码覆盖率的,则需使用coveralls模块</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install coveralls karma-coveralls --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> coveralls karma-coveralls <span class="hljs-comment">--save-dev</span></code></pre> <ul> <li>Karma.conf.js</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// Karma configuration module.exports = function(config) { config.set({ basePath: '', frameworks: ['mocha', 'chai'], files: [ 'test/*.js' ], exclude: [], preprocessors: { 'test/*.js': ['webpack'], 'index.js': ['coverage'] }, reporters: ['progress', 'coverage', 'coveralls'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['PhantomJS'], singleRun: true, concurrency: Infinity, webpack: { module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { &quot;presets&quot;: [&quot;es2015&quot;], &quot;plugins&quot;: [[&quot;istanbul&quot;], [&quot;transform-runtime&quot;]] } } } ] } }, coverageReporter: { type : 'lcov', dir : 'coverage/' }, plugins: [ 'karma-webpack', 'karma-phantomjs-launcher', 'karma-coverage', 'karma-mocha', 'karma-chai', 'karma-coveralls' ], }) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">// Karma configuration</span> <span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">config</span>) </span>{ config.set({ basePath: <span class="hljs-string">''</span>, frameworks: [<span class="hljs-string">'mocha'</span>, <span class="hljs-string">'chai'</span>], files: [ <span class="hljs-string">'test/*.js'</span> ], exclude: [], preprocessors: { <span class="hljs-string">'test/*.js'</span>: [<span class="hljs-string">'webpack'</span>], <span class="hljs-string">'index.js'</span>: [<span class="hljs-string">'coverage'</span>] }, reporters: [<span class="hljs-string">'progress'</span>, <span class="hljs-string">'coverage'</span>, <span class="hljs-string">'coveralls'</span>], port: <span class="hljs-number">9876</span>, colors: <span class="hljs-literal">true</span>, logLevel: config.LOG_INFO, autoWatch: <span class="hljs-literal">true</span>, browsers: [<span class="hljs-string">'PhantomJS'</span>], singleRun: <span class="hljs-literal">true</span>, concurrency: <span class="hljs-literal">Infinity</span>, webpack: { <span class="hljs-keyword">module</span>: { rules: [ { test: <span class="hljs-regexp">/.js$/</span>, exclude: <span class="hljs-regexp">/node_modules/</span>, use: { loader: <span class="hljs-string">'babel-loader'</span>, options: { <span class="hljs-string">"presets"</span>: [<span class="hljs-string">"es2015"</span>], <span class="hljs-string">"plugins"</span>: [[<span class="hljs-string">"istanbul"</span>], [<span class="hljs-string">"trans<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a>-runtime"</span>]] } } } ] } }, coverageReporter: { <span class="hljs-keyword">type</span> : <span class="hljs-string">'lcov'</span>, dir : <span class="hljs-string">'coverage/'</span> }, plugins: [ <span class="hljs-string">'karma-webpack'</span>, <span class="hljs-string">'karma-phantomjs-launcher'</span>, <span class="hljs-string">'karma-coverage'</span>, <span class="hljs-string">'karma-mocha'</span>, <span class="hljs-string">'karma-chai'</span>, <span class="hljs-string">'karma-coveralls'</span> ], }) }</code></pre> <p>plugins添加karma-coveralls,reporters添加coveralls,coverageReporter输出配置改为lcov。</p> <p>可以参考我自己实现的一个<a href="https://github.com/PLDaily/show-toast" rel="nofollow noreferrer" target="_blank">show-toast</a>库</p> <h3 id="articleHeader7">参考</h3> <p><a href="https://github.com/tmallfe/tmallfe.github.io/issues/37" rel="nofollow noreferrer" target="_blank">https://github.com/tmallfe/tm...</a><br /><a href="https://codeutopia.net/blog/2015/03/01/unit-testing-tdd-and-bdd/" rel="nofollow noreferrer" target="_blank">https://codeutopia.net/blog/2...</a><br /><a href="https://github.com/jdavis/tdd-vs-bdd" rel="nofollow noreferrer" target="_blank">https://github.com/jdavis/tdd...</a><br /><a href="https://jasmine.github.io/" rel="nofollow noreferrer" target="_blank">https://jasmine.github.io/</a><br /><a href="https://github.com/bbraithwaite/karma-seed" rel="nofollow noreferrer" target="_blank">https://github.com/bbraithwai...</a><br /><a href="https://mochajs.org/" rel="nofollow noreferrer" target="_blank">https://mochajs.org/</a><br /><a href="https://toutiao.io/posts/564973/app_preview" rel="nofollow noreferrer" target="_blank">https://toutiao.io/posts/5649...</a><br /><a href="https://coveralls.io/" rel="nofollow noreferrer" target="_blank">https://coveralls.io/</a><br /><a href="https://karma-runner.github.io/0.13/index.html" rel="nofollow noreferrer" target="_blank">https://karma-runner.github.i...</a><br /><a href="https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md" rel="nofollow noreferrer" target="_blank">https://github.com/karma-runn...</a><br /><a href="https://shouldjs.github.io/" rel="nofollow noreferrer" target="_blank">https://shouldjs.github.io/</a><br /><a href="https://juejin.im/post/59807358518825563e037e3c" rel="nofollow noreferrer" target="_blank">https://juejin.im/post/598073...</a><br /><a href="http://www.bradoncode.com/blog/2015/02/27/karma-tutorial/" rel="nofollow noreferrer" target="_blank">http://www.bradoncode.com/blo...</a><br /><a href="http://docs.casperjs.org/en/latest/quickstart.html" rel="nofollow noreferrer" target="_blank">http://docs.casperjs.org/en/l...</a><br /><a href="https://github.com/gotwarlost/istanbul" rel="nofollow noreferrer" target="_blank">https://github.com/gotwarlost...</a><br /><a href="https://www.jianshu.com/p/ffd6d319f05b" rel="nofollow noreferrer" target="_blank">https://www.jianshu.com/p/ffd...</a><br /><a href="http://www.bijishequ.com/detail/436708" rel="nofollow noreferrer" target="_blank">http://www.bijishequ.com/deta...</a><br /><a href="http://phantomjs.org/" rel="nofollow noreferrer" target="_blank">http://phantomjs.org/</a><br /><a href="https://github.com/CurtisHumphrey/es6-library-boilerplate" rel="nofollow noreferrer" target="_blank">https://github.com/CurtisHump...</a><br /><a href="http://www.jackpu.com/shi-yong-babel-jspm-karma-jasmine-istanbul-shi-xian-es6-ce-shi-fu-gai-lu/" rel="nofollow noreferrer" target="_blank">http://www.jackpu.com/shi-yon...</a><br /><a href="https://github.com/JackPu/JavaScript-Algorithm-Learning" rel="nofollow noreferrer" target="_blank">https://github.com/JackPu/Jav...</a><br /><a href="https://github.com/caitp/karma-coveralls" rel="nofollow noreferrer" target="_blank">https://github.com/caitp/karm...</a><br /><a href="https://github.com/karma-runner/karma-coverage" rel="nofollow noreferrer" target="_blank">https://github.com/karma-runn...</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

前端单元测试

全部内容,希望文章能够帮你解决

前端单元测试

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过