property className is not supported

[likern]

I've encountered a bug in my jest jests. I have a very simple test

test('when only icon name is provided', () => {
  render(<Tag iconName='home' />);
});

where Tag is defined as this

import 'styled-components/macro';
...
export const Tag = ({ label, iconName, iconColor, style }: TagProps) => {
  return (
    <View
      css={`
        align-self: flex-start;
        height: 44px;
        flex-direction: row;
        align-items: center;
        border-radius: 100px;
        border-width: 2px;
        border-color: rgba(68, 82, 95, 0.08);
      `}
      style={style}
    >
      {iconName !== undefined && (
        <SvgIcon
          css={`
            margin-left: 14px;
          `}
          color={`${iconColor !== undefined ? iconColor : '#262F56'}`}
          icon={['far', iconName]}
          size={24}
        />
      )}

      {label && (
        <Text
          css={`
            font-family: Gilroy-SemiBold;
            font-size: 17px;
            color: rgba(68, 82, 95, 1);
            text-align: ${iconName !== undefined ? 'left' : 'center'};
            text-align-vertical: top;
            margin-left: ${iconName !== undefined ? 4 : 0}px;
            margin-right: ${iconName !== undefined ? 20 : 0}px;
          `}
        >
          {label}
        </Text>
      )}
    </View>
  );
};

export default Tag;

iconName is directly forwarded into SvgIcon component, which has some assertions checking only valid properties are allowed

assert(
  Object.getOwnPropertyNames(otherProps).length === 0,
    `[ERROR]: properties [${Object.getOwnPropertyNames(
    otherProps
  )}] are not supported`
);

In tests I see this message

[ERROR]: properties [className] are not supported

which means somehow property className were provided into SvgIcon which is not supported by react-native. I think this is a bug in css-to-react-native which incorrectly transpiles css styles into className instead of style.

[likern]

className property's value is "Tag___StyledSvgIcon-sc-102s8o3-1 iqYFlc" which might be somehow relevant to "jest-styled-components" package.

But I'm not sure how all of these are working together.

[jacobp100]

You’ve filed this in the wrong project, but I don’t know enough about what you’re doing to point you to the right project. Sorry I can’t be of more help!