React Native with Typescript 和 Jest 在 0.57 更新后被破坏:找不到预设“module:metro-react-native-babel-preset"；相对于目录 [英] React Native with Typescript and Jest is broken after 0.57 Update: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory

问题描述

如果在新的 React 0.57 版和 TypeScript 中将测试与 Jest 和 Enzyme 集成在一起，它们将不起作用.以下是重现的步骤:

If you integrate test with Jest and Enzyme in the new React Version 0.57 and TypeScript, they won't work. Here are the steps to reproduce:

创建一个新的 React Native 项目:

Create a new React Native project:

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

安装所有 Jest 和 Enzyne 相关的包:

Install all Jest and Enzyne related packages:

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

添加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 并包含以下配置:

Add a file tests/setup.js and include the following configuration:

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 是否有效:

Last but not least add a basic test (App.test.tsx) to check if Jest and Enzyme work:

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);
    });
  });
});

如果你现在尝试运行测试，你得到的错误信息是:

If you now try to run the test, the error message you get is:

 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 有关系.

Edit

It seems like this has something to do with Babel.

推荐答案

我在这个问题中找到了答案:https://github.com/facebook/metro/issues/242#issuecomment-421139247

I found the answer here in this issue: https://github.com/facebook/metro/issues/242#issuecomment-421139247

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

Basically, add this to your Jest section in package.json:

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

这篇关于React Native with Typescript 和 Jest 在 0.57 更新后被破坏:找不到预设“module:metro-react-native-babel-preset"；相对于目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！