RN 0.74 breaking testing library

mrousavy commented 3 months ago

Describe the bug

Hey all!

I tried to run jest with react-native-testing-library, but it fails on RN 0.74.

  ● functional updates to hooks

    Trying to detect host component names triggered the following error:

    getInspectorDataForViewAtPoint should not be used if React DevTools hook is not injected

    There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
    Please check if you are using compatible versions of React Native and React Native Testing Library.

      62 |   };
      63 |
    > 64 |   render(<Component />);
         |         ^
      65 |
      66 |   const button = screen.getByTestId('button');
      67 |

      at detectHostComponentNames (node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:54:11)
      at detectHostComponentNames (node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:27:30)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:46:40)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:29:10)
      at Object.<anonymous> (src/__tests__/hooks.test.tsx:64:9)

Expected behavior

I expect it to run tests.

Steps to Reproduce

Create a RN 0.74 project

Add this code:

const Component: React.FC = () => {

  return (
    <>
      <Button
        testID="button"
        title="something"
      />
    </>
  );
};

render(<Component />);

See error

Screenshots

Versions

"devDependencies": {
  "@jamesacarr/eslint-formatter-github-actions": "^0.2.0",
  "@react-native-community/cli-types": "^14.0.0-alpha.1",
  "@react-native/eslint-config": "^0.75.0-main",
  "@release-it/conventional-changelog": "^8.0.1",
  "@types/jest": "^29.5.5",
  "@types/react": "^18.2.70",
  "del-cli": "^5.1.0",
  "eslint": "^8.51.0",
  "@testing-library/react-native": "^12.4.3",
  "eslint-config-prettier": "^9.0.0",
  "eslint-plugin-prettier": "^5.0.1",
  "jest": "^29.7.0",
  "prettier": "^3.0.3",
  "react": "18.2.0",
  "react-native": "0.73.0",
  "react-native-builder-bob": "^0.23.2",
  "react-test-renderer": "18.2.0",
  "release-it": "^17.1.1",
  "typescript": "^5.2.2"
},

mdjastrzebski commented 3 months ago

@mrousavy it's seems that you have more complicated setup that RN 0.74 from template. The error mentions some getInspectorDataForViewAtPoint function related to DevTools.

Does it happens also on RN straight from CLI? If no please post minimal repro.

BTW you dev deps mentions: "react-native": "0.73.0", not 0.74

mrousavy commented 3 months ago

Sure - I'll create a minimal repro in a sec!
Ah yeah whoops the devDeps are wrong - I tried downgrading to react-native 0.73 and that worked fine, but react-native 0.74 is what I currently have and that's not working. https://github.com/mrousavy/react-native-mmkv/blob/e38c0167339422106728c496ebff006c09b3fcc4/package.json#L86

mdjastrzebski commented 3 months ago

@mrousavy no worry with minimal repro, I've been able to reproduce it locally.

Findigs:

Root cause seems to be Modal imported from react-native. Trying to render it, even under React Test Renderer, throws:
Unfortunately we render Modal (and other basic host components like View, etc) it at the beginning of every render to get it's host component name, therefore all renders fail. If I disable it then it works fine.

mdjastrzebski commented 3 months ago

@pierrezimmermannbam maybe it's time to ditch detectHostComponents in favour of just hardcoding component names & having our own internal tests that the name are still valid.

It was supposed to allow use to "automatically" adapt to RN changes but it causes some complex issue from time to time, as well make all user tests run slower. Wdyt?

mdjastrzebski commented 3 months ago

Reported upsteam to RN as https://github.com/facebook/react-native/issues/43678

pierrezimmermannbam commented 3 months ago

@mdjastrzebski I don't know, this issue for instance is not caused directly by the fact that we detect host names so I don't really understand your point that it causes complex issues? I like the fact that it detects early any config issue, it allows to tell sooner when users open issues wether it's a problem in their tests or in their setup / a compat issue with RN. Regarding the fact that it makes tests slower that's a valid point, I think I tested that, I don't remember exactly but I believe i found the difference to be negligible but we could run a new benchmark to make sure of that. We could also get rid of the line in the error message that says " Trying to detect host component names triggered the following error:" because it doesn't give any explanation and is rather confusing

zhiqingchen commented 2 months ago

    /Users/runner/work/react-native-echarts/react-native-echarts/node_modules/react-native/src/private/specs/components/DebuggingOverlayNativeComponent.js: Unsupported param type for method "highlightTraceUpdates", param "updates". Found $ReadOnlyArray

    There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
    Please check if you are using compatible versions of React Native and React Native Testing Library.

      492 |       const RNGHChart = gestureHandlerRootHOC(Chart);
      493 |       const gesture = jest.fn();
    > 494 |       render(
          |             ^
      495 |         <RNGHChart
      496 |           Component={Component}
      497 |           useRNGH

      at detectHostComponentNames (node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:54:11)
      at detectHostComponentNames (node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:27:30)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:46:40)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:29:10)
      at Object.<anonymous> (src/__tests__/chart.test.tsx:494:13)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
      at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
      at node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7
      at Object.<anonymous> (node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12)

Can the latest version work with RN 0.74? I encountered the above problem.

mdjastrzebski commented 2 months ago

Closing as the root issues is resolved upstream.

@zhiqingchen check this comment for solution to your issue.

zhiqingchen commented 2 months ago

Closing as the root issues is resolved upstream.

@zhiqingchen check this comment for solution to your issue.

I change @react-native/babel-preset to 0.74.81. it works, thanks.

ncote3 commented 2 months ago

I am still having this issue, even inside components not using the Modal.

Dependency Versions:

    "react-native": "0.74.1",
    "@react-native/babel-preset": "0.74.83",
    "@react-native/eslint-config": "0.74.83",
    "@react-native/metro-config": "0.74.83",
    "@react-native/typescript-config": "0.74.83",
    "@testing-library/react-native": "12.5.0",
    "babel-plugin-module-resolver": "^5.0.2",
    "react-test-renderer": "18.3.1",
    "react": "18.3.1",

Babel.config.js:

module.exports = {
  presets: ['module:@react-native/babel-preset'],

Test Failure Message:

 FAIL  __tests__/components/molecules/dir/dir/StepByStepSubmitReview.test.tsx
  ● StepByStepSubmitReview › renders correctly

    Trying to detect host component names triggered the following error:

    /Users/dir/code/app/node_modules/react-native/src/private/specs/components/AndroidSwitchNativeComponent.js: Cannot read properties of null (reading 'declarations')

    There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
    Please check if you are using compatible versions of React Native and React Native Testing Library.

      56 |     const mockOnSubmit = jest.fn();
      57 |
    > 58 |     const { toJSON, getByAccessibilityHint } = render(
         |                                                      ^
      59 |       <StepByStepSubmitReview onSubmit={mockOnSubmit} />
      60 |     );
      61 |

      at detectHostComponentNames (node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:54:11)
      at detectHostComponentNames (node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:27:30)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:46:40)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:29:10)
      at Object.<anonymous> (__tests__/components/molecules/StepByStepTakeover/StepByStepSubmitReview/StepByStepSubmitReview.test.tsx:58:54)

Any help would be greatly appreciated!!

callstack / react-native-testing-library