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();
});
});
Any help would be appricated, Thank in advance