如何在反应测试库/笑话中模拟对 IndexedDB 的请求?

Dev*_*low 6 reactjs react-testing-library

我有一个组件,在数据检索完成之前显示一个旋转器。但我不从服务器获取数据,而是使用 Dexie 库从 indexedDB 获取数据。我怎么能嘲笑这样的要求。我的代码:

组件内的 useEffect

  useEffect(() => {
      dispatch(setData())
    }, [])
   
    if(isDataLoadng) {
      return <Spinner/>
    }
    
    return Component
Run Code Online (Sandbox Code Playgroud)

重击动作

import db from '../../indexedDB/db'

    export const setData = createAsyncThunk(
      `setData`,
      async (_, { getState }) => {
          const data =await db.data.toArray()
          return {data}
      }
    )
Run Code Online (Sandbox Code Playgroud)

索引数据库文件

import Dexie from 'dexie';


const db = new Dexie("dataDB");
db.version(1).stores({
  data: 'id, name,
});


export default db
Run Code Online (Sandbox Code Playgroud)

我的减速机

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
    },
  
  },
})
Run Code Online (Sandbox Code Playgroud)

我的尝试

测试.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
     })
Run Code Online (Sandbox Code Playgroud)