e.preventDefault prevents me from unit testing with Enzyme - reactjs

Question

I have a reactJS application with a button.
When user presses the button, the user gets verificationCode on their cellphone.
At first, the form was refreshing randomly when user presses the button but I figured out that I have to use
event.preventDefault();
to stop the button refreshing.
So in my onClick handler, I have the following structure.
CODE -
const handleOnClick = async(event) => {
event.preventDefault();
logic.. (which includes async calls to backend API)
}
However, my problem is that when I create an unit test with Enzyme, the function returns in 'preventDefault()' and never executes the logic.
Is there anyway to test unit test in this case?
import React, {useState} from 'react';
import TextField from "#material-ui/core/TextField";
import Grid from "#material-ui/core/Grid";
import {
isInputNumeric,
processKoreaCellphone
} from '../../../../api/auth/authUtils';
import {requestMobileVerificationCode} from "../../../../api/auth/authApiConsumer";
import Select from "#material-ui/core/Select";
import OutlinedInput from "#material-ui/core/OutlinedInput";
import MenuItem from "#material-ui/core/MenuItem";
import {makeStyles} from "#material-ui/core";
import Button from '#material-ui/core/Button';
import Typography from "#material-ui/core/Typography";
import Box from "#material-ui/core/Box";
import Link from '#material-ui/core/Link';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogContentText from '#material-ui/core/DialogContentText';
import DialogTitle from '#material-ui/core/DialogTitle';
import Collapse from '#material-ui/core/Collapse';
const useStyles = makeStyles(theme => ({
cellphoneCountryCodeStyle: {
marginTop: '8px',
marginBottom: '4px'
},
requestVerificationMsgBtnStyle: {
marginTop: '8px',
marginBottom: '4px',
minHeight: '40px',
},
txtLabel: {
paddingTop: '0px',
fontSize: '0.75rem',
color: 'rgba(0, 0, 0, 0.54)'
},
txtLabelGrid: {
paddingTop: '0px',
},
}));
export const CellphoneTextField = props => {
const {onStateChange} = props;
const [state, setState] = useState({
errors: [],
onChange: false,
pristine: false,
touched: false,
inProgress: false,
value: {
cellphoneCountryCode: '82',
cellphone: '',
},
verificationCode: [],
isLocked: false
});
const [open, setOpen] = useState(false);
const [verificationCode, setVerificationCode] = useState('');
const [isVerificationCodeError, setIsVerificationCodeError] = useState(false);
const handleOnClick = async (event) => {
const eventCurrentTarget = event.currentTarget.name;
if (eventCurrentTarget === 'resendBtn' || eventCurrentTarget
=== 'resetBtn') {
event.preventDefault();
}
if ((eventCurrentTarget === 'requestVerificationMsgBtn' && state.isLocked
=== false) || eventCurrentTarget === 'resendBtn') {
const updateState = {
...state,
isLocked: true,
inProgress: true,
};
setState(updateState);
onStateChange(updateState);
const lang = navigator.language;
const cellphoneCountryCode = state.value.cellphoneCountryCode;
const cellphone = state.value.cellphone;
const response = await requestMobileVerificationCode(lang,
cellphoneCountryCode, cellphone).catch(e => {});
const updatedState = {
...state,
isLocked: true,
inProgress: false,
verificationCode: state.verificationCode.concat(response),
};
setState(updatedState);
onStateChange(updatedState);
}
};
const classes = useStyles();
return (
<Grid container spacing={1}>
<Grid item xs={12} p={0} className={classes.txtLabelGrid}>
<Typography className={classes.txtLabel} component="h5" id="infoMsg"
name="infoMsg"
variant="caption">
Did not receive the code? <Link
component="button"
variant="body2"
id="resendBtn"
name="resendBtn"
to="/"
className={classes.txtLabel}
onClick={handleOnClick}
>
[resend VericationCode]
</Link>
</Typography>
<Box m={1}/>
</Grid>
</Grid>
)
};
export default CellphoneTextField;
My unit test code
jest.mock("../../../../api/auth/authApiConsumer");
configure({adapter: new Adapter()});
describe('<CellphoneTextField />', () => {
const handleStateChange = jest.fn();
let shallow;
beforeAll(() => {
shallow = createShallow();
});
let wrapper;
beforeEach(() => {
wrapper = shallow(<CellphoneTextField onStateChange={handleStateChange}/>);
});
it('should allow user to resend verification code', (done) => {
act(() => {
wrapper.find('#resendBtn').simulate('click', {
currentTarget: {
name: 'resendBtn'
}
});
});
When I run the unit test, code beyond
event.preventDefault();
is not executed.

Answer 1

The second argument to .simulate('click', ...) is a mock event.
You need to pass in a no-op preventDefault function with that event when you simulate the click, because your code is trying to call e.preventDefault() but preventDefault doesn't exist on the (mock) event.
This should work:
wrapper.find('#resendBtn').simulate('click', {
preventDefault() {},
currentTarget: {
name: 'resendBtn'
}
});