test-user-interactions-in-js-apps-accurately-with-emulated-events-example-5

example5.js

import '@testing-library/jest-dom';
import * as React from 'react';
import Upload from '../src/Upload';
import {render, fireEvent, waitFor, screen} from '@testing-library/react';

test('allows uploading files', async () => {
  render(<Upload
    title="Update Mokedexx"
    description="Add your new companions here 🇰🇷"
    label="업로드 한국 모켓몬"
  />);

  // the text field is empty initially
  let textField = await screen.findByTestId('text-field');
  expect(textField).toHaveValue('');

  // the file upload is emulated
  let uploadField = await screen.findByTestId('file-upload-field');

  let fileBlob = { files: [new Blob(['꼬부기'])] };
  fireEvent.change(uploadField, { target: fileBlob });

  // the text area is updated with the file content
  await waitFor(() => expect(textField).toHaveValue('꼬부기'));
});