Svelteでユニットテスト - Svelte不定期連載-02

yarn add vitest jsdom @testing-library/svelte @types/jest

import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  // ここから下を追加
  test: {
    // testの対象ファイル
    include: ['src/**/*.{test,spec}.{js,ts}'],
    globals: true,
    // testの環境
    environment: 'jsdom'
  }
};

export default config;

"test": "vitest"

<script lang="ts">
  let count:number = 0;
</script>

<!-- 減算するボタン -->
<button on:click={() => (count -= 1)} aria-label="減算">-</button>  
<!-- 定義したcount変数 -->
{count}
<!-- 加算するボタン -->
<button on:click={() => (count += 1)} aria-label="加算">+</button>

import { render, fireEvent, screen } from '@testing-library/svelte';
// $lib はsrc/libのエイリアス
import Counter from '$lib/components/Counter.svelte';

describe('Counter.svelte', async () => {
　// 初期値
  test('カウンターの初期値は0', async () => {
    render(Counter);
    expect(screen.getByText('0')).toBeTruthy();
  });
  test('減算処理', async () => {
    render(Counter);
    // ボタンを定義
    const decreaseButton = screen.getByLabelText('減算');
    // イベントを定義    
    await fireEvent.click(decreaseButton);
    const counter = await screen.findByText('-1');
    expect(counter).toBeTruthy();
  });
  test('加算処理', async () => {
    render(Counter);
    const increaseButton = screen.getByLabelText('加算');
    await fireEvent.click(increaseButton);
    const counter = await screen.findByText('1');
    expect(counter).toBeTruthy();
  });
});

  test('カウンターの初期値は0', async () => {
    render(Counter);
    expect(screen.getByText('0')).toBeTruthy();
  });

  test('減算処理', async () => {
    render(Counter);
    // ボタンを定義
    const decreaseButton = screen.getByLabelText('減算');
    // fireEventでイベントを定義
    await fireEvent.click(decreaseButton);
    // 
    const counter = await screen.findByText('-1');
    expect(counter).toBeTruthy();
  });

<script lang="ts">
  // 0 => 1
  let count:number = 1;
</script>

<!-- 減算するボタン -->
<button on:click={() => (count -= 1)} aria-label="減算">-</button>  
<!-- 定義したcount変数 -->
{count}
<!-- 加算するボタン -->
<button on:click={() => (count += 1)} aria-label="加算">+</button>