使用自定义 renderWithProviders 测试 redux-toolkit 组件失败

Question

首先，感谢您的阅读，我是 React 的新手，我正在尝试学习 redux，现在我想为我的组件创建一些测试，但由于我使用的是 redux，所以我需要发送一个提供者，根据文档，我需要做类似 renderWithProviders 的事情，这样我就可以将它重新用于不同的组件，这就是我想要做的，我在这个项目中使用 vite 和 typescript，但我得到了出现以下错误，我不知道如何修复。

这是我正在尝试创建的自定义渲染

import React, { PropsWithChildren } from 'react'
import { render } from '@testing-library/react'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'

import favsReducer from '../../store/favs/slice'

export function renderWithProviders(
  ui: React.ReactElement,
  {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = configureStore({
      reducer: { favs: favsReducer },
      preloadedState,
    }),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }: PropsWithChildren) {
    return <Provider store={store}>{children}</Provider>;
  }

  // Return an object with the store and all of RTL's query functions
  return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
}

我的店就是这家：

import { Middleware, configureStore } from "@reduxjs/toolkit"
import favsReducer from './favs/slice'

const persistanceLocalStorageMiddleware: Middleware = (store) => (next) => (action) => {
  next(action);
  localStorage.setItem('__favorite__redux__state__', JSON.stringify(store.getState()));
};

export const store = configureStore({
  reducer: {
    favs: favsReducer
  },
  middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware().concat(persistanceLocalStorageMiddleware)
  }
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

最喜欢的切片就是这个

import { createSlice, PayloadAction } from "@reduxjs/toolkit"
import { Favorite, Id, FavoriteWithId } from "../../interfaces/FavoritesInterface"

const DEFAULT_STATE: FavoriteWithId[] = []

const initialState: FavoriteWithId[] = (() => {
  const persistedState = localStorage.getItem('__favorite__redux__state__')
  if (persistedState) return JSON.parse(persistedState).favs
  return DEFAULT_STATE
})()

export const favsSlice = createSlice({
  name: 'favs',
  initialState: initialState,
  reducers: {
    addNewFavorite: (state, action: PayloadAction<Favorite>) => {
      const id = crypto.randomUUID();
      return [...state, { id, ...action.payload }]
    },
    deleteFavoriteById: (state, action: PayloadAction<Id>) => {
      const id = action.payload;
      return state.filter((fav) => fav.id !== id)
    }
  }
})

export default favsSlice.reducer
export const { addNewFavorite, deleteFavoriteById } = favsSlice.actions

所以，我不知道为什么会收到这条消息

“favs”不存在于“Reducer<{ favs: FavoriteWithId[]; }, UnknownAction, any>”类型中

我认为测试中的减速器应该具有“favs”属性，就像我配置的商店中的属性一样，但我不再确定，有人可以为我提供线索或如何继续的信息吗？

编辑：

我正在尝试编写的单元测试是这个：

import '@testing-library/jest-dom/jest-globals'
import '@testing-library/jest-dom'
import { screen } from '@testing-library/react'
import DogCard from '../components/profile-card/DogCard'
import { renderWithProviders } from './utils/test-utils'

describe('DogCard component', () => {
  test('renders the DogCard component', () => {
    renderWithProviders(<DogCard />)
    const dogImage = screen.getByTestId('dog-image')
    expect(dogImage).toBeInTheDocument()
  })
})

这是 github 存储库

Answer 1

这个修复它

const preloadedState: FavoriteWithId[] = []

export function renderWithProviders(
  ui: React.ReactElement,
  {
    // Automatically create a store instance if no store was passed in
    store = configureStore({
      reducer: favsReducer,
      preloadedState,
    }),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }: PropsWithChildren) {
    return <Provider store={store}>{children}</Provider>;
  }

  // Return an object with the store and all of RTL's query functions
  return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
}