CODEWITHSUNDEEP
reactjsunit-testingtestingjestjs
David Novák
David Novák

Reputation: 1495

Jest is unable to find module from test file

I have setup an app with create react app. When I run yarn test I get the following error: Cannot find module 'react-google-button' from 'App.tsx'. It seems to be caused by jest not finding react-google-button.

When running the app by yarn start it works as expected. Is the error caused by react-google-button library itself, or is it caused by wrong configuration? The error is thrown even when i try to mock the library.

I have created a repo where anyone can replicate the error: https://github.com/kaladivo/jest-error. (run yarn test).

Can someone help me solve this issue? I have no idea how to fix. I know one possible sollution would be not to use react-google-button library, but that still won't solve it happening in the future with maybe some more crucial library...

Upvotes: 2

Views: 2641

Answers (1)

wuno
wuno

Reputation: 9875

I found two reasons that Jest is having a problem with the module react-google-button.

This seems to be configuration issues and the way the module was created. One problem being you are using create-react-app and kind of have to deal with the lack of ability to adjust some things without ejecting, like file extensions jest is watching for. I think the other problem has to do with jest not playing nice with the way the module is importing react.

Issues -

  1. When looking at the npm module the index file has an extension of .d.ts. The file looks like this, node_modules/react-google-button/index.d.ts. This is causing Jest to throw a

Cannot find module 'react-google-button error'

The reason it works when running the app is because TypeScript does not have any issues finding that file type and will by default when running the app.

If you change the name to index.ts Jest has no problems seeing the module as loaded. I can see on Google that others have had this issue plenty of times when they should not of given TypeScript does not have an issue seeing the file. I only have a hypothesis here and that is, some type of configuration issue between jest and create-react-app.

  1. Once the module is seen by Jest a new problem occurs. This library is using the "newish" import * as React from 'react'; import statement. Jest is throwing an error of,

Jest encountered an unexpected token

To test my theory on this second issue I removed the react-google-button library and updated the import statement in material-ui to use, 

import * as React from 'react';

When I made the change the new error was exactly the same unexpected token error but now on the material import instead of the react-google-button import.

I assume once again that this is a problem with Jest not being configured to handle that.

To answer your question I think it is fair to say both. The problem is caused by configuration of Jest and the way the module is

  1. Naming the index.d.ts file.
  2. Importing React.

Upvotes: 2

Related Questions