search

expo / vector-icons

https://icons.expo.fyi
MIT License
661 stars 115 forks source link

Warning: React.createElement: type is invalid -- expected a string in Icon #142

Closed sallesma closed 4 years ago

sallesma commented 4 years ago

Hi

I have this component which is very close to the readme example

import React from 'react';
import { Ionicons } from '@expo/vector-icons';

const FeedbackButton = props => {
  return (
    <Ionicons name="logo-ionic" size={26} />
  );
};

export default FeedbackButton;

And this test

import React from 'react';
import renderer from 'react-test-renderer';

import FeedbackButton from './FeedbackButton';

describe('<FeedbackButton />', () => {
  it('renders correctly', () => {
    const tree = renderer.create(<FeedbackButton />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

My test passes but with this warning which seems to come from Icon

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      at Object.get Text [as Text] (node_modules/react-native/index.js:118:12)
      at Icon.render (node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:58)
      at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)
 PASS  src/Components/home/FeedbackButton.test.js
  <FeedbackButton />
    ✓ renders correctly (166 ms)

  console.error
    Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

    Check the render method of `Icon`.
        in Icon (created by Icon)
        in Icon (created by FeedbackButton)
        in FeedbackButton

      at warningWithoutStack (node_modules/react/cjs/react.development.js:167:32)
      at warning (node_modules/react/cjs/react.development.js:638:27)
      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:2035:5)
      at Icon.render (node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:31)
      at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)

  console.error
    The above error occurred in the <Icon> component:
        in Icon (created by Icon)
        in Icon (created by FeedbackButton)
        in FeedbackButton

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10141:21)
      at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10178:5)
      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11288:5)
      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3259:12)
      at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3280:9)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10497:11)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13295:7)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        1.979 s, estimated 2 s
Ran all test suites matching /Feedback/i.

Watch Usage: Press w to show more.

I have the exact same warning from any test on a component using an icon, which is quite a lot in the end and it pollutes my test suite logs.

Do yo have any ideas what causes the warning?

I am using:

sallesma commented 4 years ago

Looks like it came from my test not waiting for some async behaviour to finish before exiting. I solved my problem, sorry for this useless issue