React Native Jest error with ".jsx" extension

30 views Asked by At

I am trying to test a component using jest with react native (no expo) but the test only passes when the component has a .js extension and most of my components have .jsx extension, how can i configure jest to work with .jsx extensions?

Here is the error

 ● Test suite failed to run
                                                                                                                             
Must use import to load ES Module: C:\Users\DANIEL\Desktop\PianoBase\App.jsx

  1 | import { render } from "@testing-library/react-native";
> 2 | import App from "../App";
    | ^
  3 |
  4 | let component;
  5 |

  at Runtime.requireModule (node_modules/jest-runtime/build/index.js:850:21)
  at Object.require (__tests__/App-test.js:2:1)

Here is my component

import { Text } from "react-native";

function App() {
  return (
    <Text> Hello Workd </Text>
  );
}

export default App;

Here is my test

import { render } from "@testing-library/react-native";
import App from "../App";

let component;

describe("<App />", () => { 
  beforeEach(() => {
    component = render(<App />);
  });

  it("Renderizado correctamente", () => {
    expect(component).toBeDefined();
  });
});

Here is my package.json

{
  "name": "PianoBase",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
  },
  "dependencies": {
    "eslint-plugin-jest": "^27.6.3",
    "react": "18.2.0",
    "react-native": "0.72.7",
    ...
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@testing-library/react-native": "^12.4.3",
    "babel-jest": "^29.7.0",
    "jest": "^29.7.0",
    "metro-react-native-babel-preset": "0.76.8",
    "react-test-renderer": "^18.2.0",
    ...
  },
  "engines": {
    "node": ">=16"
  }
}

Here is my jest.config.js

module.exports = {
  preset: "react-native",
  moduleFileExtensions: ["js", "jsx"],
  testEnvironment: "node",
  // transform: {"^.+\\.js$": "babel-jest"},
  transform: {},
  extensionsToTreatAsEsm: [".jsx"],
};

Here is my babel.config.js

module.exports = {
  presets: [
    ["@babel/preset-env", {modules:false, targets: {node: "current"}}],
    "module:metro-react-native-babel-preset",
  ],
  plugins: [
    "react-native-paper/babel",
    "react-native-reanimated/plugin",
  ],
};
0

There are 0 answers