错误“不变违规：元素类型无效：需要一个字符串

Question

我是单元测试的新手。我正在尝试运行测试，但我不断收到以下错误：

React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出您的组件。 我运行了 { import Headers } 而没有运行 {}，但我一直收到同样的错误。

这是当前的测试。

 import React from 'react';
import { Headers } from './Headers';
import { configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import  * as renderer from 'react-test-renderer';

configure({adapter: new Adapter()});

describe('Headers', () => {

let tree;
let baseProps;
let mockauthKeyValues;
let mockheaderKeyValues = {
    type: "TEST1",
    defaultData : "test",
};
let mockaddNewKeyValue;

 beforeEach(() => {
    baseProps = { // assing all of the props into MOCK
        authKeyValues: mockauthKeyValues,
       headerKeyValues: mockheaderKeyValues,
       addNewKeyValue: mockaddNewKeyValue
    }
})

 it ('should render without a authkeyvalues',() => {
baseProps = {
    ...baseProps,
    authKeyValues: {},
    };
    tree = renderer.create(<Headers {...baseProps } />)
    let treeJson = tree.toJSON();
    expect(treeJson).toMatchSnapshot();
    tree.unmount()
});

 it ('should render without headerKeyValues',() => {
baseProps = {
    ...baseProps,
    headerKeyValues: {},
};
    tree = renderer.create(<Headers {...baseProps } />)
    let treeJson = tree.toJSON();
    expect(treeJson).toMatchSnapshot();
    tree.unmount()
});

it ('should render without addNewKeyValue',() => {
baseProps = {
    ...baseProps,
    addNewKeyValue: {},
};
    tree = renderer.create(<Headers {...baseProps } />)
    let treeJson = tree.toJSON();
    expect(treeJson).toMatchSnapshot();
    tree.unmount()
});


 it('should render with all of the props', () => {  
    tree = renderer.create(<Headers {...baseProps} />)
    let treeJson = tree.toJSON()
    expect(treeJson).toMatchSnapshot();
    tree.unmount()
});

});

Headers.js

import React, { PropTypes, Component } from 'react'
import KeyValue from '../Utils/KeyValuePair'
const shortid = require('shortid')

export class Headers extends Component {

componentDidMount () {
if (this.props.authKeyValues == null) {
  this.setState({
    useDefaultData: false
  })
} else {
  this.setState({
    useDefaultData: true
  })
}
}

generateKeyValues = () => {
 if (this.props.headerKeyValues == null) {
  return (
    <KeyValue
      id={shortid.generate()}
      type='headers'
      addNewKeyValue={this.props.addNewKeyValue}
    />
  )
} else {
 let defaultKeyValues = Object.keys(this.props.headerKeyValues).map((headerKey, idx) => {
    return (
      <KeyValue
        key={headerKey}
        id={headerKey}
        type={this.props.headerKeyValues[headerKey].type}
        addNewKeyValue={this.props.addNewKeyValue}
        defaultData={this.props.headerKeyValues[headerKey]}
      />
    )
  })
  defaultKeyValues.push(
    <KeyValue
      id={shortid.generate()}
      type='headers'
      addNewKeyValue={this.props.addNewKeyValue}
    />
  )
  return defaultKeyValues
}
}

render () {
  return (
    <div>
      {this.generateKeyValues()}
    </div>
    )
 }
}

我希望所有的道具都正确，从而通过测试。

Answer 1

有很多建议，这取决于您使用的环境。所以，我会推荐你​​阅读这个：https://github.com/facebook/react-native/issues/16332 和这个 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

一个建议：

downgrade native-base

或：

export default App;

或： 而不是使用

export default App;

使用

module.exports = App;