Interaction testing in Storybook play function and, reuse to assert in Jest

Counter.spec.ts

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

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

const { ClickOnce, ClickTwice } = composeStories(stories);

test('Click once', () => {
  const { container, getByRole } = render(<ClickOnce />);
  ClickOnce.play({ canvasElement: container });
  expect(getByRole<HTMLInputElement>('spinbutton').value).toBe('1');
});

test('Click twice', () => {
  const { container, getByRole } = render(<ClickTwice />);
  ClickTwice.play({ canvasElement: container });
  expect(getByRole<HTMLInputElement>('spinbutton').value).toBe('2');
});

Counter.stories.tsx

import type { ComponentMeta, ComponentStoryObj } from '@storybook/react';
import { fireEvent, within } from '@storybook/testing-library';

import { Counter } from './Counter';

export default {
  title: 'counter',
  component: Counter,
} as ComponentMeta<typeof Counter>;

type Story = ComponentStoryObj<typeof Counter>;

export const ClickOnce: Story = {
  play({ canvasElement }) {
    const canvas = within(canvasElement);
    fireEvent.click(canvas.getByRole('button'));
  },
};

export const ClickTwice: Story = {
  play(context) {
    ClickOnce.play!(context);
    ClickOnce.play!(context);
  },
};

Counter.tsx

import type { ReactElement } from 'react';
import { useState } from 'react';

export function Counter(): ReactElement {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <input type="number" readOnly value={counter} />
      <button
        type="button"
        onClick={() => {
          setCounter(v => v + 1);
        }}
      >
        +
      </button>
    </div>
  );
}