Svelte unit test - Irregular Svelte series-02

<p data-line="1" class="code-line">Hello (good evening), this is part 2 of the irregular Svelte series. Click here for the other articles:</p>
<ol data-line="3" class="code-line">
<li data-line="3" class="code-line"><a href="/posts/2022_09_06_svelte_newpost_en/">Insights from using SvelteKit + Svelte for a year</a></li>
<li data-line="4" class="code-line"><a href="/posts/Svelte-magazine-001-Svelte%E3%81%A8%E4%BB%96JS%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%A8%E3%81%AE%E6%AF%94%E8%BC%83-en/">Comparison of Svelte and other JS frameworks - Irregular Svelte series-01</a></li>
<li data-line="5" class="code-line"><a href="/posts/Svelte-magazine-002-Svelte%E3%81%A6%E3%82%99%E3%83%A6%E3%83%8B%E3%83%83%E3%83%88%E3%83%86%E3%82%B9%E3%83%88-en/">Svelte unit test - Irregular Svelte series 02</a></li>
<li data-line="6" class="code-line"><a href="/posts/Svelte-magazine-003-Svelte%E3%81%A7Storybook%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B-en/">Using Storybook with Svelte - Irregular Svelte Series 03</a></li>
<li data-line="7" class="code-line"><a href="/posts/Svelte-magazine-004-Astro%E3%81%A7Svelte%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F-en">Exploring Svelte in Astro - Irregular Svelte series 04</a></li>
<li data-line="8" class="code-line"><a href="/posts/Svelte-magazine-005-SvelteTips-en/">SvelteTips - Irregular Svelte series 05</a></li>
</ol>
<p data-line="10" class="code-line">Today, I will write about Svelte unit tests.</p>
<p data-line="12" class="code-line">You can get the module here.</p>
<p data-line="16" class="code-line">We will use three <strong>Vitest + jsdom + @testing-library/svelte</strong>.</p>
<p data-line="18" class="code-line"><strong>Vitest</strong> This is a testing framework that uses a tool called vite. It works very fast because it uses vite.</p>
<p data-line="20" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__301d61effc60e" src="https://embed.zenn.studio/card#zenn-embedded__301d61effc60e" data-content="https%3A%2F%2Fvitest.dev%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vitest.dev/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vitest.dev/</a></p>
<p data-line="22" class="code-line"><strong>jsdom</strong> This is a library that uses the DOM in Node.js. You can parse HTML and call web APIs.</p>
<p data-line="24" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8edfdb12dadd" src="https://embed.zenn.studio/card#zenn-embedded__8edfdb12dadd" data-content="https%3A%2F%2Fgithub.com%2Fjsdom%2Fjsdom" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/jsdom/jsdom" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/jsdom/jsdom</a></p>
<p data-line="26" class="code-line"><strong>@testing-library</strong> This is a test library that supports various frameworks. It supports Svelte, React, and Vue.</p>
<p data-line="28" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__564a6fd11114d" src="https://embed.zenn.studio/card#zenn-embedded__564a6fd11114d" data-content="https%3A%2F%2Ftesting-library.com%2Fdocs%2Fsvelte-testing-library%2Fintro%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://testing-library.com/docs/svelte-testing-library/intro/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://testing-library.com/docs/svelte-testing-library/intro/</a></p>
<h2 id="environment-settings" data-line="31" class="code-line"><a class="header-anchor-link" href="#environment-settings" aria-hidden="true"></a> Environment settings</h2>
<p data-line="33" class="code-line">First, add the modules below. *You can use whatever package manager you want. Here, I will use yarn.</p>
<div class="code-block-container"><pre><code class="code-line" data-line="35">yarn add vitest jsdom @testing-library/svelte @types/jest
</code></pre></div><p data-line="38" class="code-line">*Since we will use TS (TypeScript), add <strong>@types/jest</strong>, because we also want to add types to the test file. Of course, it is not necessary if it is written in TS.</p>
<h3 id="config" data-line="40" class="code-line"><a class="header-anchor-link" href="#config" aria-hidden="true"></a> config</h3>
<p data-line="41" class="code-line">Next, add a description for the test to vite.config.js.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">vite.config.js</span></div><pre class="language-js"><code class="language-js code-line" data-line="44"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> sveltekit <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@sveltejs/kit/vite'</span><span class="token punctuation">;</span>

<span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'vite'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>UserConfig<span class="token punctuation">}</span></span> /</span>
<span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">sveltekit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token comment">// Add the following from here</span>
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// Target file for test</span>
<span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'src/**/.{test,spec}.{js,ts}'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">globals</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token comment">// test environment</span>
<span class="token literal-property property">environment</span><span class="token operator">:</span> <span class="token string">'jsdom'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword module">export</span> <span class="token keyword module">default</span> config<span class="token punctuation">;</span>
</code></pre></div><p data-line="63" class="code-line">jsdom is configured in <code>environment</code>.</p>
<h3 id="package.json" data-line="67" class="code-line"><a class="header-anchor-link" href="#package.json" aria-hidden="true"></a> package.json</h3>
<p data-line="68" class="code-line">Add the following to package.json.</p>
<ul data-line="70" class="code-line">
<li data-line="70" class="code-line">You can run it with <strong>yarn vitest</strong> without writing.</li>
</ul>
<div class="code-block-container"><pre><code class="code-line" data-line="72">"test": "vitest"
</code></pre></div><p data-line="76" class="code-line">You are now ready to test.</p>
<h2 id="let's-test-it-out" data-line="79" class="code-line"><a class="header-anchor-link" href="#let's-test-it-out" aria-hidden="true"></a> Let's test it out</h2>
<p data-line="81" class="code-line">I'm going to write a test with a component that has a common add and subtract button.</p>
<h3 id="component-side" data-line="84" class="code-line"><a class="header-anchor-link" href="#component-side" aria-hidden="true"></a> Component side</h3>
<p data-line="86" class="code-line">First, prepare the components you want to test.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">src/lib/components/Counter.svelte</span></div><pre class="language-js"><code class="language-js code-line" data-line="89"><span class="token operator"><</span>script lang<span class="token operator">=</span><span class="token string">"ts"</span><span class="token operator">></span>
<span class="token keyword">let</span> <span class="token literal-property property">count</span><span class="token operator">:</span>number <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>

<span class="token operator"><</span><span class="token operator">!</span> <span class="token operator">--</span> <span class="token maybe-class-name">Subtract</span> button <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>button on<span class="token operator">:</span>click<span class="token operator">=</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>count <span class="token operator">-=</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span> aria<span class="token operator">-</span>label<span class="token operator">=</span><span class="token string">"Subtract"</span><span class="token operator">></span><span class="token operator">-</span><span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">!</span> <span class="token operator">--</span> defined count variable <span class="token operator">--</span><span class="token operator">></span>
<span class="token punctuation">{</span>count<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">!</span> <span class="token operator">--</span> <span class="token maybe-class-name">Add</span> button <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>button on<span class="token operator">:</span>click<span class="token operator">=</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>count <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span> aria<span class="token operator">-</span>label<span class="token operator">=</span><span class="token string">"Add"</span><span class="token operator">></span><span class="token operator">+</span><span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
</code></pre></div><p data-line="101" class="code-line">Since it is necessary to read addition and subtraction respectively in testing-library, for this article,we set aria-label. The components are created. The following simple components are drawn on the screen. Press the plus button to add, and the minus button to subtract.</p>
<p data-line="103" class="code-line">Complete figure <img src="/assets/blog/authors/YusukeIkeda/svelte_02/pic_components.png" alt="Test failed" /></p>
<h3 id="test" data-line="108" class="code-line"><a class="header-anchor-link" href="#test" aria-hidden="true"></a> Test</h3>
<p data-line="110" class="code-line">Now we are going to move to the unit test file. Depending on the number of components and personal preferences, I prefer to place them in the same hierarchy without having to move my gaze or the cursor back and forth.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">src/lib/Counter.test.ts</span></div><pre class="language-ts"><code class="language-ts code-line" data-line="112"><span class="token keyword">import</span> <span class="token punctuation">{</span> render<span class="token punctuation">,</span> fireEvent<span class="token punctuation">,</span> screen <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@testing-library/svelte'</span><span class="token punctuation">;</span>
<span class="token comment">// $lib is an src/lib alias</span>
<span class="token keyword">import</span> Counter <span class="token keyword">from</span> <span class="token string">'$lib/components/Counter.svelte'</span><span class="token punctuation">;</span>

<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'Counter.svelte'</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 operator">=></span> <span class="token punctuation">{</span>
　<span class="token comment">// Initial value</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'Initial counter value is 0'</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 operator">=></span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span>Counter<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">expect</span><span class="token punctuation">(</span>screen<span class="token punctuation">.</span><span class="token function">getByText</span><span class="token punctuation">(</span><span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'Subtraction process'</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 operator">=></span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span>Counter<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// define the button</span>
<span class="token keyword">const</span> decreaseButton <span class="token operator">=</span> screen<span class="token punctuation">.</span><span class="token function">getByLabelText</span><span class="token punctuation">(</span><span class="token string">'Subtract'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// define the event </span>
<span class="token keyword">await</span> fireEvent<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span>decreaseButton<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token keyword">await</span> screen<span class="token punctuation">.</span><span class="token function">findByText</span><span class="token punctuation">(</span><span class="token string">'-1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">expect</span><span class="token punctuation">(</span>counter<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'Addition process'</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 operator">=></span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span>Counter<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> increaseButton <span class="token operator">=</span> screen<span class="token punctuation">.</span><span class="token function">getByLabelText</span><span class="token punctuation">(</span><span class="token string">'Add'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">await</span> fireEvent<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span>increaseButton<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token keyword">await</span> screen<span class="token punctuation">.</span><span class="token function">findByText</span><span class="token punctuation">(</span><span class="token string">'1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">expect</span><span class="token punctuation">(</span>counter<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p data-line="142" class="code-line">Now, the test is ready.</p>
<p data-line="144" class="code-line">Let's break it down by test unit.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">test</span></div><pre class="language-js"><code class="language-js code-line" data-line="146"> <span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'Initial counter value is 0'</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 class="token function">render</span><span class="token punctuation">(</span><span class="token maybe-class-name">Counter</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">expect</span><span class="token punctuation">(</span>screen<span class="token punctuation">.</span><span class="token method function property-access">getByText</span><span class="token punctuation">(</span><span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><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 class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p data-line="153" class="code-line">Considering the test item <strong>Initial counter value is 0</strong>, we first render the <code>Counter</code> component which is called by <code>import Counter from '$lib/components/Counter.svelte';</code>. <strong>Then, we run a matcher called <code>toBeTruthy</code> to judge whether or not the <code>Counter</code> component has an initial value of 0.</strong></p>
<ul data-line="155" class="code-line">
<li data-line="155" class="code-line">Basically, a matcher is a function used to evaluate tests. See the Jest official website for more details. <a href="https://jestjs.io/ja/docs/using-matchers" target="_blank" rel="nofollow noopener noreferrer">Jest</a></li>
</ul>
<p data-line="157" class="code-line">Next, about testing the subtraction process. Both the addition process and subtraction process have the same logic, so I will only explain the subtraction process.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">test</span></div><pre class="language-js"><code class="language-js code-line" data-line="159"> <span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'Subtraction process'</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 class="token function">render</span><span class="token punctuation">(</span><span class="token maybe-class-name">Counter</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// define the button</span>
<span class="token keyword">const</span> decreaseButton <span class="token operator">=</span> screen<span class="token punctuation">.</span><span class="token method function property-access">getByLabelText</span><span class="token punctuation">(</span><span class="token string">'Subtract'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// define the event with fireEvent</span>
<span class="token keyword control-flow">await</span> fireEvent<span class="token punctuation">.</span><span class="token method function property-access">click</span><span class="token punctuation">(</span>decreaseButton<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// </span>
<span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token keyword control-flow">await</span> screen<span class="token punctuation">.</span><span class="token method function property-access">findByText</span><span class="token punctuation">(</span><span class="token string">'-1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">expect</span><span class="token punctuation">(</span>counter<span class="token punctuation">)</span><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 class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p data-line="172" class="code-line">The <strong>Subtraction process</strong> test is done as follows.</p>
<ul data-line="173" class="code-line">
<li data-line="173" class="code-line">Draw the component</li>
<li data-line="174" class="code-line">Define the button in the component</li>
<li data-line="175" class="code-line">Set click event</li>
<li data-line="176" class="code-line">Verify that the value decreased by 1</li>
</ul>
<p data-line="178" class="code-line">testing-library and async/await make testing easy, are easy to understand, and are highly compatible with Svelte.</p>
<p data-line="180" class="code-line">The addition process test is the same except for the value of <code>findByText</code>, so I will skip it.</p>
<h3 id="let's-run-it" data-line="183" class="code-line"><a class="header-anchor-link" href="#let's-run-it" aria-hidden="true"></a> Let's run it</h3>
<p data-line="185" class="code-line">Do the <strong>yarn test</strong></p>
<p data-line="187" class="code-line"><img src="/assets/blog/authors/YusukeIkeda/svelte_02/pic_success.png" alt="Test pass" /></p>
<p data-line="190" class="code-line">When it passes like this, a green message saying that it passed is output to the console.</p>
<p data-line="192" class="code-line">Let's see what happens if it fails the test.</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">src/lib/components/Counter.svelte</span></div><pre class="language-js"><code class="language-js code-line" data-line="194"><span class="token operator"><</span>script lang<span class="token operator">=</span><span class="token string">"ts"</span><span class="token operator">></span>
<span class="token comment">// 0 => 1</span>
<span class="token keyword">let</span> <span class="token literal-property property">count</span><span class="token operator">:</span>number <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>

<span class="token operator"><</span><span class="token operator">!</span> <span class="token operator">--</span> <span class="token maybe-class-name">Subtract</span> button <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>button on<span class="token operator">:</span>click<span class="token operator">=</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>count <span class="token operator">-=</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span> aria<span class="token operator">-</span>label<span class="token operator">=</span><span class="token string">"Subtract"</span><span class="token operator">></span><span class="token operator">-</span><span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">!</span> <span class="token operator">--</span> defined count variable <span class="token operator">--</span><span class="token operator">></span>
<span class="token punctuation">{</span>count<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">!</span> <span class="token operator">--</span> <span class="token maybe-class-name">Add</span> button <span class="token operator">--</span><span class="token operator">></span>
<span class="token operator"><</span>button on<span class="token operator">:</span>click<span class="token operator">=</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>count <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span> aria<span class="token operator">-</span>label<span class="token operator">=</span><span class="token string">"Add"</span><span class="token operator">></span><span class="token operator">+</span><span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
</code></pre></div><p data-line="208" class="code-line">In the test file, the initial value is assumed to be <code>0</code>, so if the value <code>1</code> is set, there will be an error. If there is a mistake, an error is also output as follows. <img src="/assets/blog/authors/YusukeIkeda/svelte_02/pic_error.png" alt="Test failed" /></p>
<p data-line="210" class="code-line">Also, the details of the error are as follows. There is an error message such as, "The counter component is expected to have an initial value of 0." <img src="/assets/blog/authors/YusukeIkeda/svelte_02/pic_error_02.png" alt="Test failed" /></p>
<p data-line="212" class="code-line">It's simple. You have completed the unit test. It is useful since both the configuration file and the test execution file require less description.</p>
<p data-line="215" class="code-line">That is all for Svelte unit tests.</p>
<p data-line="217" class="code-line">Next time, I will talk about <strong>Storybook with SvelteKit</strong>.

Look forward to next time!</p>