Usage with Storybook (Component Story Format)

I’m trying to use new Component Story Format of Storybook with Testing library.

The goal is to import a story as an ES6 module without having to redefine its context.

With this component:

@Component({
  selector: 'app-root',
  template: `<input [type]="type">`
})
export class AppComponent {
  type: string;
}

I create 2 stories with Component Story Format to display two types of input.

export default {
  title: 'AppComponent'
};

export const defaultInput = () => ({
  component: AppComponent,
  props: {
    type: 'text'
  }
});

export const rangeInput = () => ({
  component: AppComponent,
  props: {
    type: 'range'
  }
});

With Testing Library, i would expect to be able to test the type from each story without having to define the type in the test. I’m aware my issue comes from the way i use render() as i call the component property of the story and at this point no property is defined for this component. But i can’t find a way to render the component and its context just by calling ‘defaultInput()’ or ‘rangeInput()’. Is there a solution?

describe('AppComponent', () => {
  // not working test : the type is not defined
  it('should render a custom title', async () => {
    const component = await render(defaultInput().component);
    expect(component.fixture.componentInstance.type).toBe('text');
  });
  // working example as the property is defined into the test context
  it('should render a custom title', async () => {
    const component = await render(defaultInput().component, {
      componentProperties: {
        type: 'text'
      }
    });
    expect(component.fixture.componentInstance.type).toBe('text');
  });
  // not working test : the type is not defined
  it('should render a custom title', async () => {
    const component = await render(rangeInput().component);
    expect(component.fixture.componentInstance.type).toBe('range');
  });
  // working example as the property is defined into the test context
  it('should render a custom title', async () => {
    const component = await render(rangeInput().component, {
      componentProperties: {
        type: 'range'
      }
    });
    expect(component.fixture.componentInstance.type).toBe('range');
  });
});

Link to the project on Github.

[shilman]

@lkashef Thanks for the mention.

We’re currently bridging the gap between storybook and React testing library: https://github.com/storybookjs/storybook/issues/10145

I’m sure some of these utilities (e.g. decorator/parameter/arg composition) can be applied to all frameworks.

As for a more natural way to test stories, we’re still figuring that out. Suggestions welcome!

[geromegrignon]

Thanks a lot, i was thinking to use this way too.