Trying to detect host component names triggered the following error

[Sahand-Stefan]

Ask your Question

beforeEach(() => {
// Render the component with default props for each test
component = render(<LActButton {...defaultProps} />)
})

I am using the testing library version : ^12.1.2
and the react native : o.71.8

And i get the following message for rendering my component
Trying to detect host component names triggered the following error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 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.

[pierrezimmermannbam]

Hello @Sahand-Stefan! If you get this error message then it means that there has to be some problem with your test setup that prevents the library from working correctly. Based on the information you gave I can't see what the problem really is, could you provide a minimal repro? Or at least provide your jest config and jest setup files?

[mdjastrzebski]

@Sahand-Stefan Pierre made good points about the setup issue, and the need to provide repro repository so that we can diagnose such issue.

I would add following two thoughts:

1. Perhaps you are using jest-expo package to test your code using React Native Web. If so, more details here.
2. [nit] Rendering components in beforeEach is generally considered a bad practice. More details here.

[Sahand-Stefan]

Thanks guys
I solved this issue with mocking each related package or function locally in the test file
The jest config couldn't read the mocs from a public global file

[pierrezimmermannbam]

@najumasad can you please provide a repro or give the code for your jest.config.js and package.json files?

[mdjastrzebski]

Perhaps it would be useful to use jest.requireActual inside detectHostComponentNames to support cases when user mocks react-native. @pierrezimmermannbam wdyt?

[pierrezimmermannbam]

Perhaps it would be useful to use jest.requireActual inside detectHostComponentNames to support cases when user mocks react-native. @pierrezimmermannbam wdyt?

I'm not sure it would make a difference. If we use host component names that do not match the mocks then test will fail no? And the error will be more difficult to debug because queries will fail whereas here we know that there is an issue with the test setup. Moreover I think we should recommend not mocking react-native manually and using the preset instead, but maybe that's not really clear from the docs right now? I'm looking at the installation guide as well as the readme and the preset is not directly mentioned, it's only included in a snippet in the Additional Jest matchers section, which may lead to think that it's optionnal?

[mdjastrzebski]

@pierrezimmermannbam With #1425 PR things get slightly improved as users should be able to mock whole react-native package and use renderHook.

[mdjastrzebski]

Added Troubleshooting Guide entry about following error:

"Trying to detect host component names triggered the following error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.":