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.
Follow instalation guide and then:
yarn create-snapshot components/Search.tsxOr you can use it directly without installing:
npx @patys/snap-it g components/Search.tsxTo save in the same directory use option: --direct=true
npx @patys/snap-it g components/Search.tsx --direct=trueEffect with direct: components/Search.tsx components/Search.test.tsx
Effect without direct: components/Search.tsx __tests__/Search.test.tsx
yarn add --dev @patys/snap-itAdd to your package.json
{
"scripts": {
...
"create-snapshot": "yarn snap-it g "
...
}
}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();
});
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent