@25sprout/react-starter/template/src/components/atoms/List/__tests__/List.spec.js

25sprout web starter with React

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

import List from 'components/atoms/List';

import * as stories from './List.stories';

const testCases = Object.values(composeStories(stories)).map(Story => [
	// The ! is necessary in Typescript only, as the property is part of a partial type
	Story.storyName,
	Story,
]);
// Batch snapshot testing
test.each(testCases)('Renders %s story', async (_storyName, Story) => {
	const tree = await render(<Story />);
	expect(tree.baseElement).toMatchSnapshot();
});

const items = [
	{
		key: 1,
		value: 'Lee',
	},
	{
		key: 2,
		value: 'Mike',
	},
];

test('should have items property', () => {
	const { getByTestId } = render(<List items={items} />);

	expect(getByTestId('1')).toHaveTextContent('Lee');
});