mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-19 21:51:20 +08:00
feat: add styled-components.md cheatsheet. 2fcd80f34d
This commit is contained in:
jaywcjlove
186
docs/jest.html
186
docs/jest.html
@ -150,6 +150,70 @@
|
||||
</span><span class="code-line"><span class="token function">expect</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toThrow</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toThrowErrorMatchingSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="快照"><a aria-hidden="true" tabindex="-1" href="#快照"><span class="icon icon-link"></span></a>快照</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"><span class="token function">expect</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toMatchInlineSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="errors"><a aria-hidden="true" tabindex="-1" href="#errors"><span class="icon icon-link"></span></a>Errors</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"><span class="token function">expect</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toThrow</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toThrowErrorMatchingSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="objects"><a aria-hidden="true" tabindex="-1" href="#objects"><span class="icon icon-link"></span></a>Objects</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"><span class="token function">expect</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBeInstanceOf</span><span class="token punctuation">(</span><span class="token maybe-class-name">Class</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toMatchObject</span><span class="token punctuation">(</span>object<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toHaveProperty</span><span class="token punctuation">(</span>keyPath<span class="token punctuation">,</span> value<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="objects-1"><a aria-hidden="true" tabindex="-1" href="#objects-1"><span class="icon icon-link"></span></a>Objects</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"><span class="token function">expect</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toContain</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toContainEqual</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toHaveLength</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="numbers"><a aria-hidden="true" tabindex="-1" href="#numbers"><span class="icon icon-link"></span></a>Numbers</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"><span class="token function">expect</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBeCloseTo</span><span class="token punctuation">(</span>number<span class="token punctuation">,</span> numDigits<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBeGreaterThan</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBeGreaterThanOrEqual</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBeLessThan</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBeLessThanOrEqual</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="booleans"><a aria-hidden="true" tabindex="-1" href="#booleans"><span class="icon icon-link"></span></a>Booleans</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"><span class="token function">expect</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBeFalsy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBeNull</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBeUndefined</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBeDefined</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="strings"><a aria-hidden="true" tabindex="-1" href="#strings"><span class="icon icon-link"></span></a>Strings</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"><span class="token function">expect</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toMatch</span><span class="token punctuation">(</span>regexpOrString<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="nan"><a aria-hidden="true" tabindex="-1" href="#nan"><span class="icon icon-link"></span></a>NaN</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"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'当值为 NaN 时通过'</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"> <span class="token function">expect</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBeNaN</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">not</span><span class="token punctuation">.</span><span class="token method function property-access">toBeNaN</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="others"><a aria-hidden="true" tabindex="-1" href="#others"><span class="icon icon-link"></span></a>Others</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">expect<span class="token punctuation">.</span><span class="token method function property-access">extend</span><span class="token punctuation">(</span>matchers<span class="token punctuation">)</span>
|
||||
</span><span class="code-line">expect<span class="token punctuation">.</span><span class="token method function property-access">any</span><span class="token punctuation">(</span>constructor<span class="token punctuation">)</span>
|
||||
</span><span class="code-line">expect<span class="token punctuation">.</span><span class="token method function property-access">addSnapshotSerializer</span><span class="token punctuation">(</span>serializer<span class="token punctuation">)</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line">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></code></pre>
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="匹配器"><a aria-hidden="true" tabindex="-1" href="#匹配器"><span class="icon icon-link"></span></a>匹配器</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="基本匹配器"><a aria-hidden="true" tabindex="-1" href="#基本匹配器"><span class="icon icon-link"></span></a>基本匹配器</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token number">42</span><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 number">42</span><span class="token punctuation">)</span> <span class="token comment">// 严格相等 (===)</span>
|
||||
@ -291,7 +355,7 @@
|
||||
</span><span class="code-line"><span class="token comment">// 匹配除 null 或 undefined 之外的任何内容</span>
|
||||
</span><span class="code-line"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token string">'pizza'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span>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></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="快照"><a aria-hidden="true" tabindex="-1" href="#快照"><span class="icon icon-link"></span></a>快照</h3><div class="wrap-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="快照-1"><a aria-hidden="true" tabindex="-1" href="#快照-1"><span class="icon icon-link"></span></a>快照</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// 这可确保某个值与最近的快照匹配。</span>
|
||||
</span><span class="code-line"><span class="token function">expect</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line">
|
||||
@ -360,7 +424,6 @@
|
||||
</div></div></div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="异步测试"><a aria-hidden="true" tabindex="-1" href="#异步测试"><span class="icon icon-link"></span></a>异步测试</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="实例"><a aria-hidden="true" tabindex="-1" href="#实例"><span class="icon icon-link"></span></a>实例</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"><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>
|
||||
</span><span class="code-line"> <span class="token comment">// 在测试期间恰好调用了三个断言</span>
|
||||
@ -373,7 +436,8 @@
|
||||
<p>请注意，您也可以在任何 <code>describe</code> 和 <code>test</code> 之外对每个文件执行此操作：</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token function">beforeEach</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token property-access">hasAssertions</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>这将验证每个测试用例至少存在一个断言。 它还可以与更具体的 <code>expect.assertions(3)</code> 声明配合使用。</p>
|
||||
<p>这将验证每个测试用例至少存在一个断言。 它还可以与更具体的 <code>expect.assertions(3)</code> 声明配合使用。
|
||||
请参阅 Jest 文档中的 <a href="https://jestjs.io/docs/en/tutorial-async">更多示例</a></p>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="asyncawait"><a aria-hidden="true" tabindex="-1" href="#asyncawait"><span class="icon icon-link"></span></a>async/await</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><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 keyword">async</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"> 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>
|
||||
@ -391,8 +455,8 @@
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"> <span class="token function">setTimeout</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"> <span class="token keyword control-flow">try</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token function">getAsyncOperationResult</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <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"> <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token function">getAsyncOperatResult</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>res<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"> <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword control-flow">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> done<span class="token punctuation">.</span><span class="token method function property-access">fail</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
|
||||
@ -414,19 +478,29 @@
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="模拟"><a aria-hidden="true" tabindex="-1" href="#模拟"><span class="icon icon-link"></span></a>模拟</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="模拟函数-1"><a aria-hidden="true" tabindex="-1" href="#模拟函数-1"><span class="icon icon-link"></span></a>模拟函数</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"><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>
|
||||
<pre class="wrap-text "><code class="language-js code-highlight"><span class="code-line"><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"> <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"> <span class="token function">fn</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBeCalled</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>callback<span class="token punctuation">.</span><span class="token property-access">mock</span><span class="token punctuation">.</span><span class="token property-access">calls</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">baz</span><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 string">'pizza'</span><span class="token punctuation">)</span> <span class="token comment">// 第一次调用的第二个参数</span>
|
||||
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>callback<span class="token punctuation">.</span><span class="token property-access">mock</span><span class="token punctuation">.</span><span class="token property-access">calls</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">baz</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token string">'pizza'</span><span class="token punctuation">)</span> <span class="token comment">// 第一次调用的第二个参数</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"> <span class="token comment">// 匹配第一个和最后一个参数，但忽略第二个参数</span>
|
||||
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toHaveBeenLastCalledWith</span><span class="token punctuation">(</span><span class="token string">'meal'</span><span class="token punctuation">,</span> 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 class="token string">'margarita'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toHaveBeenLastCalledWith</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token string">'meal'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> 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"> <span class="token string">'margarita'</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<!--rehype:className=wrap-text -->
|
||||
<p>您还可以使用快照：</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><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"> <span class="token comment">// mockName 在 Jest 22+ 中可用</span>
|
||||
</span><span class="code-line"> <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 class="token punctuation">.</span><span class="token method function property-access">mockName</span><span class="token punctuation">(</span><span class="token string">'Unicorn'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <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"> <span class="token punctuation">.</span><span class="token method function property-access">mockName</span><span class="token punctuation">(</span><span class="token string">'Unicorn'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"> <span class="token function">fn</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token comment">// -></span>
|
||||
@ -444,36 +518,46 @@
|
||||
<p>您的模拟可以返回值：</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> callback
|
||||
</span><span class="code-line"> <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 class="token punctuation">.</span><span class="token method function property-access">mockReturnValue</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token keyword">const</span> callbackOnce
|
||||
</span><span class="code-line"> <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 class="token punctuation">.</span><span class="token method function property-access">mockReturnValueOnce</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>或解析值：</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> promise
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> promise
|
||||
</span><span class="code-line"> <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 class="token punctuation">.</span><span class="token method function property-access">mockResolvedValue</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token keyword">const</span> promiseOnce
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token keyword">const</span> promiseOnce
|
||||
</span><span class="code-line"> <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 class="token punctuation">.</span><span class="token method function property-access">mockResolvedValueOnce</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>他们甚至可以拒绝值：</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> failedPromise
|
||||
</span><span class="code-line"> <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 class="token punctuation">.</span><span class="token method function property-access">mockRejectedValue</span><span class="token punctuation">(</span><span class="token string">'Error'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token keyword">const</span> failedPromiseOnce
|
||||
</span><span class="code-line"> <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 class="token punctuation">.</span><span class="token method function property-access">mockRejectedValueOnce</span><span class="token punctuation">(</span><span class="token string">'Error'</span><span class="token punctuation">)</span>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> failedPromise <span class="token operator">=</span>
|
||||
</span><span class="code-line"> 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 class="token punctuation">.</span><span class="token method function property-access">mockRejectedValue</span><span class="token punctuation">(</span><span class="token string">'Error'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token keyword">const</span> failedPromiseOnce <span class="token operator">=</span>
|
||||
</span><span class="code-line"> 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 class="token punctuation">.</span><span class="token method function property-access">mockRejectedValueOnce</span><span class="token punctuation">(</span><span class="token string">'Error'</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>你甚至可以结合这些：</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> callback
|
||||
</span><span class="code-line"> <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 class="token punctuation">.</span><span class="token method function property-access">mockReturnValueOnce</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">mockReturnValue</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><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"> <span class="token punctuation">.</span><span class="token method function property-access">mockReturnValueOnce</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">mockReturnValue</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token comment">// -></span>
|
||||
</span><span class="code-line"><span class="token comment">// call 1: false</span>
|
||||
</span><span class="code-line"><span class="token comment">// call 2+: true</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="使用-jestmock-方法模拟模块"><a aria-hidden="true" tabindex="-1" href="#使用-jestmock-方法模拟模块"><span class="icon icon-link"></span></a>使用 <code>jest.mock</code> 方法模拟模块</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">jest<span class="token punctuation">.</span><span class="token method function property-access">mock</span><span class="token punctuation">(</span><span class="token string">'lodash/memoize'</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 parameter">a</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a<span class="token punctuation">)</span> <span class="token comment">// The original lodash/memoize should exist</span>
|
||||
</span><span class="code-line">jest<span class="token punctuation">.</span><span class="token method function property-access">mock</span><span class="token punctuation">(</span><span class="token string">'lodash/memoize'</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 parameter">a</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">virtual</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// The original lodash/memoize isn’t required</span>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// 原来的 lodash/memoize 应该存在</span>
|
||||
</span><span class="code-line">jest<span class="token punctuation">.</span><span class="token method function property-access">mock</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token string">'lodash/memoize'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a
|
||||
</span><span class="code-line"><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token comment">// 不需要原始的 lodash/memoize</span>
|
||||
</span><span class="code-line">jest<span class="token punctuation">.</span><span class="token method function property-access">mock</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token string">'lodash/memoize'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a<span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">virtual</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p><a href="https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options">jest.mock docs</a></p>
|
||||
<blockquote>
|
||||
<p>注意：当使用 <code>babel-jest</code> 时，对 <code>jest.mock</code> 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 <code>jest.doMock</code>。</p>
|
||||
</blockquote>
|
||||
<p>注意：当使用 <code>babel-jest</code> 时，对 <a href="https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options"><code>jest.mock</code></a> 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 <code>jest.doMock</code>。</p>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="使用模拟文件模拟模块"><a aria-hidden="true" tabindex="-1" href="#使用模拟文件模拟模块"><span class="icon icon-link"></span></a>使用模拟文件模拟模块</h3><div class="wrap-body">
|
||||
<p>创建一个类似 <code>__mocks__/lodash/memoize.js</code> 的文件：</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">module<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a
|
||||
@ -481,16 +565,15 @@
|
||||
<p>添加到您的测试中：</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">jest<span class="token punctuation">.</span><span class="token method function property-access">mock</span><span class="token punctuation">(</span><span class="token string">'lodash/memoize'</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>注意：当使用 <code>babel-jest</code> 时，对 <code>jest.mock</code> 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 <code>jest.doMock</code>。</p>
|
||||
<p><a href="https://jestjs.io/docs/en/manual-mocks">手动模拟文档</a></p>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="模拟对象方法"><a aria-hidden="true" tabindex="-1" href="#模拟对象方法"><span class="icon icon-link"></span></a>模拟对象方法</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> spy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">spyOn</span><span class="token punctuation">(</span>console<span class="token punctuation">,</span> <span class="token string">'log'</span><span class="token punctuation">)</span><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><span class="code-line"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">.</span><span class="token property-access">mock</span><span class="token punctuation">.</span><span class="token property-access">calls</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'dope'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'nope'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line">spy<span class="token punctuation">.</span><span class="token method function property-access">mockRestore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> spy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">spyOn</span><span class="token punctuation">(</span>ajax<span class="token punctuation">,</span> <span class="token string">'request'</span><span class="token punctuation">)</span><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 known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">success</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token function">expect</span><span class="token punctuation">(</span>spy<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toHaveBeenCalled</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line">spy<span class="token punctuation">.</span><span class="token method function property-access">mockRestore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<p>注意：当使用 <code>babel-jest</code> 时，对 <code>jest.mock</code> 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 <code>jest.doMock</code>。<a href="https://jestjs.io/docs/en/manual-mocks">手动模拟文档</a></p>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="模拟-getters-和-setters"><a aria-hidden="true" tabindex="-1" href="#模拟-getters-和-setters"><span class="icon icon-link"></span></a>模拟 getters 和 setters</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> getTitle <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 class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token string">'pizza'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token keyword">const</span> setTitle <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"><span class="token keyword">const</span> <span class="token dom variable">location</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">defineProperty</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 punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">get</span><span class="token operator">:</span> getTitle<span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">set</span><span class="token operator">:</span> setTitle<span class="token punctuation">,</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="模拟-getter-和-setter-jest-2210"><a aria-hidden="true" tabindex="-1" href="#模拟-getter-和-setter-jest-2210"><span class="icon icon-link"></span></a>模拟 getter 和 setter (Jest 22.1.0+)</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token dom variable">location</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
@ -508,8 +591,9 @@
|
||||
</span><span class="code-line">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>
|
||||
</span><span class="code-line"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'kill the time'</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"> <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"> <span class="token comment">// 运行一些使用 setTimeout 或 setInterval 的代码</span>
|
||||
</span><span class="code-line"> <span class="token keyword">const</span> actual <span class="token operator">=</span> <span class="token function">someFunctionThatUseTimers</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token comment">// 运行使用 setTimeout或setInterval 的代码</span>
|
||||
</span><span class="code-line"> <span class="token keyword">const</span> actual
|
||||
</span><span class="code-line"> <span class="token operator">=</span> <span class="token function">someFunctionThatUseTimers</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token comment">// 快进直到所有定时器都执行完毕</span>
|
||||
</span><span class="code-line"> jest<span class="token punctuation">.</span><span class="token method function property-access">runAllTimers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token comment">// 同步检查结果</span>
|
||||
@ -521,24 +605,34 @@
|
||||
</span><span class="code-line">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>
|
||||
</span><span class="code-line"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'kill the time'</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"> <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"> <span class="token comment">// 运行一些使用 setTimeout 或 setInterval 的代码</span>
|
||||
</span><span class="code-line"> <span class="token keyword">const</span> actual <span class="token operator">=</span> <span class="token function">someFunctionThatUseTimers</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token comment">// 运行使用 setTimeout或setInterval 的代码</span>
|
||||
</span><span class="code-line"> <span class="token keyword">const</span> actual
|
||||
</span><span class="code-line"> <span class="token operator">=</span> <span class="token function">someFunctionThatUseTimers</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token comment">// 快进 250 毫秒</span>
|
||||
</span><span class="code-line"> jest<span class="token punctuation">.</span><span class="token method function property-access">advanceTimersByTime</span><span class="token punctuation">(</span><span class="token number">250</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token comment">// 同步检查结果</span>
|
||||
</span><span class="code-line"> <span class="token function">expect</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toHaveBeenCalledTimes</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<blockquote>
|
||||
<p>对于特殊情况，请使用 <a href="https://jestjs.io/docs/en/timer-mocks#run-pending-timers">jest.runOnlyPendingTimers()</a>。</p>
|
||||
</blockquote>
|
||||
<p><strong>注意：</strong> 您应该在测试用例中调用 <code>jest.useFakeTimers()</code> 以使用其他假计时器方法。</p>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="模拟-getters-和-setters"><a aria-hidden="true" tabindex="-1" href="#模拟-getters-和-setters"><span class="icon icon-link"></span></a>模拟 getters 和 setters</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> getTitle <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 class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token string">'pizza'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"><span class="token keyword">const</span> setTitle <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"><span class="token keyword">const</span> <span class="token dom variable">location</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">defineProperty</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 punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">get</span><span class="token operator">:</span> getTitle<span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">set</span><span class="token operator">:</span> setTitle<span class="token punctuation">,</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="模拟对象方法"><a aria-hidden="true" tabindex="-1" href="#模拟对象方法"><span class="icon icon-link"></span></a>模拟对象方法</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> spy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">spyOn</span><span class="token punctuation">(</span>console<span class="token punctuation">,</span> <span class="token string">'log'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <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><span class="code-line">
|
||||
</span><span class="code-line"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">.</span><span class="token property-access">mock</span><span class="token punctuation">.</span><span class="token property-access">calls</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'dope'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'nope'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line">spy<span class="token punctuation">.</span><span class="token method function property-access">mockRestore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> spy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">spyOn</span><span class="token punctuation">(</span>ajax<span class="token punctuation">,</span> <span class="token string">'request'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">mockImplementation</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">success</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token function">expect</span><span class="token punctuation">(</span>spy<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toHaveBeenCalled</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line">spy<span class="token punctuation">.</span><span class="token method function property-access">mockRestore</span><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 id="清除和恢复模拟"><a aria-hidden="true" tabindex="-1" href="#清除和恢复模拟"><span class="icon icon-link"></span></a>清除和恢复模拟</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
@ -546,8 +640,10 @@
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// 清除模拟使用日期</span>
|
||||
</span><span class="code-line"><span class="token comment">// （fn.mock.calls、fn.mock.instances）</span>
|
||||
</span><span class="code-line">fn<span class="token punctuation">.</span><span class="token method function property-access">mockClear</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token comment">// 清除并删除任何模拟的返回值或实现</span>
|
||||
</span><span class="code-line">fn<span class="token punctuation">.</span><span class="token method function property-access">mockReset</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token comment">// 重置并恢复初始实现</span>
|
||||
</span><span class="code-line">fn<span class="token punctuation">.</span><span class="token method function property-access">mockRestore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
|
||||
Reference in New Issue
Block a user