Jest.fn не вызывает макетную реализацию ⇐ Javascript

[Anonymous]

Контекст
Я пишу тесты для компонента React, который позволяет загружать файлы от пользователя. Когда пользователь выбирает файл для загрузки, он отображается в списке загрузок в виде кнопки с текстом, соответствующим имени файла. Пользователь может нажать «Загрузить», чтобы подтвердить, что он хочет загрузить этот файл, или нажать кнопку, показывающую имя файла, чтобы удалить файл из списка.
Я написал следующее тест на удаление файла из списка по нажатию кнопки:
describe('FileUploadForm', () => {

// "setFiles" mocks the state setter of the parent component
const setFiles = (newFiles => {appState.files = [...newFiles]});

// generally "files" would be a parent component state, and
// appState would contain more fields for tracking other components
let appState = {files: [], setFiles: setFiles};

// These are part of the component but not used in this test
let setUploadFailed = false;
let setUploadResult = '';
document.cookie = 'csrftoken=verySecureToken';

// mock "images" to test with
let image1 = {
'name': 'test-image-1',
'type': 'image/jpeg'
};
let image2 = {
'name': 'test-image-2',
'type': 'image/bmp'
};
let image3 = {
'name': 'test-image-3',
'type': 'image/webp'
};
let image4 = {
'name': 'test-image-4',
'type': 'image/png'
};

test('removes individual file when clicked', () => {
// load the "images" into the files mock state
appState.files = [image1, image2, image3, image4];

const {rerender} = render(

);

// assert all images and their buttons appear in list to begin with
expect(screen.getByText('test-image-1')).toBeInTheDocument();
expect(screen.getByText('test-image-2')).toBeInTheDocument();
expect(screen.getByText('test-image-3')).toBeInTheDocument();
expect(screen.getByText('test-image-4')).toBeInTheDocument();

// click on one of the buttons
fireEvent(
screen.getByText('test-image-2'),
new MouseEvent('click', {
bubbles: true,
cancelable: true
})
);

rerender(

);

// assert that the clicked filename is removed from list
expect(screen.getByText('test-image-1')).toBeInTheDocument();
expect(screen.queryByText('test-image-2')).not.toBeInTheDocument();
expect(screen.getByText('test-image-3')).toBeInTheDocument();
expect(screen.getByText('test-image-4')).toBeInTheDocument();
});


Как написано выше, все это работает. Однако я хотел бы внести в это два изменения, чтобы включить jest.fn(), отмеченный стрелками ниже.
describe('FileUploadForm', () => {

// "setFiles" mocks the state setter of the parent component
const setFiles = jest.fn(newFiles => {appState.files = [...newFiles]}); // {
// load the "images" into the files mock state
appState.files = [image1, image2, image3, image4];

const {rerender} = render(

);

// assert all images and their buttons appear in list to begin with
expect(screen.getByText('test-image-1')).toBeInTheDocument();
expect(screen.getByText('test-image-2')).toBeInTheDocument();
expect(screen.getByText('test-image-3')).toBeInTheDocument();
expect(screen.getByText('test-image-4')).toBeInTheDocument();

// click on one of the buttons
fireEvent(
screen.getByText('test-image-2'),
new MouseEvent('click', {
bubbles: true,
cancelable: true
})
);

rerender(

);

// assert that the clicked filename is removed from list
expect(setFiles).toHaveBeenCalledTimes(1); // {formData.append('file', file)});
try {
await sendCSRFRequest(formData, 'api/upload/');
setUploadFailed(false);
} catch (err) {
setUploadFailed(true);
}

await setFiles([]);
};

/**
* Button for file that will remove it from the form when clicked.
* Fits inside the FileUploadForm.
*/
function FileButton(props) {
const [isHovered, setIsHovered] = useState(false);

const buttonStyle = {
background: 'none',
border: 'none',
padding: 0,
font: 'inherit',
color: '#000000',
cursor: 'pointer',
textDecoration: isHovered ? 'underline' : 'none',
};

const handleMouseEnter = () => {
setIsHovered(true);
};

const handleMouseLeave = () => {
setIsHovered(false);
};

const handleFileClick = (e, file, files) => {
e.preventDefault()
const modifiedFiles = files.slice(); // make a copy of the array
const index = modifiedFiles.indexOf(file);
modifiedFiles.splice(index, 1); // cut out the target file
props.setFiles(modifiedFiles); // set new files array
};

return(

handleFileClick(e, props.file, props.files)}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}>
{props.file.name}



);
};

export default function FileUploadForm(props) {
return (



{/* lists files passed into the form */}
{/* updates when files are selected for upload */}
{/* removes individual file when clicked */}

{props.files.map((file, index) => (

))}


{/* submit button submits form */}
handleUpload(
e, props.files, props.setFiles, props.setUploadFailed
)}
>
Upload


{/* clears file selections */}
props.setFiles([])}>
Clear all


{/* passes in CSRF token */}




);
};



Подробнее здесь: https://stackoverflow.com/questions/793 ... ementation