'Jest doesnt recognize imported Styled Component from another library
React Native UI Library:
- Written in TypeScript and Styled Components.
- Written tests for the library using testing-library and jest.
- All the tests pass.
React Native App:
- Written in TypeScript and Styled Components.
- This app imports the above UI Library.
Problem:
When I try to create a unit test for any component, I am getting the below error:
yarn run v1.22.17
$ node_modules/.bin/jest .
PASS src/__tests__/utilities.test.ts
FAIL src/components/shared/__tests__/logo.test.tsx
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/USER/Projects/PROJECT/node_modules/hc-mobile-app-ui/dist/modules/accordion/accordion.js:47
return (<StyledWrapper testID="accordion">
^
SyntaxError: Unexpected token '<'
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (node_modules/hc-mobile-app-ui/dist/index.js:4:19)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 1.138 s
Ran all test suites matching /./i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
What I Tried:
- Installed
jest-styled-componentsafter I followed an article, but that didn't help.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
