Testing with Jest

[thiagonzalez]

Hello guys,

We started using css.gg on our React/React Native Design System and it worked perfectly. On the other hand, when we tried to test it using Jest and React Testing Library all the components using this lib broke.

We don't have CSS files on our project, because we use styled-components for styling, so we don't have a CSS rule on our webpack.

test.tsx:

import * as React from 'react';
import { render } from '@testing-library/react-native';

import Button from '../index';

describe('Button Test', () => {
  it('should render the button', () => {
    const { toJSON } = render(<Button />);

    expect(toJSON()).toMatchSnapshot();
  });
});

component.tsx:

import React from 'react';
import { ButtonProps } from './types';
import { ButtonComponent, TextComponent, Wrapper } from './styles';
import { SVG } from 'css.gg';

const Button = ({ onPress, variant, text, iconName, iconMessage }: ButtonProps) => (
  <ButtonComponent variant={variant} onPress={onPress} activeOpacity={1}>
    {text && !iconName && (
      <Wrapper iconName={iconName}>
        <TextComponent>{text}</TextComponent>
      </Wrapper>
    )}
    {iconName && !text && (
      <>
        <div className="tooltip">
          <svg viewBox="0 0 24 24">
            <use xlinkHref={SVG + `#gg-${iconName}`} />
          </svg>
          <span className="tooltiptext">{iconMessage}</span>
        </div>
      </>
    )}
    {iconName && text && (
      <>
        <Wrapper iconName={iconName}>
          <TextComponent>{text}</TextComponent>
        </Wrapper>
        <svg viewBox="0 0 24 24">
          <use xlinkHref={SVG + `#gg-${iconName}`} />
        </svg>
      </>
    )}
  </ButtonComponent>
);

export default Button;

Any clues? Thank you :)

--

Edit: we are using react-native-web to organize what is native and what is web. We have an alias mapped to react-native to call react-native-web instead.