How to get updated wrapper after axios call - react-native

Question

I have a function that looks like the following and I am trying to test the rowDoubleClicked function.
I mock the axios resolved value and I can see that the getAccountData function is being covered which should mean the update to dataArray.isLoading would be false.
however in my test when I debug the wrapper. It always hits the if statement that renders the loading div instead of the grid component and Im trying to figure out how to make it render the grid so that i can call the rowDoubleClicked function.
I've tried updating the wrapper, but it stays the same.
I've also tried doing an awat waitForElement on the component but it just gets timed out
import React, { useState } from 'react';
import axios from 'axios';
const MyComponent = (props) => {
let grid;
const dataArray = {
errorText: '',
rowData: '',
isLoading: true,
};
const [data, setData] = useState();
if (undefined !== data) {
dataArray.errorText = data.errorText;
dataArray.isLoading = data.isLoading;
dataArray.rowData = data.rowData;
}
const setShow = props.functions;
const getAccountData = async () => {
await axios
.get(props.endpoint)
.then((result) => {
dataArray.rowData = result;
})
.catch((error) => {
dataArray.errorText = error;
});
dataArray.isLoading = false;
setData(dataArray);
};
const handleClose = () => setShow(false);
const rowDoubleClicked = () => {
//some action
};
if (dataArray.errorText !== '') {
grid = (
<div>
<p>Error</p>
</div>
);
} else if (dataArray.isLoading) {
getAccountData();
grid = (
<div className="loading">
<p>Loading</p>
</div>
);
} else if (dataArray.rowData !== '') {
grid = <Grid handleRowDoubleClicked={rowDoubleClicked} />;
}
return (
<div>
<Modal visible={props.show} closable onCancel={handleClose}>
<div>{grid}</div>
</Modal>
</div>
);
};
export default MyComponent;
MyComponentView
import React from 'react'
import MyComponent from ''
const MyComponentView = (props) => {
const [select, setSelect] = React.useState('')
const [show, setShow] = React.useState(false)
const [selectedSearchBy, setSearchBy] = React.useState('')
const [selectedValue, setSearchByValue] = React.useState('')
const handleSearchIconClick = () => {
setShow(true)
}
const handleOnChange = (e) => {
setSearchBy(e.selectedOptionVal)
setSearchByValue(e.value)
}
return (
<div>
<form
action={`${endpoint`}
method='post'
onSubmit={handleSubmit}
>
<input type='hidden' id='searchBy' name='searchBy' value={selectedSearchBy} />
<input type='hidden' id='searchValue' name='searchValue' value={selectedValue} />
<Button data-testid='accessButton' id='accessButton' block color='primary'>
Search
</Button>
</form>
{show && (
<MyComponent
show
functions={setShow}
onModalApplyClick={handleApply}
endpoint={endpoint}
/>
)}
</div>
</div>
)
}
export default MyComponentView
here is my current test
it('performs double click on grid', async () => {
let wrapper;
let grid;
axios.get.mockResolvedValue(dataJSON);
wrapper = mount(
<MyComponent {...props} show>
<Modal>
<Grid {...gridProps} />
</Modal>
</MyComponent>
);
grid = wrapper.find(Grid);
wrapper.update();
await waitForElement(() => expect(grid).toBeTruthy());
grid.invoke('handleRowDoubleClicked')();
await act(() => Promise.resolve());
});

Answer 1

So it seems like your axios.get.mockResolvedValue is not working as intended. In such situations, I, personally, just use axios-mock-adapter.
Also, seems like waitForElement has been deprecated. How about a simple setTimeout with jest's done()?
import MockAdapter from 'axios-mock-adapter';
it('...', (done) => {
const mock = new MockAdapter(axios);
mock.onPost().reply(200, dataJSON);
//your test's logic
setTimeout(() => {
expect(grid).toBeTruthy();
}, 1000); //or any reasonable delay
});