Args mapping does not work on composed story from Storybook after Storybook update from 7 to 8

[quarhodron]

• @testing-library/react version: 16.0.0
• Testing Framework and version: jest 29.7.0
• DOM Environment: jsdom 29.7.0

Relevant code or config:

// Button.stories.tsx
export const Interactive: Story = {
  args: {
    label: 'InteractiveButton',
  },
  argTypes: {
    label: {
      options: ['Close', 'Open'],
      name: 'Write button label',
      mapping: {
        Close: 'MappedCloseButton',
        Open: 'MappedOpenButton',
      },
    },
  },
  render: (args) => {
    return <Button {...args} />;
  },
};

// Button.test.tsx
test('this label is expected to be mapped to value of MappedOpenButton. It is not. Check snapshots', () => {
  const InteractiveStory = composeStory(Interactive, meta);
  const { container } = render(<InteractiveStory label="Open" />);
  expect(container.firstChild).toMatchSnapshot();
});

// Button.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`tests this label is expected mapped to value of MappedOpenButton 1`] = `
<button
  class="storybook-button storybook-button--medium"
  type="button"
>
  Open
</button>
`

What you did:

I updated my Storybook dependencies from 7.5.1 to latest 8.

What happened:

All of the sudden args mapping stopped working on Storybook composed story.

Reproduction:

1. Go to https://stackblitz.com/edit/github-xzv4rz-e8be2j?file=src%2Fstories%2F__snapshots__%2FButton.test.tsx.snap
2. Wait until deps are installed
3. Run npm run storybook and type in "Write button label" input some values. Observe how it changes. Now change it to Open. See it was mapped to MappedOpenButton.
4. Now go to Button.test.tsx and check that label="Open" was not mapped to MappedOpenButton in Button.test.tsx.snap

Problem description:

Mapping is configured properly since if you run npm run storybook and type Open it is properly mapped to MappedOpenButton. But the mapping does not work while testing after Storybook update to latest v8 from 7.5.1.

Suggested solution:

Args mapping works as it was working with storybook dependencies on v7.

[MatanBobi]

Hi @quarhodron, thanks for opening this one.
Unfortunately, storybook testing library isn't maintained by us and everything related to that is managed by the storybook organization.
AFAIR, storybook testing library is not available in version 8 and you should now use storybook-test.
You can reach out to them in https://github.com/storybookjs/storybook/tree/next/code/lib/test

[quarhodron]

@MatanBobi I didn't mean https://www.npmjs.com/package/@storybook/testing-library. I meant @testing-library/react and it is used in the reproducible demo.
As you said storybook has a package @storybook/test but as far as I understand it uses a real browser for testing. I just need quick unit tests with jsdom to render and save snapshot. Looking at the docs of Storybook they recommend @testing-library/react for that.

[MatanBobi]

As you can see in the example you've shared, they aren't using render from React Testing Library, they're calling await InvalidForm.play();, this logic is storybook's logic. React Testing Library is only used to render React components.