How do I run the snapshots in CI

[ForbesLindesay]

I want to be able to test all the snapshots automatically on travis. When I run styleguidist build, it builds successfully even with invalid snapshots.

[MicheleBertoli]

Thanks @ForbesLindesay for opening this issue.
This is a very good point, we'll look into it.

[sapegin]

I’m also interested in that ;-) I think it’s the most useful use case for snapshots in Styleguidist.

[MicheleBertoli]

I wouldn't say it's the most useful use case (snapshot testing gives you much more) :)
But it's absolutely something we should think about.

[hugogrochau]

Love the library so far! But not having this is a deal breaker for using it in our project.

Keep up the good work @MicheleBertoli .

[MicheleBertoli]

Thanks @hugogrochau.

In order to run the tests at build time, we'd need a way to get all the code snippets from react-styleguidist without running the UI.
Is there a way to do it @sapegin?

Otherwise, we'd need to generate "real" test files (instead of running Jest through an endpoint), which would solve #18 as well.

[sapegin]

Not now, but it would be a useful feature. Feel free to send a pull request for that ;-)

[mgcrea]

Would be great to generate "real" test files from examples, stored in every component folder (where jest expects them, aka. __tests__), we could start by creating two simple tests (renders without crashing & renders correctly). Exposing both the target folder and actual template filepath used to generate tests as options would be nice.

One issue that I encountered trying to implement it was that the Playground component from styleguidist does not receive the component path as a prop, so we would have to further override components up the chain to grab that (to give back the proper path on the server side) or land a PR upstream to add the missing props.

One other issue would be that these test would be auto-generated and therefore you could not add extra test in the same files, so it would need a big disclaimer (eg. auto-generated, do not edit)

But for my use case, having a non-crashing test, tree-snapshot test and also a visual-snapshot test (can be done with puppeteer) for every example in my readme would be just perfect. And having the README as the single source of truth for both docs and testing sounds nice.

[nanndoj]

Any news on this issue?

[MicheleBertoli]

Hello @nanndoj we didn't receive any PR yet : )

[kevinbarabash]

It seems like it shouldn't be too hard to extract all code snippets from the markdown and generate a .test.js file that could be used with jest.

[MicheleBertoli]

I'm glad to hear it shouldn't be too hard @kevinbarabash, would you be happy to submit a PR?
Thank you very much!

[kevinbarabash]

@MicheleBertoli I'm not sure how much time I'll have. Here's a link to the code that I used in my own project for this: Khan/wonder-blocks@f0a4c75. Unfortunately, it doesn't handle some of the cases allowed by styleguide.config.js. It also doesn't handle the case where a example contains multiple components at the root level.

[joeljeske]

I am very interested in this being supported. I am a little bit concerned however, of the difficulty of making sure that the snapshots are generated identically inside a standard jest environment and inside the browser at dev time.

For example, I insert a custom wrapper component into my styleguidist config to give each example an appropriate context, I am not sure how snapguidist would be able to maintain this properly during CI if it was running outside of styleguidist.

Has it been considered to actually run the standard styleguidist dev server at CI time and evaluate the tests in the actual browser? Granted, it feels odd to do that, but on the other hand if we think that the browser is a fine place to generate snapshots today, why not maintain the same during CI?

I threw together a very quick POC of this to see what it would take and it was pretty small. Thoughts?

[MicheleBertoli]

I threw together a very quick POC of this to see what it would take and it was pretty small.

Lovely, please submit a PR!