Ошибка "Инвариантное нарушение: тип элемента недопустим: ожидается строка

Question

Я новичок в модульном тестировании. Я пытаюсь запустить тест, но получаю следующую ошибку:

React.createElement: тип недействителен - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен. Я бежал с {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 и это Неопознанная ошибка: нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция, но получено: объект

одно предложение:

downgrade native-base

или

export default App;

или: вместо использования

export default App;

использование

module.exports = App;