Patys/snap-it

Tool to automatically create snapshot boilerplate tests for React Native.

snap-it

This is a tool to create a snapshot for your component. You can use it to simply generate boilerplate file with all cases. Keep in mind that you should verify and add your own test cases.

Works only with TypeScript for now.

Usage:

Follow instalation guide and then:

yarn create-snapshot components/Search.tsx

Or you can use it directly without installing:

npx @patys/snap-it g components/Search.tsx

To save in the same directory use option: --direct=true

npx @patys/snap-it g components/Search.tsx --direct=true

Effect with direct: components/Search.tsx components/Search.test.tsx

Effect without direct: components/Search.tsx __tests__/Search.test.tsx

Installation:

yarn add --dev @patys/snap-it

Add to your package.json

{
  "scripts": {
    ...
    "create-snapshot": "yarn snap-it g "
    ...
  }
}

Example:

Your component:

// example/Search.tsx
import React from 'react';
import { View } from 'react-native';

interface Props {
  numberTest?: number;
  booleanTest?: boolean;
  stringTest?: string;
  anyTest?: any;
  functionTest?: () => void;

  requiredTest: string;
}

export default function Search({}: Props) {
  return <View />;
}

Effect:

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

import { Search } from '../example/Search.tsx';

describe('Search', () => {
  test('Snaphot for required props', () => {
    const props = {
      requiredTest: 'testing string',
    };
    const tree = render(<Search {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });

  test('Snaphot for numberTest', () => {
    const props = {
      requiredTest: 'testing string',

      numberTest: 123,
    };
    const tree = render(<Search {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });

  test('Snaphot for booleanTest', () => {
    const props = {
      requiredTest: 'testing string',

      booleanTest: true,
    };
    const tree = render(<Search {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });

  test('Snaphot for stringTest', () => {
    const props = {
      requiredTest: 'testing string',

      stringTest: 'testing string',
    };
    const tree = render(<Search {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });

  test('Snaphot for anyTest', () => {
    const props = {
      requiredTest: 'testing string',

      anyTest: {},
    };
    const tree = render(<Search {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });

  test('Snaphot for functionTest', () => {
    const props = {
      requiredTest: 'testing string',

      functionTest: jest.fn(),
    };
    const tree = render(<Search {...props} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});