web-dev-qa-db-ja.com

React TypeScriptとJestのネイティブは、0.57更新後に壊れています。ディレクトリに関連するプリセット "module：metro-react-native-babel-preset"が見つかりませんでした

新しい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構成を追加します。

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

最後に、JestとEnzymeが機能するかどうかを確認するための基本テスト（App.test.tsx）を追加します。

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"

編集

これはバベルと関係があるようです。

typescriptreact-nativebabeljsjestjsenzyme
16
J. Hesters

私はこの問題でここに答えを見つけました： https://github.com/facebook/metro/issues/242#issuecomment-421139247

基本的に、これをpackage.jsonのJestセクションに追加します。

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

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"]
}

より多くの情報を見つけることができます こちら

6
Robbie Milejczak

"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"]
    }
}
0
Cüneyt Aliustaoğlu