错误：不变违规：元素类型无效

Question

我在使用 Jest 时发现了这个错误。

header-test.js

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import Header from '../app/components/layouts/header.js';

describe('<Header/>', () => {

  const Header = TestUtils.renderIntoDocument(<Header />);
  const span = TestUtils.scryRenderedDOMComponentsWithTag(Header, "span");

  it('header context (This is the header)', () => {
    const header_context_node = ReactDOM.findDOMNode(span[0]);
    expect(header_context_node).toEqual('This is the header');
  });

});

这是 header.js 中的内容

import React from 'react';    

class Header extends React.Component {

    render() {
        return (
            <div className="main-header">
                <ul>
                    <li className="main-header-left">
                        <span>This is the header</span>
                    </li>
                </ul>
            </div>
        )
    }
}

export default Header

我读了一些相关的问题，他们都说这个错误是由import {Component} from './Component.js' 。 但就我而言，我没有使用{ }但仍然有那个错误。

这是错误的详细信息

 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.
      
      at invariant (node_modules/react-dom/node_modules/fbjs/lib/invariant.js:44:15)
      at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (node_modules/react-dom/lib/instantiateReactComponent.js:77:56)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:367:22)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at mountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:104:32)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
      at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
      at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:320:18)
      at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
      at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
      at Object.renderIntoDocument (node_modules/react-dom/lib/ReactTestUtils.js:79:21)
      at Suite.<anonymous> (__tests__/header-test.js:8:47)
      at Object.<anonymous> (__tests__/header-test.js:6:1)
      at process._tickCallback (internal/process/next_tick.js:109:7)

  <Header/>
    ✕ encountered a declaration exception (3ms)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.704s
Ran all test suites.
  console.error node_modules/react/node_modules/fbjs/lib/warning.js:36
    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.

Answer 1

您正在正确导入 - 如果您正在包装组件（例如，使用 redux 的connect ，您只需要导出和导入{ Header } 。

如果您使用 Jest，为什么不使用内置工具？

import React from 'react';
import { shallow } from 'enzyme';

import Header from '../app/components/layouts/header.js';

describe('<Header />', () => {
  it('header context (This is the header)', () => {
    const component = shallow(<Header />);
    expect(component.find('span').text()).toEqual('This is the header');
  });
});