玩笑react示例

IT技术 unit-testing testing reactjs jestjs
2021-04-26 12:44:15

我正在尝试运行Jest React 教程中的 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"
  }
}

关于我可以做些什么来解决这些错误并成功运行示例测试的任何想法?我很可能遗漏了一个重要的细节(或细节),但不完全确定是什么。哦,对于它的value,如果这会影响它,我会在 Windows 上运行它。我真的很想对我的react组件进行一些测试(那里也有一些问题,所以从基本示例开始)——任何帮助将不胜感激:)

3个回答

在他们的 github 页面上创建了一个问题等待查明它是否实际上是与 Windows 相关的问题

同时,最终通过指定module的名称而不是相对路径来使其工作

"unmockedModulePathPatterns": ["react"]

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

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

这对于一些几乎始终用作实现细节的常用“实用程序”module很有用(例如下划线/低破折号等)。通常最好的做法是让这个列表尽可能小,并且在各个测试中始终使用显式 jest.mock()/jest.dontMock() 调用。对于测试的其他读者来说,明确的每个测试设置更容易推断测试将运行的环境。

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

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

从问题本身来看:

unmockedModulePathPatterns 由 Jest 在内部使用来创建一个 RegExp,所有需要的module都将针对它进行测试。因此,您需要提供有效的正则表达式模式。例如,这对我来说效果很好:

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

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

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