I need to create a custom renderer function for react-testing-library to test all my components.
I need to fetch my app's redux store from createStoreManager which returns promise. I am using useEffect to call this function but useEffect is not getting called.
or is there any way to get a response from this fn createStoreManager?
import React, { useEffect, useState } from 'react';
import { render as rtlRender } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import { StoreProvider } from './provider';
import { createStoreManager } from './store';
const getOurStore = async () => {
const storeManager = await createStoreManager({
pageName: '',
sagaContext: {},
initialState: {},
sagaMonitor: null,
});
const { store } = storeManager;
return store;
};
const Wrapper = ({ children }) => {
let store;
**// Not getting called**
useEffect(() => {
(async () => {
store = await getOurStore();
})();
});
return (
<IntlProvider locale="en" messages="test">
<StoreProvider store={store}>{children}</StoreProvider>
</IntlProvider>
);
};
function render(ui, options) {
return rtlRender(ui, { wrapper: Wrapper, ...options });
}
// re-export everything
export * from '@testing-library/react';
// override render method
export { render };