'Jest doesnt recognize imported Styled Component from another library

React Native UI Library:

  1. Written in TypeScript and Styled Components.
  2. Written tests for the library using testing-library and jest.
  3. All the tests pass.

React Native App:

  1. Written in TypeScript and Styled Components.
  2. 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:

  1. Installed jest-styled-components after 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