Tiptapエディターのテスト戦略：Playwright、Vitest Browser Mode、Editorインスタンスを用いたテスト

import {describe, it, expect} from 'vitest';
import {userEvent} from '@vitest/browser/context';
import {StarterKit} from '@tiptap/starter-kit';
import {type Editor} from '@tiptap/core';
import {renderTiptapEditor} from 'path/to/render-tiptap-editor';
import {LinkExtension} from '/path/to/LinkExtension';

... 
 
  it('URLを入力後半角スペースを入れることで自動でリンク化すること', async () => {
    const extensions = [StarterKit, LinkExtension];
    
    function setUpEditor(editor: Editor) {
      /** エディターにフォーカスを当てる */
      editor.chain().focus().run();
    }

    const {getByRole} = await renderTiptapEditor({
      extensions,
      content: '',
      setUpEditor,
    });

    // テキストの入力
    await userEvent.keyboard('https://example.com');
    // 半角スペースを入力
    await userEvent.keyboard('{Space}');

    // URLがリンクになっていること
    expect(getByRole('link', {name: 'https://example.com'})).toBeVisible();
  });
  
  ...

export const LinkExtension = Link.extend({
  addKeyboardShortcuts() {
    return {
      Space({editor}) {
        ....
  ...

/*
  renderTiptapEditor はエディターを任意のコンテンツとExtensionで
  初期化してブラウザ上に展開します。
  エディターの初期化はTiptapのuseEditor、
  ブラウザ上への展開は@testing-library/reactのrenderで行います。
*/
export async function renderTiptapEditor({
  content,
  extensions,
  setUpEditor,
}: RenderTiptapEditor) {
  const waitForEditorSetupComplete = vi.fn();

  const editorOperation = (editor: Editor) => {
    setUpEditor(editor);
    waitForEditorSetupComplete();
  };

  const renderResult = render(
    <TiptapEditor
      content={content}
      extensions={extensions}
      setUpEditor={editorOperation}
    />,
  );

  /* 
	render 実行後、editorのカーソル操作などを行う setUpEditor の実行完了を待ちます。
	これは setUpEditor でエディター初期化後にテストのためにエディター上で
	行いたい動作を行うまで待っています。
	具体例は後述しますが、初期化時に特定のポジションにカーソルを合わせる時などに使用します。
   */
  await waitFor(() => {
    expect(waitForEditorSetupComplete).toHaveBeenCalled();
  });
　　
　/* render の実行結果である renderResult をそのまま返します。*/
  return renderResult;
}

function TiptapEditor({content, extensions, setUpEditor}: RenderTiptapEditor) {
  const editor = useEditor({
    extensions,
    content,
    onCreate({editor}) {
      setUpEditor(editor);
    },
  });

  if (editor === null) {
    return null;
  }

  return <EditorContent editor={editor} id='editor' />;
}

/*
  renderTiptapEditor は @testing-library/react の render の実行結果が
  そのまま返ってくるためReactコンポーネントのテストを行う時と同じように
  エディター上の要素を取得しアサートできます。
*/

...
 
  it('URLを入力後半角スペースを入れることで自動でリンク化すること', async () => {
    /*
	  extensions には StarterKit とテスト対象の Extension を配列で構成します。
	  StarterKit は DocumentExtension や ParagraphExtension など他機能のベースとなる
	  基本的な機能を提供しますが、どの Extension のテストでも大体必要になるため
	  テスト対象のExtensionと同時に構成しています。
    */
    const extensions = [StarterKit, LinkExtension];
    
    /*
      setUpEditor はコールバック関数の引数としてテスト用に初期化したエディターインスタンスを
      受け取れるため、インスタンスのメソッドを使用して初期化後のエディターに対して
      テスト実行前に何かしら操作を行えます。
      このテストではエディターにテキストを入力するためにテキスト入力前にエディターにフォーカスを
      当てるようにしています。
    */
    function setUpEditor(editor: Editor) {
      /** エディターにフォーカスを当てる */
      editor.chain().focus().run();
    }

    const {getByRole} = await renderTiptapEditor({
      extensions,
      content: '',
      setUpEditor,
    });

    // テキストの入力
    await userEvent.keyboard('https://example.com');
    // 半角スペースを入力
    await userEvent.keyboard('{Space}');

    // URLがリンクになっていること
    expect(getByRole('link', {name: 'https://example.com'})).toBeVisible();
  });
  
  ...

  test('詳細を見るボタン: エディター上でURLが編集できること', async () => {
    /* ボタン機能をテストするためボタン機能を処理する PressReleaseButtonExtension を指定します */
    const extensions = [StarterKit, PressReleaseButtonExtension];
    
    function setUpEditor() {
      // 何もしない
    }

　　
    const {getByRole} = await renderTiptapEditor({
      extensions,
      /* 
	    ボタン挿入後のHTML構造を指定しています。このHTMLがTiptapにより読み込まれ、
	    PressReleaseButtonExtension によって処理されエディター上でボタン機能が有効になります。
	  */
      content: `<div class="pr-button"><a href="https://prtimes.jp/" rel="nofollow ugc noopener" target="_blank" data-type="details">詳細を見る</a></div>`,
      setUpEditor,
    });

    /* 
	  Extension の NodeView で設定しているURL変更用のフォーム（Reactコンポーネント）を表示する
    */
    await userEvent.click(getByRole('button', {name: 'ボタンを編集する'}));

    // 詳細を見るボタンの編集画面でURLを変更する
    const urlInput = getByRole('textbox', {name: 'URLを入力'});
    await userEvent.clear(urlInput);
    await userEvent.type(urlInput, 'https://example.com/');
    await userEvent.click(getByRole('button', {name: '適用'}));

    // エディター上でURLが変更されていること
    expect(getByRole('link', {name: '詳細を見る'}).getAttribute('href')).toBe(
      'https://example.com/',
    );
  });

export const PressReleaseButtonExtension = Node.create({
  name: 'pr_button',
  ...
  addAttributes() {
	  ...
  },
  parseHTML() {
		...
  },
  renderHTML({HTMLAttributes}) {
    ...
  },
  addNodeView() {
    return ReactNodeViewRenderer(PressReleaseButtonNodeView);
  },

import {type Editor} from '@tiptap/core';

type PressReleaseImage = {
  fileName: string;
};

export function extractImagesFromTiptapEditorContent(
  editor: Editor,
): PressReleaseImage[] {
  const images: PressReleaseImage[] = [];

  editor.state.doc.forEach((node) => {
    switch (node.type.name) {
      case ExampleImageExtension1.name:
      ....
      
      images.push(getPressReleaseImageFromExampleImageExtension1(ExampleImageExtension1));
      
      case ExampleImageExtension2.name:
      ...
      
      images.push(getPressReleaseImageFromExampleImageExtension2(ExampleImageExtension2))
      
      ...   
   }
   
   return images;
}

import {Editor} from '@tiptap/core';

const editorElementClass = 'tiptap';
let editor: Editor | null = null;

const createEditorElement = () => {
  const editorElement = document.createElement('div');

  editorElement.classList.add(editorElementClass);
  document.body.append(editorElement);
  return editorElement;
};

const getEditorElement = () => document.querySelector(`.${editorElementClass}`);

describe('大画像がTiptapのエディター上から取得できること', () => {
  afterEach(() => {
    editor?.destroy();
    getEditorElement()?.remove();
  });

  test('JPG画像をアップロードした大画像がTiptapのエディター上に存在する時、その大画像のfileNameが取得できること', () => {
    const expectedFileName = 'd37235-4352-775d49ebcbf6fe93c300-0.jpg';

    editor = new Editor({
      element: createEditorElement(),
      extensions,
      content: `<div class="pr-img"><figure class="pr-img__item--large"><img src="/path/to/image" data-filename="${expectedFileName}"><figcaption class="pr-img__item__caption"></figcaption></figure></div>`,
    });

    const image = extractImagesFromTiptapEditorContent(editor);

    expect(image.length).toBe(1);
    expect(image[0].fileName).toBe(expectedFileName);
  });