Home > Software design >  Testing an Icon react native component with Jest
Testing an Icon react native component with Jest

Time:10-22

I am checking the Jest report and I have a bunch of Icons that show as not tested in this report. How can I properly test the rendering of the Icon inside of this ArrowDownIcon component using Jest? Can't find anything related in the docs, only testing buttons that have some text.

import React from 'react';
import {Icon} from '@ui-kitten/components';

const ArrowDownIcon = (
  props: any = {},
  styles: any = {},
  fill: string = '#000',
) => <Icon style={styles} fill={fill} name="arrow-down" {...props} />;

export default ArrowDownIcon;

CodePudding user response:

One way is just to use snapshot for trivial components.

A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test.

import React from 'react';
import renderer from 'react-test-renderer';
import ArrowDownIcon from '<path>';

test('renders correctly', () => {
  const tree = renderer.create(<ArrowDownIcon />).toJSON();
  expect(tree).toMatchSnapshot();
});

See Snapshot Testing for details.

  • Related