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;

错误“不断违反：元素类型无效：预期为字符串

1 个答案: