Vitestでjest-domを使う

VitestでUIのtestを書く時に@testing-library/jest-domを使うと便利

名前にjestと付いているせいで、vitestでは使えないんか？という気持ちになるmrsekut.icon

実際は使える

各.test.tsに以下のように書くことでVitestのMatcherを拡張できる

code:hoge.test.ts

import matchers from '@testing-library/jest-dom/matchers';

import { expect } from 'vitest';

expect.extend(matchers);

各.test.tsに書くのはだるいのでglobalに設定する

適当なsetupファイルを作成

code:testSetup.ts

import { expect } from 'vitest';

import matchers from '@testing-library/jest-dom/matchers';

expect.extend(matchers);

code:vitest.config.ts

import { defineConfig } from 'vitest/config';

export default defineConfig({

test: {

setupFiles: './src/utils/testSetup.ts',

});