jest测试redux需要根组件

161 阅读1分钟

在这个更新后的示例中,我们使用 configureStore 函数来创建 Redux store。我们将 rootReducer 传递给了 configureStorereducer 选项,并通过 preloadedState 选项传递了初始状态。这样,我们就创建了一个符合 Redux Toolkit 推荐的 Redux store。

// TodoList.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import TodoList from './TodoList'; // 待测试组件
import rootReducer from './reducers'; // 我们的 root reducer

// 使用模拟的 Redux Provider
const renderWithRedux = (
  component,
  { initialState, store = configureStore({ reducer: rootReducer, preloadedState: initialState }) } = {}
) => {
  return {
    ...render(<Provider store={store}>{component}</Provider>),
    store,
  };
};

describe('TodoList', () => {
  test('renders todo items', () => {
    const initialState = {
      todos: [{ id: 1, text: 'Buy groceries', completed: false }],
    };
    const { getByText } = renderWithRedux(<TodoList />, { initialState });
    
    expect(getByText('Buy groceries')).toBeInTheDocument();
  });
});