3

i am trying to run a unit testing for my react-native component. My component seems complex. i tired all possible ways to get it done.

My CheckBox component wrapped with HOC withTheme

import { View, Text, Pressable, StyleSheet } from 'react-native'
import React, { useState } from 'react'
import { scale } from 'react-native-size-matters'
import MaterialIcons from 'react-native-vector-icons/dist/MaterialIcons'
import withTheme from 'Theme/withTheme'
import Label from 'Components/Label'
import testID from 'Utils/common'


function CheckBox({ theme: { colors }, label }) {
    const styles = style(colors)
    const [checked, setChecked] = useState(false)
    const onPress = () => {
        setChecked(!checked)
    }
    return (
        <Pressable onPress={onPress} style={styles.wrapper} {...testID(`CheckBox wrapper`)}>
            <View style={styles.iconWrapper} {...testID(`CheckBox wrapper check`)}>
                {checked && <MaterialIcons name="done" size={scale(15)} color={colors.black} />}
            </View>
            <View style={{ paddingHorizontal: scale(10) }} {...testID(`CheckBox Label Wrapper`)}>
                <Label text={label} style={{ fontSize: scale(14) }}  {...testID(`CheckBox label ${label}`)}/>
            </View>
        </Pressable>
    )
}

export default withTheme(CheckBox)
const style = StyleSheet.create((colors) => ({
    wrapper: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    iconWrapper: {
        backgroundColor: colors.primary,
        height: scale(25),
        width: scale(25), borderRadius: scale(4),
        justifyContent: "center",
        alignItems: 'center'
    }

}))

withTheme HOC Code

withTheme has hook useTheme

import React, { forwardRef } from 'react';
import { useTheme } from './ThemeProvider';

function withTheme(WrappedComponent, props) {

  return forwardRef(function (someProps, ref) {
    const { theme  } = useTheme(); 
    return (
      <WrappedComponent ref={ref} {...someProps} {...props} theme={theme} />
    );
  });
}

export default withTheme;

What i tried Tried mockcing HOC Tried mockcing withTheme hook Refered this Blog

test written

/* ---------- Packages Import ---------- */
import React from 'react';
import {render, cleanup, fireEvent} from '@testing-library/react-native';
import CheckBox from '../index';
import testID from 'Utils/common';

/* ---------- Components Import ---------- */
jest.mock('@react-native-async-storage/async-storage', () =>
  require('@react-native-async-storage/async-storage/jest/async-storage-mock'),
);
jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');
jest.mock('Theme/__mock__/withTheme'); 
jest.mock('Theme/__mock__/useTheme');

afterEach(cleanup);

describe('<CheckBox />', () => {
  it('should match the snapshot', () => {
    const rendered = render(<CheckBox  />).toJSON();
    expect(rendered).toMatchSnapshot();
  });

});

Error i am getting error i am getting

Any help would be appricated, Thank in advance

Aman Deep
  • 381
  • 4
  • 16
  • looks like mock for `useTheme` hook does not return what is expected. And why do you want to mock it? typically, wrapping component-under-test into appropriate provider would work much better than mocking all related HOCs and hooks in consistent way. – skyboyer Jan 01 '23 at 10:56

0 Answers0