jestでファイルアップロードをテストしたい。

Question

実現したいこと

jestで以下のテストケースを実行したいです。

「ファイル投稿ボタンを押して画像をアップロードすると、アップロードした画像が画面に表示される。」

発生している問題・エラーメッセージ

色々やり方を調べているのですが、なかなか自分の状況にあった情報がなく、どうしたらいいかわからず困っています。

とりあえず、画像をアップロードした場合は、画像と一緒に「成功しました」の文言を表示するようにしてます。

なので、「ファイル投稿ボタンを押す」→「押した後の画面に「成功しました」の文言があればテスト合格というとロジックで考えています。

該当のソースコード

import React, { useState, useContext } from 'react';

  export const upload = () => {

    const [isFileTypeError, setIsFileTypeError] = useState(false);
    const [preview, setPreview] = useState<string>("");

    const handleFile = async() => {
      setIsFileTypeError(false);
      const file = (event!.target! as HTMLInputElement).files![0];
      if (
        ![
          "image/jpeg",
          "image/png",
          "image/bmp",
          "image/svg+xml",
        ].includes(file.type)
      ) {
        setIsFileTypeError(true);
        return false;
      }
      setPreview(window.URL.createObjectURL(file));
      return true;
    }
    return(
      <div>
                <label>
                  file uploade!!
                  <input hidden type="file" data-testid="fileDropzone" id="photo" name="photo" accept="image/*,.png,.jpg,.jpeg,.gif" onChange={handleFile}/>
                </label>
                {
                  preview ? (
                    <div>
                      <p>成功しました</p>
                      <img src={preview} alt="preview />
                    </div>
                  ) : (
                    null
                  )
                }
      </div>
    )
  }

export default upload.

import React from "react";
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

import Upload from './upload';

describe('files', () => {
  it('アップ', async() => {
    render(<Upload/>)
    const file = new File(['hello'], 'hello.png', {type: 'image/png'})
    const input = screen.getByLabelText('file uploade!!');
    await userEvent.upload(input, file);
    await waitFor(() => {
      expect(input.files[0]).toStrictEqual(file)
    })
  });
});

試したこと

上記の通り、ファイルのテストデータを用意してそれを使う方法で考えてますが、なかなかうまくいきません・・・。
以下のjestの公式を参考にしました。
https://testing-library.com/docs/ecosystem-user-event/#uploadelement-file--clickinit-changeinit--options

ちなみにこの状態でテスト起動すると、何のエラーなしでテスト合格となります。
しかし、下記のように追加するとテスト失敗となります。
「成功しました」の文言がみつからないとのことでした。

await waitFor(() => {
      expect(input.files[0]).toStrictEqual(file)
 　　expect(screen.queryByText('成功しました')).toBeInTheDocument();
    })

つまり、このテストコードだと、単にfileのアップロード自体は行われているが、フロントのファイル投稿ボタンをクリックしてアップロードしてるわけではない。よって画像アップロード成功時に行われる処理が走っていないということなのだと思います。

useEvent.uploadではなく、あくまでモック化するやり方でないといけないということなのかと思ってはいます。

どうかよろしくお願いします。

補足情報（FW/ツールのバージョンなど）

react
jest

Answer 1

E2Eテスティングフレームワークを利用すればテスト可能。
jestでやるべきではない。