search

pmndrs / react-spring

✌️ A spring physics based React animation library
http://www.react-spring.dev/
MIT License
28.11k stars 1.19k forks source link

Testing with Jest, Enzyme & Typescript: `Warning: React.createElement: type is invalid` #781

Closed jimmy-e closed 4 years ago

jimmy-e commented 5 years ago

🐛 Bug Report

Writing Jest / Enzyme tests with Typescript using React-Spring returns a warning.

To Reproduce

Clone this repo. Run yarn. Run yarn test navigation.test.tsx

The expected warning is as follows:

  console.error node_modules/react/cjs/react.development.js:172
    Warning: 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, or you might have mixed up default and named imports.

Expected behavior

No warning should be returned. If you run yarn test navigationTwo.test.tsx, no warning is returned. This is a similar component, but instead it does not use React-Spring.

Environment

jimmy-e commented 5 years ago

@aleclarson was wondering if I could get an update?

aleclarson commented 5 years ago

Try with v9 beta:

npm i react-spring@next

Be sure to import Spring from react-spring instead of react-spring/renderprops

jimmy-e commented 5 years ago

@aleclarson , I have updated the repo with the latest version of react-spring (^9.0.0-beta.33) and updated importing but am still getting the same error message.

jimmy-e commented 5 years ago

@aleclarson is there any update with this?

aleclarson commented 5 years ago

I get this error when I run yarn in your repo:

An unexpected error occurred: "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.21.tgz: Request failed \"401 Unauthorized\"".
jimmy-e commented 5 years ago

@aleclarson , that issue should be resolved now.

jimmy-e commented 5 years ago

@aleclarson is there an update with this?

aleclarson commented 5 years ago

Haven't had time to check it out yet. You can use issuehunt.io to put a bounty on this issue if it's a blocker for you.

aleclarson commented 4 years ago

In jest.config.js, you should be using:

'^react-spring$': '<rootDir>/node_modules/react-spring/web.cjs',

Without the ^ and $, you'll accidentally use that module for every package in the @react-spring package scope.

Your test ran fine when I removed that line entirely, so I don't think you even need it.