diff --git a/packages/material-ui/src/InputBase/InputBase.test.js b/packages/material-ui/src/InputBase/InputBase.test.js
index ae0a37aa2741ac..8edd8225127eac 100644
--- a/packages/material-ui/src/InputBase/InputBase.test.js
+++ b/packages/material-ui/src/InputBase/InputBase.test.js
@@ -4,7 +4,6 @@ import { expect } from 'chai';
import { spy } from 'sinon';
import { createMount, getClasses } from '@material-ui/core/test-utils';
import describeConformance from '../test-utils/describeConformance';
-import consoleErrorMock from 'test/utils/consoleErrorMock';
import { act, cleanup, createClientRender, fireEvent } from 'test/utils/createClientRender';
import FormControl, { useFormControl } from '../FormControl';
import InputAdornment from '../InputAdornment';
@@ -243,35 +242,40 @@ describe('', () => {
});
describe('errors', () => {
- beforeEach(() => {
- consoleErrorMock.spy();
- });
-
- afterEach(() => {
- consoleErrorMock.reset();
- });
-
- it('throws on change if `inputRef` isnt forwarded', () => {
+ it('throws on change if the target isnt mocked', () => {
/**
* This component simulates a custom input component that hides the inner
- * input value for security reasons e.g. react-stripe-element
+ * input value for security reasons e.g. react-stripe-element.
+ *
+ * A ref is exposed to trigger a change event instead of using fireEvent.change
*/
function BadInputComponent(props) {
- const { onChange } = props;
+ const { onChange, triggerChangeRef } = props;
- function handleChange() {
- onChange({});
- }
+ // simulates const handleChange = () => onChange({}) and passing that
+ // handler to the onChange prop of `input`
+ React.useImperativeHandle(triggerChangeRef, () => () => onChange({}));
- return ;
+ return ;
}
- BadInputComponent.propTypes = { onChange: PropTypes.func.isRequired };
-
- const { getByRole } = render();
+ BadInputComponent.propTypes = {
+ onChange: PropTypes.func.isRequired,
+ triggerChangeRef: PropTypes.object,
+ };
- fireEvent.change(getByRole('textbox'), { target: { value: 1 } });
+ const triggerChangeRef = React.createRef();
+ render();
+
+ // mocking fireEvent.change(getByRole('textbox'), { target: { value: 1 } });
+ // using dispatchEvents prevents us from catching the error in the browser
+ // in test:karma neither try-catch nor consoleErrorMock.spy catches the error
+ let errorMessage = '';
+ try {
+ triggerChangeRef.current();
+ } catch (error) {
+ errorMessage = String(error);
+ }
- const errorMessage = consoleErrorMock.args()[0][0];
expect(errorMessage).to.include('Material-UI: Expected valid input target');
});
});