Question

目前，我正在使用Jest与react native应用程序（expo CLI）进行单元测试，测试时bu当我从react-native导入任何组件时都很好，但是如果我从其他组件（例如react-本地用户界面小猫）。会出现如下图所示的错误。有人可以帮我吗预先感谢！

我的package.json

[Embedded Page] ERROR  
[Embedded Page] The resource https://angular.io/generated/docs/index.json was preloaded  
  using link preload but not used within a few seconds from the window's load event.  
  Please make sure it has an appropriate `as` value and it is preloaded intentionally.

我的jest.config.js

const panel = vscode.window.createWebviewPanel("test",
  "sample",
  vscode.ViewColumn.Two,
  {
    enableScripts: true,
  }
);

panel.webview.html = `<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    html, body {
      height:100%;
    }
  </style>
</head>
<body>
  <iframe src="http://localhost:4201/xxx" width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>`;

我的babel.config.js

  "jest": {
    "transform": {
      "^.+\\.(tsx|ts)?$": "ts-jest"
    },
    "preset": "jest-expo",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json"
    ]
  },
  "transformIgnorePatterns": [
    "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|@ui-kitten/components|react-native-ui-kitten|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base)"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint",
      "pre-push": "npm run lint"
    }
  }

Answer 1

请确保在测试环境中忽略第三方模块。在jest.config.js中：

testPathIgnorePatterns: [
  '<rootDir>/node_modules',
],

此外，如果失败，还有一种众所周知的解决方法：

transformIgnorePatterns: [
  "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|sentry-expo|native-base|@ui-kitten)"
]

如何使用Kitten UI进行单元测试

1 个答案: