React+Redux项目测试触发Invariant Violation错误，求解决思路

错误信息 #

初始错误：Error: Invariant Violation: Element type is invalid just while testing

完整错误：
第一部分：Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

第二部分：Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check your code at index.js:11.

相关代码 #

index.js #

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './containers/App/App.js';
import { Provider } from 'react-redux';
import { store } from './store';
ReactDOM.render(
  ( <Provider store={store}>
    <App />
  </Provider> ),
  document.getElementById('root') || document.createElement("div")
);

App.js #

import React, { useEffect, useState } from "react";
import { getUser } from "../../firebase/user";
import Dashboard from "../Dashboard";
import SignIn from "../SignIn";
import { useSelector, useDispatch } from "react-redux";
import "../../styles/Global.scss";
import "../../styles/App.scss";
import "../../styles/Transitions.scss";
import "../../styles/Form.scss";
import "../../styles/Icons.scss";
import "../../styles/Cursors.scss";
const App = () => {
  const dispatch = useDispatch();
  const userId = useSelector(({ user: { userId } }) => userId);
  const [ content, setContent ] = useState("");
  useEffect(() => {
    dispatch(getUser())
  }, []);
  useEffect(() => {
    if (userId) {
      setContent("dashboard");
    } else if (!userId && userId !== undefined) {
      setContent("sign-in");
    }
  }, [userId])
  console.log("Update App");
  const Content = () => {
    console.log("Update App Content")
    if (userId === undefined) {
      return null;
    }
    if (userId) {
      return <Dashboard />;
    } else {
      return <SignIn />;
    }
  };
  return (
    <div className={`content-wrapper ${content}`}>
      {Content()}
    </div>
  );
};
export default App;

App.test.js #

import React from "react";
import { shallow } from "enzyme";
import App from "./App";
describe('App', () => {
  it('should render correctly', () => {
    const Component = shallow(<App />);
    expect(Component).toMatchSnapshot();
  });
});

排查思路 #

既然你已经查过常规资料但没解决，咱们从测试场景的特殊性和你的代码细节入手逐个排查：

1. 优先检查Dashboard和SignIn的导出/导入逻辑 #

错误提示直接指向组件类型无效，这两个子组件是最可疑的对象，哪怕生产环境正常，测试环境也可能因为路径或导出方式出问题：

• 确认../Dashboard和../SignIn的文件路径是否绝对正确——测试时的模块解析路径可能和生产环境有差异（比如用了路径别名的话，Jest配置里有没有对应映射？）
• 核对这两个组件的导出方式：如果组件是export default Dashboard，那你的导入没问题；但如果是export const Dashboard = ...，就得改成import { Dashboard } from "../Dashboard"，反之亦然。
• 可以做个快速验证：临时把<Dashboard />和<SignIn />换成<div>Test</div>，如果测试通过，那百分百是这两个组件的导入/导出问题。

2. 给测试中的App补上Redux上下文 #

你的App组件依赖useSelector和useDispatch，但Enzyme的shallow渲染不会自动提供Redux上下文——生产环境有Provider包裹，但测试时直接渲染App会导致hooks失效，间接引发渲染错误：

• 你需要在测试里给App套上Provider，并传入一个mock的store，比如用redux-mock-store：

  import React from "react";
  import { shallow } from "enzyme";
  import App from "./App";
  import { Provider } from 'react-redux';
  import configureStore from 'redux-mock-store';
  
  const mockStore = configureStore([]);
  
  describe('App', () => {
    it('should render correctly', () => {
      const store = mockStore({
        user: { userId: undefined } // 模拟初始状态
      });
      const Component = shallow(
        <Provider store={store}>
          <App />
        </Provider>
      );
      expect(Component).toMatchSnapshot();
    });
  });
  

• 也可以不用mock库，自己写一个极简的测试store，只要能让Redux hooks正常工作就行。

3. 模拟getUser这个异步action #

App在初始化时调用了dispatch(getUser())，如果这个action在测试环境下没有被正确模拟或导入错误，也可能触发异常：

• 先确认../../firebase/user里的getUser是正确导出的，然后在测试顶部用Jest mock掉这个模块，避免真实的firebase调用干扰测试：

  // 在App.test.js最顶部添加
  jest.mock('../../firebase/user', () => ({
    getUser: jest.fn()
  }));
  

4. 检查Enzyme的适配器配置 #

有时候Enzyme的适配器没配置对，也会出现各种奇怪的渲染错误，包括组件类型无效：

• 确认你安装了和React版本匹配的适配器（比如React 17用@wojtekmaj/enzyme-adapter-react-17），并且在setupTests.js里配置了：

  import { configure } from 'enzyme';
  import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
  
  configure({ adapter: new Adapter() });
  

5. 试试用mount代替shallow渲染 #

shallow只会渲染组件本身，不会渲染子组件，换成mount可以渲染整个组件树，说不定能得到更明确的错误提示，或者直接暴露子组件的问题。

内容的提问来源于stack exchange，提问作者Gergő Horváth