I have a component that shows a spinner until data retrieval is completed. But I do not take the data from the server, but from indexedDB, using the Dexie library. How I can mock such request. My code:
useEffect inside component
useEffect(() => {
dispatch(setData())
}, [])
if(isDataLoadng) {
return <Spinner/>
}
return Component
Thunk action
import db from '../../indexedDB/db'
export const setData = createAsyncThunk(
`setData`,
async (_, { getState }) => {
const data =await db.data.toArray()
return {data}
}
)
indexed db file
import Dexie from 'dexie';
const db = new Dexie("dataDB");
db.version(1).stores({
data: 'id, name,
});
export default db
My reducer
const initialState = {
data: [],
isDataLoading: true,
}
const crudSlice = createSlice({
name: 'dataReducer',
initialState: initialState,
extraReducers: {
[setData.pending]: (state) => {
state.isDataLoading = true
},
[setData.fulfilled]: (state, action) => {
state.data = action.payload.data
state.isDataLoading = false
},
},
})
My attempt
Test.test.js
import "fake-indexeddb/auto";
import Dexie from "dexie";
describe('Data tests', () => {
beforeEach(async () => {
//my code bellow doesnt mock request
const db = new Dexie("dataDB");
db.version(1).stores({ data: 'id,name'})
const table1 = db.table("data");
await table1.bulkGet([])
//How mock getting data from db here instead of my attempt
})