如何用Jasmine和Enzyme测试图片类型<input type="file " accet="image/*"/>及Blob API创建图片文件

Got it—you're right that most basic tutorials stick to text files for file input tests, but testing image-specific inputs is totally doable with the Blob API. Let's break this down step by step, with concrete code examples you can drop into your test suite.

First: Create a Valid Mock Image File with Blob #

To test image file handling, we need a valid image File object. The simplest way is to use a minimal, valid PNG binary (a 1x1 transparent pixel) wrapped in a Blob, then convert it to a File. This ensures your component's image validation logic (if any) will recognize it as a valid image.

// Create a Uint8Array containing the binary data for a 1x1 transparent PNG
const minimalPngData = new Uint8Array([
  137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 1, 0, 0, 0, 1, 8, 6, 0, 0, 0, 31, 21, 196, 137, 0, 0, 0, 19, 73, 68, 65, 84, 8, 215, 99, 248, 255, 255, 63, 195, 127, 6, 32, 12, 0, 14, 245, 100, 16, 198, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130
]);

// Convert the binary data to a Blob with image/png MIME type
const imageBlob = new Blob([minimalPngData], { type: 'image/png' });

// Turn the Blob into a File object (matches what a real file input returns)
const testImageFile = new File([imageBlob], 'test-avatar.png', { type: 'image/png' });

Second: Write the Enzyme + Jasmine Test #

Let's assume your component looks something like this (a basic image upload input):

import React, { useState } from 'react';

const ImageUploadInput = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file && file.type.startsWith('image/')) {
      setSelectedImage(file);
    }
  };

  return (
    <input 
      type="file" 
      accept="image/*" 
      onChange={handleFileChange} 
      data-testid="image-upload-input"
    />
  );
};

export default ImageUploadInput;

Here's how to test it:

import React from 'react';
import { mount } from 'enzyme';
import ImageUploadInput from './ImageUploadInput';

describe('ImageUploadInput', () => {
  it('should accept and store a valid image file', () => {
    // 1. Create our test image file (reuse the code from above)
    const minimalPngData = new Uint8Array([
      137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 1, 0, 0, 0, 1, 8, 6, 0, 0, 0, 31, 21, 196, 137, 0, 0, 0, 19, 73, 68, 65, 84, 8, 215, 99, 248, 255, 255, 63, 195, 127, 6, 32, 12, 0, 14, 245, 100, 16, 198, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130
    ]);
    const imageBlob = new Blob([minimalPngData], { type: 'image/png' });
    const testImageFile = new File([imageBlob], 'test-avatar.png', { type: 'image/png' });

    // 2. Mount the component and simulate a file selection
    const wrapper = mount(<ImageUploadInput />);
    const fileInput = wrapper.find('[data-testid="image-upload-input"]');

    // Create a mock change event with our test file
    const mockChangeEvent = {
      target: {
        files: [testImageFile]
      }
    };

    fileInput.simulate('change', mockChangeEvent);

    // 3. Assert the component behaves correctly
    expect(wrapper.find(ImageUploadInput).state('selectedImage')).toEqual(testImageFile);
  });

  it('should ignore non-image files', () => {
    // Create a text file to test rejection
    const testTextFile = new File(['sample text'], 'notes.txt', { type: 'text/plain' });

    const wrapper = mount(<ImageUploadInput />);
    const fileInput = wrapper.find('[data-testid="image-upload-input"]');

    const mockChangeEvent = {
      target: {
        files: [testTextFile]
      }
    };

    fileInput.simulate('change', mockChangeEvent);

    // Assert the component doesn't store the non-image file
    expect(wrapper.find(ImageUploadInput).state('selectedImage')).toBeNull();
  });
});

Key Notes #

• Valid Image Data: Using a real minimal PNG ensures your component's image type checks (like file.type.startsWith('image/')) pass, and any downstream validation (like checking file headers) won't fail.
• Event Simulation: Enzyme's simulate doesn't replicate the native file input behavior fully, so we manually construct the event object with our test file in target.files.
• Testing Rejections: Don't forget to test non-image files to ensure your accept="image/*" restriction is enforced in your component logic.

内容的提问来源于stack exchange，提问作者Shiva Sai