I’m currently using a module from material-ui-dropzone. Which basically opens a popup dialog box when a button is clicked, and then to close it we just have to click outside the popup or click the cancel button.
When I test and try this in the UI, it works PERFECTLY.
however in my test suite I’m struggling a bit. This is my react component:
import React, { useState } from 'react';
import { DropzoneDialog } from 'material-ui-dropzone';
export const UploadBox = () => {
const [open, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleSubmit = async file => {
// unrelated logic
};
return (
<div>
<button onClick={handleClickOpen}>
Set Picture
</button>
<DropzoneDialog
open={open}
onSave={handleSubmit}
acceptedFiles={['image/*']}
showPreviews={true}
maxFileSize={5000000}
onClose={handleClose}
/>
</div>
);
};
And this is my testing file:
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UploadBox } from './UploadBox';
import React from 'react';
import '@testing-library/jest-dom';
describe('UploadBox', () => {
test('opens upload popup box on button click', () => {
render(<UploadBox />);
userEvent.click(screen.getByRole('button'), { name: 'Set Picture' });
expect(screen.getByText('Upload file')).toBeInTheDocument();
});
test('closes upload popup box on cancel button click', () => { // FAILING
render(<UploadBox />);
userEvent.click(screen.getByRole('button'), { name: 'Set Picture' });
userEvent.click(screen.getByText('Cancel'));
expect(screen.getByText('Upload file')).not.toBeInTheDocument();
});
});
My last test named closes upload popup box on cancel button click
is failing which should not be the case. The message I get is expected document not to contain element, found <h2 class="MuiTypography-root MuiTypography-h6">Upload file</h2> instead
, which means that it is still in the document. Any ideas as to why?