[React Testing Library] userEvent.uploadを使ってe.target.valueを取得する方法をご教示いただきたいです。
解決したいこと
userEvent.uploadをつかってテストをしているのですが、テストだとe.target.valueを使ったファイルパスを取得するコードが上手くいきません。
取得方法をご教示いただきたいです。
また、e.target.value以外の方法でパスを取った方が良いのでしょうか。
以上です。
よろしくお願いいたします。
該当するソースコード
// App.tsx
import {getUserNameApi} from './getUserNameApi';
import { useState } from 'react';
export const App = () => {
const [fileName,setFileName] = useState("");
const getFileName = (e:React.ChangeEvent<HTMLInputElement>) => {
if( e.target.files === null){
return;
}
// 問題の処理。yarn startで動かした場合は[C:\fakepath\test.txt]のような値が取れる
const fileNameWithPath = e.target.value;
setFileName(fileNameWithPath);
}
return (
<div>
<label htmlFor="file-uploader">test</label>
<input type="file" id="file-uploader" onChange={(e) => getFileName(e)}/>
<p>{fileName}</p>
</div>
);
}
test("ファイルアップデートテスト", async() => {
render(<App/>);
// label要素を取得
const input = screen.getByLabelText('test') as HTMLInputElement;
// アップロードするファイルを作成
const file = new File(['a','b','c'], 'test.csv', {type:'text/csv'})
// ファイルのアップロードをする
await waitFor(() => {
userEvent.upload(input,file);
})
screen.debug();
})
0
