如何配置Jest以与Expo SDK 32一起使用 [英] How to configure Jest to work with Expo SDK 32

问题描述

我有一个Expo应用程序，并且正在使用SDK28.我的团队决定我们应该更新到最新版本，这意味着要更新React Native(因为最新的SDK使用RN 0.57)和Babel.

I have an Expo app and was using SDK 28. My team decided we should update to the latest version, that meant updating React Native (Since the latest SDK uses RN 0.57) and Babel.

当我们更新依赖关系并修复配置文件时，Jest开始向我们显示此错误:

When we updated our dependencies, and fixed our config files, Jest started to give us this error:

TypeError: Cannot read property 'fetch' of undefined

      at node_modules/react-native/Libraries/vendor/core/whatwg-fetch.js:6:12
      at Object.<anonymous> (node_modules/react-native/Libraries/vendor/core/whatwg-fetch.js:486:3)
      at Object.<anonymous> (node_modules/jest-expo/src/setup.js:125:16)

经过几天的调试，我发现这与babel-jest的预处理器无法正常工作有关，即使我遵循其安装

After a few days debugging I found out this is related to babel-jest's pre-processor not working correctly, even though I followed their installation docs.

我仔细研究了一下，发现在 GitHub上有一种解决方法发出线程.

I dug around some more and found out that there's a workaround in this GitHub Issue thread.

实施解决方法，并在我的计算机上添加 babel-hoist babel.config.js，以便测试开始运行.

Implementing the workaround, plus adding babel-hoist to my babel.config.js, made so that the tests started running.

然而，杰斯特的举动却很奇怪，覆盖率数据也不正确(即使我们已经对其进行了测试，它也会将某些行视为未发现).

However Jest's behavior is all wonky and the coverage data is not correct (it counts some lines as uncovered, even though we do have tests for them).

我想知道如何正确配置Jest以使其与Expo SDK 32兼容.

I want to know how to configure Jest properly for compatibility with Expo SDK 32.

这些是相关的配置文件(设置为使用前面提到的解决方法).

These are the relevant config files (which are set to use the workaround mentioned previously).

"dependencies": {
    "@babel/preset-env": "^7.3.1",
    "@expo/vector-icons": "6.3.1",
    "expo": "^32.0.0",
    "prop-types": "15.6.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "sentry-expo": "~1.9.0"
    ...
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "babel-eslint": "9.0.0",
    "babel-plugin-jest-hoist": "^24.0.0",
    "babel-preset-expo": "^5.0.0",
    "enzyme": "3.8.0",
    "enzyme-adapter-react-16": "^1.8.0",
    "jest-expo": "^32.0.0",
    "metro-react-native-babel-preset": "^0.51.1",
    "react-dom": "^16.5.1",
    ...
  },
"jest": {
    "preset": "jest-expo",
    "transform": {
      "^.+\\.js$": "<rootDir>/jest.preprocessor.js"
    },
    "setupFiles": [
      "<rootDir>/src/jest.setup.js"
    ],
  ...
}

*省略了一些依赖关系.

module.exports = {
  presets: [
    'babel-preset-expo',
    'module:metro-react-native-babel-preset',
    'module:react-native-dotenv',
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
  sourceMaps: true,
  plugins: [
    'jest-hoist',
    '@babel/transform-react-jsx-source',
  ],
};

推荐答案

这是为我解决问题的原因:

This is what solved the problem for me:

• 首先，安装yarn.按照此链接获取说明.
• 第二，确保您的package.json看起来像这样:

• First thing, install yarn. Follow this link for instructions.
• Second, ensure your package.json looks something like this:

"dependencies": {
    "@expo/vector-icons": "9.0.0",
    "expo": "^32.0.0",
    "prop-types": "15.6.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    ...
  },

"devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "jest-expo": "^32.0.0",
    ...
  }
"scripts": {
    "test": "jest",
    ...
  },
"jest": {
    "preset": "jest-expo",
    "transform": {
      "^.+\\.js$": "babel-jest"
  },
}

• 第三，确保正确设置了babel.config.js.这是我的项目中运行Expo's SDK 32的项目之一:
• Third, ensure your babel.config.js is setup correctly. Here's the one from my project running Expo's SDK 32:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      'babel-preset-expo',
      'module:react-native-dotenv',
    ],
    sourceMaps: true,
    plugins: [
      '@babel/transform-react-jsx-source',
    ],
  };
};

• 最后，使用yarn安装软件包(yarn install)并运行测试yarn test.
• Lastly, use yarn to install your packages (yarn install) and to run your tests yarn test.

这篇关于如何配置Jest以与Expo SDK 32一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！