diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 746d4afdb6e1..761b5a3ee06e 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3314,9 +3314,7 @@ Map {
"render": [Function],
},
"FileUploader" => Object {
- "contextType": Object {
- "$$typeof": Symbol(react.context),
- },
+ "$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"accept": Object {
"args": Array [
@@ -3396,6 +3394,7 @@ Map {
"type": "oneOf",
},
},
+ "render": [Function],
},
"FileUploaderButton" => Object {
"propTypes": Object {
diff --git a/packages/react/src/components/FileUploader/FileUploader.tsx b/packages/react/src/components/FileUploader/FileUploader.tsx
index 4e38786c14b1..4fbacbabff77 100644
--- a/packages/react/src/components/FileUploader/FileUploader.tsx
+++ b/packages/react/src/components/FileUploader/FileUploader.tsx
@@ -156,7 +156,7 @@ const FileUploader = React.forwardRef(
if (filenameStatus === 'edit') {
evt.stopPropagation();
const filteredArray = state.fileNames.filter(
- (filename) => filename !== nodes[index].innerText.trim()
+ (filename) => filename !== nodes[index]?.innerText?.trim()
);
updateState({ fileNames: filteredArray });
diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js
index 72cf8c1ba114..a3164aed7274 100644
--- a/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js
+++ b/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js
@@ -10,6 +10,7 @@ import { act, render } from '@testing-library/react';
import React from 'react';
import FileUploader from '../';
import { uploadFiles } from '../test-helpers';
+import { Simulate } from 'react-dom/test-utils';
const iconDescription = 'test description';
const requiredProps = {
@@ -48,22 +49,38 @@ describe('FileUploader', () => {
it('should clear all uploaded files when `clearFiles` is called on a ref', () => {
const ref = React.createRef();
- const { container } = render();
+ const onClick = jest.fn();
+ let requiredProps1 = {
+ ...requiredProps,
+ filenameStatus: 'edit',
+ };
+ const fileUpload = render(
+
+ );
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
- const input = container.querySelector('input');
+ const input = fileUpload.container.querySelector('input');
const filename = 'test.png';
act(() => {
uploadFiles(input, [new File(['test'], filename, { type: 'image/png' })]);
});
+ expect(getByText(fileUpload.container, filename)).toBeInstanceOf(
+ HTMLElement
+ );
- // eslint-disable-next-line testing-library/prefer-screen-queries
- expect(getByText(container, filename)).toBeInstanceOf(HTMLElement);
+ const onDelete = jest.fn();
+ const description = 'test-description';
+ // eslint-disable-next-line testing-library/render-result-naming-convention
+
+ let removeFile = getByLabel(
+ fileUpload.container,
+ 'test description - test.png'
+ );
act(() => {
- ref.current.clearFiles();
+ Simulate.click(removeFile);
});
- // eslint-disable-next-line testing-library/prefer-screen-queries
- expect(getByText(container, filename)).not.toBeInstanceOf(HTMLElement);
+
+ expect(onClick).toHaveBeenCalledTimes(1);
});
it('should synchronize the filename status state when its prop changes', () => {