How to Test File Upload in React — With Sample Files

Testing file upload is one of the most overlooked aspects of frontend development. Your app might handle text inputs perfectly, but what happens when a user uploads a 10MB PDF or a corrupt ZIP? This guide covers how to test file upload in React applications using real sample files.

Why test with real files?

Mocking file inputs in unit tests is common, but it doesn't catch real-world issues like file size limits, MIME type validation, and browser-specific behaviors. Using actual sample files in your test suite gives you confidence that your upload flow works end-to-end.

Setting up file upload testing

First, download sample files for your tests. We recommend having at least:

• A small file (1KB) — for basic functionality testing
• A medium file (1MB) — sample PDF files
• A large file (10MB) — for testing size limits and progress indicators
• An image file — sample JPG images for preview testing

Unit testing with React Testing Library

import { render, screen, fireEvent } from '@testing-library/react';
import FileUpload from './FileUpload';

test('accepts PDF files', async () => {
  render(<FileUpload />);
  const input = screen.getByLabelText('Upload file');
  const file = new File(['content'], 'test.pdf', {
    type: 'application/pdf',
  });
  fireEvent.change(input, { target: { files: [file] } });
  expect(screen.getByText('test.pdf')).toBeInTheDocument();
});

test('rejects files over 10MB', async () => {
  render(<FileUpload maxSize={10 * 1024 * 1024} />);
  const input = screen.getByLabelText('Upload file');
  const largeFile = new File(
    [new ArrayBuffer(11 * 1024 * 1024)],
    'large.pdf',
    { type: 'application/pdf' }
  );
  fireEvent.change(input, { target: { files: [largeFile] } });
  expect(screen.getByText(/too large/i)).toBeInTheDocument();
});

Integration testing with Cypress

For E2E testing, place sample files in your cypress/fixtures/ directory and use cy.get('input[type=file]').selectFile():

// cypress/e2e/upload.cy.ts
describe('File Upload', () => {
  it('uploads a PDF successfully', () => {
    cy.visit('/upload');
    cy.get('input[type=file]')
      .selectFile('cypress/fixtures/sample-1mb.pdf');
    cy.get('[data-testid="upload-status"]')
      .should('contain', 'Upload complete');
  });
});

Testing drag and drop

Drag-and-drop upload zones need special handling in tests. With React Testing Library, simulate the drop event with a DataTransfer object. Download a sample PNG file to test image preview rendering after drop.

Common edge cases to test

• Empty file (0 bytes) — empty.txt
• Very large file (100MB+) — test files
• Wrong MIME type (renamed .exe to .pdf)
• Multiple simultaneous uploads
• Network failure during upload
• Duplicate file names

Download sample files for testing

All files on TrueFileSize are free and designed for testing. No signup required. Download PDFs, images, videos, and large test files for your test suite.