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

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.

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

0 Answers0