Enzyme报错Invariant Violation：找不到store，测试无连接组件遇问题

兄弟，我太懂你这种踩坑的感觉了！明明已经导入了无连接的Board组件，结果Enzyme还是抛出Invariant Violation说找不到store，这大概率不是你导入错了，而是下面这几个原因在搞鬼：

可能的原因 #

• 组件内部藏着依赖store的子组件：你测试的Board虽然是无连接版本，但它的子组件可能是已经用connect包裹过的。当你用mount渲染时，会完整渲染整个组件树，这些子组件就会去寻找Redux store，自然就报错了。
• 导入的组件可能还是连接后的版本：虽然你写了import { Board } from '../components/Board/Board'，但得确认Board组件文件里的导出是否正确——要确保命名导出的是未被connect处理的原始组件，而默认导出才是连接后的版本（比如export default connect(mapStateToProps)(Board)）。

对应的解决方案 #

1. 给测试组件套上Redux Provider #

如果你的测试需要完整渲染组件树（必须用mount），那可以手动创建一个mock store，然后用Provider把Board包起来，这样所有子组件都能拿到store了：

import { Board } from '../components/Board/Board';
import { mount } from 'enzyme';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store'; // 用这个库快速创建mock store

const mockStore = configureStore([]);

describe('Board', () => {
  it('contains .board when currentBoardId is truthy', () => {
    const store = mockStore({
      // 传入你需要的mock state，比如currentBoardId: 123
    });
    const wrapper = mount(
      <Provider store={store}>
        <Router> {/* 因为用到了react-router组件，所以也要包Router */}
          <Board currentBoardId={123} /> {/* 无连接组件需要手动传props */}
        </Router>
      </Provider>
    );
    expect(wrapper.find('.board').exists()).toBe(true);
  });
});

2. 改用shallow渲染 #

如果你只需要测试Board组件本身的逻辑，不需要渲染子组件，那用shallow代替mount就可以避开子组件的store依赖：

import { Board } from '../components/Board/Board';
import { shallow } from 'enzyme';
import { Router } from 'react-router-dom';

describe('Board', () => {
  it('contains .board when currentBoardId is truthy', () => {
    const wrapper = shallow(
      <Router>
        <Board currentBoardId={123} />
      </Router>
    );
    expect(wrapper.find('.board').exists()).toBe(true);
  });
});

3. 确认组件导出的正确性 #

最后再检查一遍Board.js的导出代码，确保命名导出的是原始组件：

// Board.js
import React from 'react';
import { connect } from 'react-redux';

// 原始的无连接组件
export const Board = ({ currentBoardId }) => {
  // 组件逻辑
  return <div className="board">...</div>;
};

// 连接后的组件作为默认导出
const mapStateToProps = (state) => ({
  currentBoardId: state.board.currentBoardId
});

export default connect(mapStateToProps)(Board);

这样就能确保你导入的{ Board }确实是无连接的版本啦！

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