React Testing Library - Fileupload component

[chipun]

Hello,

I tried to test a file upload component with React Testing Library (RTL) and TypeScript. It seems I cannot upload any file to the file upload component when I ran the test. How do you test accessing the FileUploadHandlerEvent of fileupload component?

Code: Select all

    it('should display the selected file name', async () => {
        const { getByTestId } = render(<FileUpload />);

        const fileInput = getByTestId('file-input');
        const file = new File(['test file content'], 'test.txt', {
            type: 'text/plain',
        });
        fireEvent.change(fileInput, { target: { files: [file] } });

        const fileName = getByTestId('file-name');
        expect(fileName.textContent).toBe('test.txt');
    });