导出的无状态Navbar组件测试时仍提示需连接Redux Store

首先直接回答你的疑问：你导入无状态组件的方式是正确的——import { Navbar } from '../../../Navbar';确实是导入了那个未连接Redux的命名导出组件。那为什么还会报错呢？我们来一步步排查：

可能的原因1：不小心用了默认导出的连接版Navbar #

虽然你写了命名导入，但可能存在拼写错误或者复制粘贴失误，导致实际导入的是默认导出的、已经被connect包裹的Navbar组件（也就是需要依赖Redux Store上下文的版本）。

验证方式： #

检查你的Navbar文件，确认两个导出的存在：

// 未连接Redux的无状态组件（命名导出）
export const Navbar = ({ user }) => (...)

// 连接Redux的组件（默认导出）
export default connect(mapStateToProps, null)(Navbar);

如果你的测试导入语句写成了import Navbar from '../../../Navbar';（不带大括号），那就是用了默认导出的连接版，自然会要求Store上下文。

解决方法： #

确保导入语句是带大括号的命名导入：import { Navbar } from '../../../Navbar';

可能的原因2：Navbar内部有依赖Redux的子组件 #

你的无状态Navbar组件本身不需要Store，但如果它内部包含了其他被connect包裹的组件、或者使用了Redux Hooks（比如useSelector）的子组件，这些子组件会要求Store上下文，而你的测试环境没有提供。

比如，你代码里用到的text、feedPath等变量，如果是通过Redux Store获取的（而非直接导入的常量），那即使你给Navbar传了user，这些子依赖还是会找Store。

解决方法： #

在测试中用Redux的Provider包裹整个组件树，同时用mock store模拟所需的状态：

import React from 'react';
import { mount } from 'enzyme';
import { BrowserRouter } from 'react-router-dom';
// 新增导入Provider和mockStore工具
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import { ProtectedRoute } from '../index';
import { Navbar } from '../../../Navbar';

// 创建mock store并设置模拟状态
const mockStore = configureMockStore();
const store = mockStore({
  currentUser: {
    user: { firstName: 'First', lastName: 'Last', profilePictureUrl: 'avatar.jpeg' }
  },
  // 如果还有其他需要的状态（比如text相关），也在这里添加
});

describe('Auth Component', () => {
  const user = { firstName: 'First', lastName: 'Last', profilePictureUrl: 'avatar.jpeg' };
  const props = { component: () => <div id="component" />, path: '' };
  
  // 修改mountRoute，用Provider包裹
  const mountRoute = isAuth => mount( 
    <Provider store={store}>
      <BrowserRouter> 
        <Navbar user={user} /> 
        <ProtectedRoute isAuth={isAuth} {...props} /> 
      </BrowserRouter>
    </Provider> 
  );
  
  it('renders the component if isAuth is true', () => {
    const wrapper = mountRoute(true);
    expect(wrapper.find('#component').exists()).toBe(true);
  });
});

可能的原因3：无状态Navbar偷偷依赖了Store上下文 #

如果你的命名导出Navbar组件内部直接使用了Redux Hooks（比如useSelector）来获取text、feedPath等数据，而不是通过props传入，那即使你传了user，它还是会去上下文找Store。

解决方法： #

检查无状态Navbar的代码，确保所有需要的数据都通过props传入，或者在测试中通过Provider提供对应的Store状态。

内容的提问来源于stack exchange，提问作者user7496931