Error " Invariant violation : Element type is invalid: expected a string

Question

I am new to Unit testing. I am trying to run a test but I keep getting the following error :

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. I ran with { import Headers } and without {} and I keep getting the same error.

This is the current test.

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

I expected the test to pass by getting all the props called correct.

Something is wrong with the way you're are exporting your component. Can you at least post the component without the big content inside the class? I.e post all of the imports at the top, then the line where the component starts and the ending brackets? — Rupert, Jan 09 '19 at 09:46
I added part of the code - I believe I might be calling the props wrong, maybe writing extra code based on render() . — user91, Jan 10 '19 at 14:49

score 0 · Answer 1 · answered Jan 08 '19 at 16:39

0

There are many suggestions and it depends on the environment that you use. So , I will recommend you to read this: https://github.com/facebook/react-native/issues/16332 and this Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

one suggestion :

downgrade native-base

or:

export default App;

or : instead of using

export default App;

use

module.exports = App;

answered Jan 08 '19 at 16:39

I_Al-thamary

3,385
2
24
37

I already checked the previous stackoverflow link but no success. – user91 Jan 08 '19 at 16:43
@user91 try one the solution that I provided above. – I_Al-thamary Jan 08 '19 at 16:46
I found also this Open `App.js` file and modify this line `class YourApp extends Component {` into `export default class YourApp extends Component<{}> {` – I_Al-thamary Jan 08 '19 at 17:07
I did it already, that's how it was at the beginning . but still having problems – user91 Jan 08 '19 at 20:32

Error " Invariant violation : Element type is invalid: expected a string

1 Answers1