Node.js 错误：不变冲突：元素类型无效

我在开玩笑时发现了这个错误

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');
  });

});

---

您正在正确导入-如果正在包装组件（例如，使用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');
  });
});

从“React”导入React；
从“酶”导入{shall}；
从“../app/components/layouts/Header.js”导入标题；
描述（“”，（）=>{
它（'标题上下文（这是标题）'，（）=>{
常量分量=浅（）；
expect（component.find（'span'）.text（））.toEqual（'This is header'）；
});
});

 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.

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');
  });
});