Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vitestの紹介

Yohei Iino
February 19, 2023

 Vitestの紹介

Vitestの紹介

Yohei Iino

February 19, 2023
Tweet

More Decks by Yohei Iino

Other Decks in Programming

Transcript

  1. Vitest を導入してみる② コードは以下みたいな感じで書ける。 import { describe, it, expect } from

    'vitest' import { add } from "./calc" describe('suite', () => { it('concurrent test 1', async () => { const r = add(1, 2); expect(r).toEqual(3) }) })
  2. Vitest を導入してみる③ コンポーネントのテストなら以下みたいな感じ。 import { describe, expect, it } from

    "vitest"; import { render, screen } from "@testing-library/react"; import Demo from "./Demo"; describe("Demo", () => { it(" タイトルに、「デモ」が表示さてている", () => { const props = { title: " デモ" }; render(<Demo {...props} />); expect(screen.getByText(/ デモ/i)).toBeTruthy(); }); });
  3. Vitest を導入してみる④ テストの実行以下のコマンドでOK 👌。 デフォルトでwatch モードで起動。 $ vitest $ vitest

    DEV v0.27.1 ./demo ✓ src/lib/calc.ts (2) ✓ src/components/organisms/Demo.test.tsx (1) Test Files 2 passed (2) Tests 2 passed (2) Start at 23:12:20 Duration 3.25s (transform 1.06s, setup 712ms, collect 725ms, tests 70ms)
  4. In-source testing 好みは別れるが、Rust みたいにコード上にテストコードを書くこともできる。 In-source testing | Guide | Vitest

    // the implementation export function add(...args: number[]) { return args.reduce((a, b) => a + b, 0) } // in-source test suites if (import.meta.vitest) { const { it, expect } = import.meta.vitest it('add', () => { expect(add()).toBe(0) expect(add(1)).toBe(1) expect(add(1, 2, 3)).toBe(6) }) }