Jest无法从测试文件中找到模块

Question

我已使用create react app设置了一个应用程序。运行yarn test时，出现以下错误：Cannot find module 'react-google-button' from 'App.tsx'。这似乎是由于开玩笑而找不到react-google-button。

通过yarn start运行该应用程序时，它可以正常运行。错误是由react-google-button库本身引起的还是由错误的配置引起的？即使当我尝试模拟库时也会引发错误。

我创建了一个存储库，任何人都可以复制该错误：https://github.com/kaladivo/jest-error。 （运行yarn test）。

有人可以帮我解决这个问题吗？我不知道如何解决。我知道一种可能的解决方法是不使用react-google-button库，但是仍然无法解决将来可能会出现的一些更关键的库...

Answer 1

我发现Jest模块react-google-button有问题的两个原因。

这似乎是配置问题以及模块的创建方式。一个问题是您正在使用create-react-app，并且不得不处理缺乏调整某些功能而不弹出的能力，例如文件扩展名在意。我认为另一个问题与玩笑对模块导入反应的方式玩的不好有关。

问题-

1. 查看npm模块时，索引文件的扩展名为.d.ts。该文件看起来像node_modules/react-google-button/index.d.ts。这导致Jest抛出

找不到模块“ react-google-button错误”

运行应用程序时起作用的原因是TypeScript在查找该文件类型时没有任何问题，并且默认情况下在运行应用程序时会出现问题。

如果将名称更改为index.ts，则Jest在看到模块已加载时没有问题。我可以在Google上看到，其他人已经多次遇到这个问题，而他们不应该使用给定的TypeScript来查看文件就没有问题。我这里只有一个假设，那就是玩笑和create-react-app之间存在某种类型的配置问题。

1. Jest看到了该模块后，就会出现新问题。该库正在使用“ newish” import * as React from 'react'; import语句。开玩笑抛出
错误

Jest遇到意外令牌

为了验证我对第二个问题的理论，我删除了react-google-button库并更新了material-ui中的import语句以供使用，

import * as React from 'react';

当我进行更改时，新错误与意外的令牌错误完全相同，但现在是在材料导入上，而不是在react-google-button导入上。

我再次假设这是Jest没有配置为处理该问题的问题。

回答您的问题我认为这两种说法都可以。问题是由Jest的配置和模块的方式引起的

1. 命名index.d.ts文件。
2. 导入React。