0.57更新后，带有Typescript和Jest的React Native损坏了：无法找到相对于目录的预设“ module：metro-react-native-babel-preset”

Question

如果您在新的React版本0.57和TypeScript中将测试与Jest和Enzyme集成在一起，则它们将无法工作。复制步骤如下：

创建一个新的React Native项目：

react-native init MyApp -package "com.my.app" --template typescript && node MyApp/setup.js

安装所有与Jest和Enzyne相关的软件包：

npm install --save-dev react-dom enzyme enzyme-react-adapter-16 jest-fetch-mock ts-jest

添加玩笑配置：

"jest": {
  "preset": "react-native",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "transform": {
    "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
    "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  },
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
  "testPathIgnorePatterns": [
    "\\.snap$",
    "<rootDir>/node_modules/"
  ],
  "cacheDirectory": ".jest/cache",
  "setupFiles": [
    "./tests/setup.js"
  ]
}

添加文件tests/setup.js并包括以下配置：

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { NativeModules } from "react-native";

global.fetch = require("jest-fetch-mock"); // eslint-disable-line no-undef
jest.mock("react-native-config");
Enzyme.configure({ adapter: new Adapter() });

最后但并非最不重要的一点是，添加一个基本测试（App.test.tsx）来检查Jest和Enzyme是否起作用：

import React from "react";
import { shallow } from "enzyme";
import { View } from "react-native";
import App from "./App";

const createTestProps = props => ({
  ...props
});

describe("App", () => {
  describe("rendering", () => {
    let wrapper;
    let props;
    beforeEach(() => {
      props = createTestProps({});
      wrapper = shallow(<App {...props} />);
    });

    it("should render a <View />", () => {
      expect(wrapper.find(View)).toHaveLength(1);
    });
  });
});

如果您现在尝试运行测试，则会收到以下错误消息：

 FAIL  app/App.test.tsx
  ● Test suite failed to run

    Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "<Directory"

编辑

这似乎与Babel有关。

Answer 1

我在本期中找到了答案：https://github.com/facebook/metro/issues/242#issuecomment-421139247

基本上，将其添加到package.json中的Jest部分：

"transform": { "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js" }

Answer 2

在升级到0.57时遇到了类似的问题，我的package.json仍然包含babel-preset-react-native的条目（现已弃用metro-react-native-babel-preset）。我要做的就是

yarn remove babel-preset-react-native

然后

yarn add metro-react-native-babel-preset --dev

最后，请确保将.babelrc更改为

{
  "presets": ["react-native"]
}

到

{
  "presets": ["module:metro-react-native-babel-preset"]
}

可以找到更多信息here

Answer 3

如果我使用"presets": ["react-native"]，则生产/开发工作已中断，但测试仍在进行。

如果我使用"presets": ["module:metro-react-native-babel-preset"]，则测试已失败，但生产/开发正在正常工作。

不确定为什么会这样，但是如下所示的.babelrc解决方案对我来说既可以用于开发/生产，也可以用于测试。只需将env参数添加到您的.babelrc文件中即可。

"env": {
    "test": {
        "presets": ["react-native"]
    },
    "production": {
        "presets": ["module:metro-react-native-babel-preset"]
    },
    "development": {
        "presets": ["module:metro-react-native-babel-preset"]
    }
}