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

问题描述

我有一个 Expo 应用并且使用 SDK 28.我的团队决定我们应该更新到最新版本，这意味着更新 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 的预处理器无法正常工作有关，即使我遵循了他们的安装 docs.

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.

然而，Jest 的行为很不稳定，覆盖率数据也不正确(尽管我们确实对它们进行了测试，但它会将某些行视为未覆盖).

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 的 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屋！