Jest is unable to find module 'react-google-button'

[kaladivo]

Do you want to request a feature or report a bug?
I want to report a bug

What is the current behavior?
When I run jest i get the following Jest is unable to find module 'react-google-button'

What is the expected behavior?
The package should not break jest tests

Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
Jest 4.2.4. Create react app with typescript

Steps to reproduce and if possible a minimal demo of the problem via codepen or similar.
You can reproduce the error by cloning this repo: https://github.com/kaladivo/jest-error
then run yarn install && yarn test.

See this question on stackoverflow https://stackoverflow.com/questions/60024292/jest-is-unable-to-find-module-from-test-file/60025441#60025441. This seems to be caused by many reasons, one of which seems to be using newer import syntax. I am not sure how to fix this (otherwise I would made a PR), but maybe someone else can... It would be great if this module wont break the tests...

[prescottprue]

I have used this within other tests in the past, so I'll have to see what it might be - thanks for providing the repo where the error can be reproduced

[juliusdejon]

Same here when running my test

[davidglivar]

I'm using create-react-app and ran into this as well. I'm working around the issue by mocking this module.

// src/components/__mocks__/react-google-button.tsx
import React from 'react';
const GoogleButton = () => <div />;
export default GoogleButton;

more on mocking: https://jestjs.io/docs/en/manual-mocks

[vamsi920]

@davidglivar what to do after this step .

[prescottprue]

I find it interesting that it is looking for a jsx file in the posted error. It also says that support can be added for other extensions like .js to the moduleFileExtensionssetting, which makes sense especially because this repo is using that extension instead of .jsx.

Not sure how much can be done on the library side other than switching to typescript or outputing a .tsx file. Has anyone experienced this when using any other setup different from CRA + typescript?

[juliusdejon]

I gave up and created my custom google-btn

[tervay]

I ran into this issue and I solved it by changing

import GoogleButton from "react-google-button";

to

import GoogleButton from "react-google-button/dist/react-google-button";

[umutlaguler]

@tervay it's not working on my project

[bdunks]

For others finding this issue, note that you can also solve this by explicitly importing a previous version ("react-google-button": "^0.6.0") until the package.json main path is resolved.

[prescottprue]

Should be solved by updating to v0.7.2

[Vyomrana02]

I have the same issues using npm in react app.
I have added explicitly "react-google-button": "^0.6.0" in package.json and trying to
import GoogleButton from "react-google-button";
but showing error when running npm start that " Module not found : can't resolve 'react-google-button' "
and also have upgrading verison to ^0.7.0 but giving same error