React + vitestでrenderするDOMの内容を確認したい時

Vitest React.js

前記事でvitestを色々試していた時に、renderしたdomの内容を確認したい状況が何回もありました。

前記事の内容をサンプルにすると、以下のように書けます。

// @vitest-environment happy-dom
import React from 'react';
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import { describe, expect, test, vi } from 'vitest';
import Title from '@/Components/Layout/Title';

describe('Screen Display', () => {
  test('Display `title - MyPage` title', async () => {
    const { debug } = render(<Title title="test" />, {
      container: document.head
    });
    debug(); // ここで表示
    expect(document.head.querySelector('title')?.innerHTML).toEqual(
      'test - MyPage'
    );
  });
});

これを実行すると、ターミナル上でDOMの内容が表示されます。

❯❯ npm run test

> test
> vitest run

~~~
<head>
  <title>
    test - MyPage
  </title>
</head>
~~~

というわけで、 render() の返り値として、 debug() を受け取り、それを実行するれば良かったという話でした。

testing-library.com