React-testing-library + Redux:在"Connect(Currency)“的上下文中找不到"store”

在使用 react-testing-library 和 Redux 进行组件测试时，如果在 Connect(Currency) 的上下文中找不到 store，通常是因为测试环境中没有正确设置 Redux 的 store。以下是一些基础概念和相关解决方案：

基础概念

1. Redux Store: Redux 的核心是一个单一的 store，它保存了整个应用的状态。所有组件通过 connect 函数连接到 store，从而获取所需的状态和分发操作。
2. React-Redux: 提供了 connect 函数，用于将 React 组件与 Redux store 连接起来。
3. React-Testing-Library: 一个用于测试 React 组件的库，强调以用户行为为中心的测试方法。

相关优势

• 集成测试: 通过模拟用户交互，确保组件在实际使用中的行为符合预期。
• 真实 DOM 测试: 使用真实的 DOM 进行测试，而不是虚拟 DOM，更接近真实环境。

类型与应用场景

• 单元测试: 针对单个组件或函数进行测试。
• 集成测试: 测试多个组件或模块之间的交互。
• 端到端测试: 模拟用户整个操作流程，测试整个应用的功能。

解决方案

以下是一个示例，展示如何在测试环境中设置 Redux store 并使用 react-testing-library 进行测试：

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import ConnectedCurrency from './ConnectedCurrency'; // 假设这是你的组件

const mockStore = configureStore([]);

describe('ConnectedCurrency', () => {
  let store;

  beforeEach(() => {
    // 初始化 store 并填充一些状态
    store = mockStore({
      currency: {
        rate: 1.2,
        name: 'USD',
      },
    });
  });

  it('should render with correct currency name', () => {
    render(
      <Provider store={store}>
        <ConnectedCurrency />
      </Provider>
    );

    expect(screen.getByText('USD')).toBeInTheDocument();
  });
});

常见问题及原因

1. 未提供 store: 如果在测试中没有使用 <Provider store={store}> 包裹组件，Redux store 将无法传递到组件树中。
2. 异步数据: 如果组件依赖于异步数据，确保在测试中正确处理这些异步操作。

解决方法

• 确保使用 <Provider>: 在测试文件中使用 <Provider store={store}> 包裹被测试的组件。
• 模拟异步操作: 使用 redux-mock-store 的中间件功能来模拟异步操作，如 API 调用。

通过上述方法，可以确保在测试环境中正确设置和使用 Redux store，从而避免找不到 store 的问题。