Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Nesting describe calls breaks the display of tests in storybook #18

Open
ndelangen opened this issue Nov 23, 2016 · 3 comments
Open

Nesting describe calls breaks the display of tests in storybook #18

ndelangen opened this issue Nov 23, 2016 · 3 comments

Comments

@ndelangen
Copy link
Collaborator

ndelangen commented Nov 23, 2016

I've extracted my tests into a separate file using this method: #17

/.storybook/config.js

import './test-register'

/.storybook/test-register.js

const {
  after: afterAll,
  before: beforeAll,
  afterEach,
  beforeEach,
  it,
  specs,
  describe
} = require('storybook-addon-specifications');
const expect = require('expect');

const additions = { expect, afterAll, afterEach, beforeAll, beforeEach, it, specs, describe };

Object.assign(global, additions);
module.exports = additions;

/src/Component/Component.stories.js

import React from 'react';
import Component from './Component';
import { storiesOf, action } from '@kadira/storybook';

storiesOf('Component', module)
  .addDecorator((story) => {
    specs(() => require('./Component.test'));
    return story();
  })
  .add('with text', () => (
    <Component>Amazing</Component>
  ));

Now with this Component.test.js it works:

import React from 'react';
import Component from './Component';
import { mount } from 'enzyme';

const name = 'Component';

describe(name, () => {
  it('Should be awesome', () => {
    const output = mount(<Component>Awesome</Component>);
    expect(output.text()).toContain('Awesome');
  });
});

export { name as default };

But when I nest multiple describes like this: it no longer works.

import React from 'react';
import Component from './Component';
import { mount } from 'enzyme';

const name = 'Component';

describe(name, () => {
  describe('section 1', () => {
    it('Should be awesome', () => {
      const output = mount(<Component>Awesome</Component>);
      expect(output.text()).toContain('Awesome');
    });
  });
});

export { name as default };
@ndelangen
Copy link
Collaborator Author

ndelangen commented Nov 24, 2016

So this story is more complex then just supporting nested describes I think.

What I'd really want is to run a real jest test and see the output inside storybook. The current setup of this awesome 👍 plugin doesn't actually run a jest test. Because jest cannot be run inside a browser..

Is there some way of running jest-cli and relaying it's results to the browsers so we can display them in storybook?

@mthuret
Copy link
Owner

mthuret commented Nov 24, 2016

clearly nested it/describe are not supported by the addon. So that would be a new feature to develop :)

As for the jest output inside storybook, unfortunately i'm not sure there's an easy way to do that because we are on the browser side. That's why this addons only do assertions on mounted components. (the rest is just tricks to make the jest-cli/mocha-cli works as usual).

@ndelangen
Copy link
Collaborator Author

Does storybook provide addons with ways of running serverside code?

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

No branches or pull requests

2 participants