How to mock request to IndexedDB in react testing library/jest?

Viewed 420

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
     })
0 Answers
Related