Trouble with Testing Certain Components

[andreilupu-plt]

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

I attempted to develop my composite components using your example and to test them. Unfortunately, some components cannot be tested without mocking them.

The components facing issues are as follows:

Button, Chip, FAB, PricingCard, SpeedDial, Tab, TabItem

Expected behavior

I'm expecting to not be necessary to mock those components.

Describe the bug

I attempted to develop my composite components using your example and to test them. Unfortunately, some components cannot be tested without mocking them.

The components facing issues are as follows:

Button, Chip, FAB, PricingCard, SpeedDial, Tab, TabItem

For all these components, you encounter the same 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.

I have added the libraries to transformIgnorePatterns like |@rneui/*.
Other components, such as Text, didn't encounter any issues.

Steps To Reproduce

1. Create RaisedButton.tsx

import React from 'react';
import { Button } from '@rneui/themed';

const RaisedButton = props => <Button raised {...props} />;

export default RaisedButton;

2. Create test RaisedButton.test.tsx

import React from 'react';
import { renderWithThemeProvider } from '../../../utils/testHelper';
import RaisedButton from './RaisedButton';

describe('RaisedButton', () => {
  it('should render correctly', () => {
    const { toJSON } = renderWithThemeProvider(<RaisedButton />);
    expect(toJSON()).toMatchSnapshot();
  });
});

3. Run test

yarn test RaisedButton

renderWithThemeProvider - implementation

import React, { ReactElement } from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { RenderAPI, render } from '@testing-library/react-native';
import { ThemeProvider } from '@rneui/themed';
import { theme } from '../theme';

export const renderWithThemeProvider = (children: ReactElement): RenderAPI =>
  render(<ThemeProvider theme={theme}>{children}</ThemeProvider>);

Screenshots

Your Environment

`npx @rneui/envinfo`

## Global Dependencies:

 - expo-cli : 6.3.8

## Local Dependencies:

 - @rneui/base : ^4.0.0-rc.8
 - @rneui/themed : ^4.0.0-rc.8
 - @types/react : ~17.0.21
 - @types/react-native : ~0.64.12
 - expo : ^43.0.0
 - react : 17.0.1
 - react-native : 0.64.4