Unit Tests for async code (indexedDB) inside React Component - reactjs

Question

I am trying to write unit tests for a React component - That looks something broadly as follows -
a handle to a db is passed to a component
The component also receives data as props (that will change) - perhaps this is something that could come through a Redux store.
Now what I do in my useEffect for this data change is - Write into indexDB (actually using the idb library) and then on success, I read some of this data and setup a local state using setData and use this state to render
Basically all of the above works - so there is no problem with that (It's perhaps not right, but works!). My challenge is how to write unit test for this code. I have looked at using async inside jest.
The code looks something like as follows -
const Component = ({db, data}) => {
useEffect(() => {
const saveDataToDB = (data, successCB) => {
const tx = db.transaction("store", "readwrite");
const transactions = [tx.store.add(data)];
transactions.push(tx.done);
Promise.all(transactions).then((res) => {
successCB();
});
const cb = () => {
// Do somethingl
};
saveDataToDb(data, cb);
};
}, [data]);
// Rendering part.
return (
<div id="component-div">
</div>
);
};
export default Component;
and I am trying to write the tests for this component using something like following
describe('Component Tests', () => {
it("Component Renders with Data", () => {
const wrapper = mount(<Component data={data} db={db}/>);
expect(wrapper.find("#component-div").toEqual(true);
});
});
May be - there's something wrong the way component is implemented, that makes unit testing challenging. But it works, so not sure in general about what's the strategy for unit testing components that could have a few promise chains to resolve?

Answer 1

react testing library has support for async APIs. They can be used to achieve to solve the problem mentioned above.
This would require converting the test cases to async test cases and then awaiting using right the async APIs as described above.
The original test cases mention enzyme APIs, instead of that react-testing-library APIs are to be used.