Unable to test my component with ReadMore imported

[Garytophatter]

<ReadMore> component works fine but I have trouble passing our unit tests, as shown below. I tried to mock this component but without much success. Do you know what is going on?

[Fawaz Ahmed]

@Garytophatter I have found a solution mentioned here. In your package.json file you will see:

"jest": {
  "preset": "react-native"
}

replace it with

"jest": {
  "preset": "react-native",
  "transform": {
    "^.+\\.(js|jsx)?$": "babel-jest"
  },
  "transformIgnorePatterns": [
    "!node_modules/react-runtime"
  ]
}

Now run your tests and verify.
This will resolve the import issue with jest.
Give it a try! Also I'd appreciate if you can acknowledge whether it works or not.

[Garytophatter]

Unfortunately, I didn't see the line you mentioned in our package.json. I just saw "jest": "^24.5.0".

[Fawaz Ahmed]

@Garytophatter I created a new react native project and I could see it. Nevertheless you can simply add this in your package.json:

"jest": {
  "preset": "react-native",
  "transform": { "^.+\\.(js|jsx)?$": "babel-jest" },
  "transformIgnorePatterns": [ "!node_modules/react-runtime" ]
}

[Garytophatter]

I added these lines to the package.json and yarn install, but the test is still failing. Will look into this more.

[Fawaz Ahmed]

@Garytophatter can you share the error ?
Also make sure the package babel-jest is also installed

[Garytophatter]

I tried mocking this component in the test file, and it ended up working. Thanks for your help!

[Fawaz Ahmed]

That's great news @Garytophatter . Also if you can share how you managed to resolve this issue, that'll be very helpful. Thanks 👍

[Garytophatter]

I added this line to mock the component and resolved the issue:

  jest.mock('@fawazahmed/react-native-read-more', () => ({
     ReadMore: jest.fn(),
  }));