set up integration test for file upload functionality with uppy in nextjs

303 views Asked by At

I'm trying to test an image upload functionality with vitest. The functionality is working as it's supposed when I test manually. There is two elements to the component. A form and Uppy Dashboard. Once the form is submitted, there is a guard clause that checks if the image is uploaded. If that is true then the form data is added to the uppy instance as meta data and the Image is uploaded. After that the Image is presented using FileReader.

here is the test

it('uploads an image', async () => {
    /* test upload functionality */

    /* set up variables */
    const { container } = render(<Dashboard />);
    const uploadInput = container.querySelector('input[type=file]') as HTMLInputElement;
    const submitButton = container.querySelector('button[type=submit]') as HTMLButtonElement;

    //assert upload input and submit button are in the document
    expect(uploadInput).toBeInTheDocument();
    expect(submitButton).toBeInTheDocument();

    //assert submit button and upload input are of type submit and file respectively
    expect(uploadInput.type).toBe('file');
    expect(submitButton.type).toBe('submit');

    /* upload image */
    await waitFor( () => {
      fireEvent.change(uploadInput, { 
        target: { files: [new File(['(⌐□_□)'], 'test.png', { type: 'image/png' })] }
      });
      expect(uploadInput.files).toHaveLength(1);
    });

    /* submit form with image */
    await waitFor( () => {
      submitButton.click();
    });

    //assert image to be in the document
    const image = container.querySelector('img');
    expect(image).toBeInTheDocument();
  });

The last assertion is failing. The image variable is for some reason null. I have tried wrapping it in a waitFor and it's still null.


UPDATE

I've set up unit tests for the form and learned that it was never being submitted and it seems, this is the real issue here. So far I have tried using user-event to click the submit button in that unit test, calling the buttons click method and using fireEvent to fire a click event. I'm still trying different methods hence the lack of code here. Atleast now that I know where the problem lies, I think it'll be much easier to find the solution. I have also set up a test for default values and updated the codebase so that the radio buttons have them. This is working splendidly and that test is passing. Lastly I've updated the code above so it matches the current implementation of the integration test.

0

There are 0 answers