I am trying to use storybook with cypress on an angular app for component testing .My need is to create stories for angular components and use them in cypress .In React we can use ComposeStories function to get the story and mount them in Cypress .However i did not see any method to import stories into cypress in @storybook/Angular. I couldn’t find more details in official documentation as well.
React way of importing Stories
#Example of Cypress component tests ,stories imported from storybook
import { mount } from '@cypress/react18';
import { composeStories } from '@storybook/react';
import * as stories from '../*.stories.tsx';
const { Basic } = composeStories(stories);
describe('component test', () => {
it('test1', () => {
mount(<Basic {...Basic.args} />);
cy.get('#button').should('be.visible');
});
There is a way to integrate both storybook and cypress in angular by running storybook as a separate host and use each story as iframe . But this needs storybook to run as a separate app which is ideal for e2e test cases .
https://storybook.js.org/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests#with-cypress
Could anyone please suggest on this?