Support for custom render functions in portable stories

[kylegach]

Is your feature request related to a problem? Please describe.

When using portable stories, you must set up the testing environment with setProjectAnnotations:

import { render as testingLibraryRender } from '@testing-library/react';

setProjectAnnotations([
  // ...
  { testingLibraryRender },
]);

Simplified to highlight relevant portion

The testingLibraryRender option either does not or does not clearly support:

1. Configured Testing Library render functions
2. Non-Testing Library render functions

Describe the solution you'd like

For problem (1)

You can define your own configured render like so:

import { queries, render as testingLibraryRender } from '@testing-library/react';
import * as tableQueries from 'my-table-query-library'

function configuredRender(element, options) {
  return testingLibraryRenderer(
    element,
    {
      // Opinionated default config
      queries: {...queries, ...tableQueries},
      // Overrides
      ...options
    }
  );
})

setProjectAnnotations([
  // ...
  { testingLibraryRender: configuredRenderer },
]);

Simplified to highlight relevant portion

But perhaps this should/could be more straightforward or clearly available?

For problem (2)

There's an experimental renderToCanvas property to allow users to define their own render function that's not tied to Testing Library. For example:

import { render } from 'your-renderer';

setProjectAnnotations({
  renderToCanvas: ({ storyFn }) => {
    const Story = storyFn();
    
    // Svelte
    render(Story.Component, Story.props);
    
    // Vue
    render(Story);
    
    // or for React
    render(<Story/>);
  },
});

If usage is high for this, it should be made stable.

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

no

Additional context

No response