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

metro-react-native-babel-preset
react native typescript
jest typescript
jest config typescript
cannot find module:metro-react-native-babel-preset

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:

Create a new React Native project:

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

Install all Jest and Enzyne related packages:

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

Add the jest configuration:

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

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

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"
Edit

It seems like this has something to do with Babel.

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

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

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

RN: jest Couldn't find preset “module:metro-react-native-babel , As part of this upgrade the majority of our jest tests have broken due to I've been keeping a running list of issues/fixes when upgrading from RN 0.54 to 0.57. Since using this feature is ok in react-native, one would like jest tests to embrace it. using Typescript / ts-jest transform issue w/ default exports� React Native recently released version 0.57 which provides TypeScript support out of the box 🙌🏻. Even though TypeScript support is included, you still have to do a bit of manual setup to get

had a similar issue when upgrading to 0.57, my package.json still contained an entry for babel-preset-react-native (which is now deprecated in favor of metro-react-native-babel-preset). All I had to do was

yarn remove babel-preset-react-native

and then

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

Lastly, make sure you change your .babelrc from

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

to

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

More info can be found here

Jest transpiling from "jest/preprocessor.js" broken � Issue #22175 , Luckily, since version 0.57 React Native ships with TypeScript support It is an update and an enhancement for the instructions of an older article of mine. In addition to Jest, we will also go into detail on how to set up linting,� Broken with react-native@0.57 due to packager we will update the docs explaining the issue. I am using RN 0.57's seamless typescript approach so I am not

If I use "presets": ["react-native"] then production/development is broken but tests are working.

If I use "presets": ["module:metro-react-native-babel-preset"] then tests are broken but production/development is working.

Not sure why it's like that but a .babelrc solution for me like below works both for development/production and tests. Just add env parameter to your .babelrc file.

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

Using TypeScript With React Native | by Jan Hesters, <anonymous> (node_modules/vue-jest/lib/compilers/babel-compiler.js:1:15) It's .. React Native with Typescript and Jest is broken after 0.57 Update: Couldn't� Just as an update for anyone who found this useful: Using react-native's custom preprocessor remains a non-workable solution for me on RN 0.57 (due to it not hoisting calls to jest.mock as I mentioned above. After following the upgrade instructions I was able to get jest working by changing my .babelrc to babel.config.js. However, that then

Jest - 绵阳斯懿新材料科技有限公司, jest.mock() not mocking module in Babel 7 and React-Native 0.56 (Not the sarcasm here) I could update RN, React to the latest and make my app compile and work, but the tests (jest) are not working anymore. update to the latest version, that meant updating React Native (Since the latest SDK uses RN 0.57) and Babel. 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 ; What is the Record type in typescript? Aliasing with Webpack 4 and awesome-typescript loader not working

setting up ts-jest for react typescript project - reactjs - html, We heard your feedback regarding the React Native upgrade process and we Android support in 0.59 has been cleaned up following Google's latest wanted to suggest a cherry-pick (like for 0.57.8 and all its previous versions). so we couldn't implement this on the WebView React Native component. 23 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 Sep 17 '18 23 Eclipse - Ignore Entire Directories Jun 9 '09

Blog � React Native, This will install the latest version of React Native (currently 0.57.4) into the ReactNativeTypeScript folder. Change into To fix this, open Android Studio, and create a new AVD. You can do this by Choose a name, select Refresh Token and click Done. Note your Next, put the following into jest.config.js :. 18 React Navigation V2: Difference between navigation.push and navigation.navigate Jun 28 '18 18 Firebase Cloud Messaging + Android: Priority of silent notifications Apr 12 '18 17 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 Sep 15 '18

Comments
  • For anyone who finds this trying to resolve Unexpected import... errors when using react-test-renderer, the Medium article in the accepted answer is the only solution that got my tests running.
  • Awesome! This solution did it for me
  • I wasn't looking for a solution for TypeScript, but this fixed the same error message on my standard Jest testing. Thanks!
  • Works perfectly! Thank you!
  • Thanks a lot bro.. you saved my day!
  • This is deprecated in versions of more than 0.61.x. If you write this line tests will be broken in them. stackoverflow.com/questions/56814268/…
  • Thank you for sharing! I also found a way to solve this keeping "react-native" as the preset setting.