jeudi 26 novembre 2020

Jest/RTL, how do i test an image file being converted to base64

I am trying to test an image that is being uploaded and converted into base64; however, it stops at the imageCompression(), it doesn't catch or fulfill the promise. When i console logged event.target.files[0] it shows File: {}. In need of guidance to successfully pass this test.

test

import ChickenPotPieIMG from '../../assets/images/chicken-pot-pie-test-img.jpg'

    test('uploading image should be converted to base64 and display on the Dom', async () => {
        const { getByTestId, getByText } = render(<CreateForm />, {wrapper: AuthProvider});

        await act(() => Promise.resolve());
        const file = new File([ChickenPotPieIMG], 'dummypicture.png', {type: 'image/png'})

        const imageInput = getByTestId('image-input');
        fireEvent.change(imageInput, {target: {files: [file]}})

        await act(() => Promise.resolve());

        expect(getByTestId('image-output')).not.toBeNull();
    })

Component

  const toBase64 = (file) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });

  function imageFileHandler(file) {
    setDisplay(file);
    toBase64(file).then((data) => setSelectedFile(data));
  }

  function imageCompressor(event) {
    const file = event.target.files[0];
    console.log(typeof file)
    const options = {
      maxSizeMB: 0.05,
      maxWidthOrHeight: 700,
      useWebWorker: true,
    };
    imageCompression(file, options) // stops right here
      .then((compressedFile) => {
        imageFileHandler(compressedFile);
      })
      .catch(() => setErrorForm('unable to convert image file'));
  }

Aucun commentaire:

Enregistrer un commentaire