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

我读了一些相关的问题，他们都说这个错误是由来自＆＃39; ./ Component.js＆＃39;的导入{Component}引起的。但在我的情况下，我没有使用{}但仍然有错误。

这里是错误的详细信息

 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

您正在正确导入 - 如果您要重新组合该组件，则只需导出和导入{ Header }（例如，使用redux＆＃39; s connect）。

如果您正在使用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');
  });
});

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

1 个答案: