feat: add CONTRIBUTING.md document. efa51c0a06

This commit is contained in:
jaywcjlove
2022-09-28 18:41:02 +00:00
parent 821d0678cc
commit 15495f3dad
15 changed files with 672 additions and 238 deletions

View File

@ -21,7 +21,7 @@
<li>快照, 轻松编写持续追踪大型对象的测试,并在测试旁或代码内显示实时快照。</li>
<li>代码覆盖, 无需其他操作,您仅需添加 --coverage 参数来生成代码覆盖率报告。</li>
</ul>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>测试结构</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>测试结构</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'makePoniesPink'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token function">beforeAll</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token comment">/* 在所有测试之前运行 */</span>
@ -128,7 +128,7 @@
</span><span class="code-line line-number" line="13"> expect<span class="token punctuation">.</span><span class="token method function property-access">anything</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="14"><span class="token punctuation">]</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>模拟函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>模拟函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// const fn = jest.fn()</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// const fn = jest.fn().mockName('Unicorn') -- 命名为 mock, Jest 22+</span>
</span><span class="code-line line-number" line="3"><span class="token comment">// 函数被调用</span>
@ -248,7 +248,7 @@
<li><code>toThrowError</code><code>toThrow</code></li>
</ul>
</div></div></div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>异步测试</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>实例</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>实例</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<p>请参阅 Jest 文档中的 <a href="https://jestjs.io/docs/en/tutorial-async">更多示例</a></p>
<p>在异步测试中指定一些预期的断言是一个很好的做法,所以如果你的断言根本没有被调用,测试将会失败。</p>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
@ -271,7 +271,7 @@
</span><span class="code-line line-number" line="5"> <span class="token function">expect</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>done() 回调</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>done() 回调</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">done</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> expect<span class="token punctuation">.</span><span class="token method function property-access">assertions</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="3">
@ -300,7 +300,7 @@
</span></code></pre>
<p>从你的测试中 <em>返回</em> 一个 Promise</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>模拟</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>模拟函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>模拟函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'call the callback'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">const</span> callback <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="3"> <span class="token function">fn</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
@ -387,7 +387,7 @@
</span><span class="code-line line-number" line="6"> <span class="token punctuation">.</span><span class="token method function property-access">spyOn</span><span class="token punctuation">(</span><span class="token dom variable">location</span><span class="token punctuation">,</span> <span class="token string">'title'</span><span class="token punctuation">,</span> <span class="token string">'set'</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="7"> <span class="token punctuation">.</span><span class="token method function property-access">mockImplementation</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>定时器模拟</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3--><!--rehype:-->
</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>定时器模拟</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
<p>为使用本机计时器函数(<code>setTimeout</code><code>setInterval</code><code>clearTimeout</code><code>clearInterval</code>)的代码编写同步测试。</p>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 启用假计时器</span>
</span><span class="code-line line-number" line="2">jest<span class="token punctuation">.</span><span class="token method function property-access">useFakeTimers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
@ -425,7 +425,7 @@
</span><span class="code-line line-number" line="6"> <span class="token literal-property property">set</span><span class="token operator">:</span> setTitle<span class="token punctuation">,</span>
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>清除和恢复模拟</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>清除和恢复模拟</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<p>对于一个模拟</p>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 清除模拟使用日期</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// fn.mock.calls、fn.mock.instances</span>