开玩笑反应示例

Posted 2023-02-22

【中文标题】开玩笑反应示例

【英文标题】：Jest React Example

【发布时间】：2014-09-18 19:53:06

【问题描述】：

我正在尝试从 Jest React tutorial 运行 React 示例，但收到错误消息

λ npm test                                          

> ...                           
> jest                                              

Found 1 matching tests...                           
 FAIL  __tests__\CheckboxWithLabel-test.js (0.551s) 
npm ERR! Test failed.  See above for more details.  
npm ERR! not ok code 0   

我几乎直接从示例中复制了代码。 package.json 如下：

  "dependencies": 
    "react": "*",
    "react-tools": "*"
  ,
  "scripts":
    "test": "jest"
  ,
  "jest": 
    "scriptPreprocessor": "<rootDir>/preprocessor.js",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react"
    ]
  ,
  "devDependencies": 
    "jest-cli": "~0.1.17"
  

有什么想法可以解决这些错误并成功运行示例测试吗？我很可能错过了一个重要的细节（或细节），但不完全确定是什么。哦，对于它的价值，如果这会影响这一点，我会在 Windows 上运行它。我真的很想对我的反应组件进行一些测试（那里也遇到了一些问题，所以从基本示例开始）——任何帮助将不胜感激:)

【问题讨论】：

我遇到了同样的问题。我在调试时看到了一个错误，这里被吞没了。要求 React - ReactCompositeComponent.js：无法读取未定义的属性“DEFINE_MANY”。在这种情况下，Jest 似乎忽略了 unmockedModulePathPatters。看起来与此 github.com/facebook/jest/issues/88 相关。可能是 Windows 问题？

今晚我将创建一个 Ubuntu Vagrant 映像并在那里尝试这个基本测试。听起来确实与您提到的问题非常相似。

【参考方案1】：

我在他们的 github 页面上创建了一个issue。正在等待找出它是否实际上是与 Windows 相关的问题

与此同时，最终通过指定模块的名称而不是相对路径来使其工作

"unmockedModulePathPatterns": ["react"]

【讨论】：

感谢您解决这个问题。还要感谢您在开玩笑的问题跟踪器上提出问题。除非有人击败我，否则我将在调查结果中添加一个问题:)

【参考方案2】：

对于任何最终在这里进行搜索的人，@ron 的 github 问题最终得到了解决，结论是 unmockedModulePathPatterns 期望匹配文件路径的正则表达式数组，而不一定是文件路径本身。这就是使用“相对”路径有效的原因。来自 Jest API 文档：

与所有匹配的正则表达式模式字符串数组 模块加载器之前的模块将自动返回一个模拟 他们。如果一个模块的路径匹配此列表中的任何模式，它 不会被模块加载器自动模拟。

这对于一些常用的“实用程序”模块很有用 几乎一直用作实现细节（比如 下划线/低破折号等）。保持这一点通常是最佳做法 列表尽可能小，并始终使用显式 jest.mock()/jest.dontMock() 在个别测试中调用。显式 每个测试设置对于测试的其他读者来说更容易推理 关于测试将运行的环境。

可以通过以下方式在单个测试中覆盖此设置 在测试文件的顶部显式调用 jest.mock()。

(https://facebook.github.io/jest/docs/api.html#config-unmockedmodulepathpatterns-array-string)

从问题本身来看：

Jest 在内部使用 unmockedModulePathPatterns 创建一个 RegExp 将根据其测试所有必需的模块。因此，你 需要提供有效的正则表达式模式。例如，这很好用 对我来说：

> unmockedModulePathPatterns: [
>       "node_modules\\" + path.sep + "react",
>       "node_modules\\" + path.sep + "reflux",
>       "node_modules\\" + path.sep + "react-router"
>     ],

"mlarcher", (https://github.com/facebook/jest/issues/100)

【参考方案3】：

<rootDir> 应替换为实际路径。看起来您没有要开始的子目录，而在某些情况下，您可能只想在 src/ 路径中运行测试，因此您的 package.json 看起来更像这样：

  ...
  "jest": 
    "rootDir": "src",
    "scriptPreprocessor": "../jest/preprocessor.js" // Note: relative to src
  
  ...

【讨论】：

我尝试使用实际路径更改根目录，但是仍然无法正常工作。也许相关，但我让测试简单地工作并开始重新添加其他代码。一旦我到达任何要求语句，它就会失败。我基本上使用来自github.com/facebook/jest/tree/master/examples/react 的代码和上面的 package.json（以及您建议的更改）