react native unit test: received value must be an HTMLElement or an SVGElement - react-native

Question

I am new to react native (expo) and to unit testing. I have been trying to test the style of a custom text component but many of the jest matchers aren't working.
This is the custom text component:
import { styled } from 'nativewind';
import React from 'react';
import type { TextProps } from 'react-native';
import { StyleSheet, Text as NNText } from 'react-native';
const SText = styled(NNText);
export interface CustomTextProps extends TextProps {
variant?: keyof typeof textVariants;
className?: string;
}
export const textVariants = {
//.....
};
export const Text = ({
variant = 'md',
className = '',
style,
children,
...props
}: CustomTextProps) => {
return (
<SText
className={`
${textVariants[variant]}
${className}
`}
style={StyleSheet.flatten([
{ writingDirection: isRTL ? 'rtl' : 'ltr' },
style,
])}
{...props}
>
{children}
</SText>
);
};
And this is the testing code:
import '#testing-library/jest-native/extend-expect';
import { render, screen } from '#testing-library/react-native';
import { CustomTextProps, Text } from '../text';
describe('text component', () => {
const renderComponent = (props: CustomTextProps) =>
render(<Text {...props} />);
it('should accept variant and className props', async () => {
renderComponent({
variant: 'xs',
className: 'bg-primary-50',
children: 'tested text',
});
const text = screen.getByText('tested text');
expect(text).toBeTruthy();
expect(text).toHaveStyle({ fontSize: 16 }); //error is here
});
});
This is the error I'm getting
expect(received).toHaveStyle()
received value must be an HTMLElement or an SVGElement.
Received has type: object
Received has value: {"_fiber": {"_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Function Component], "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 0, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": [Component], "subtreeFlags": 0, "tag": 1, "treeBaseDuration": 0, "type": [Function Component], "updateQueue": [Object]}}
18 | expect(text).toBeTruthy();
19 |
> 20 | expect(text).toHaveStyle({ fontSize: 16 });
| ^
21 | });
22 | });
23 |
at __EXTERNAL_MATCHER_TRAP__ (node_modules/expect/build/index.js:342:30)
at Object.toHaveStyle (node_modules/expect/build/index.js:343:15)
at Object.<anonymous> (src/ui/core/__test__/text.test.tsx:20:18)
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 tryCallTwo (node_modules/promise/lib/core.js:45:5)
at doResolve (node_modules/promise/lib/core.js:200:13)
at new Promise (node_modules/promise/lib/core.js:66:3)
I have tried to work with jest native and avoid dom matchers but even those don't work.