styleguidist / snapguidist Goto Github PK

View Code? Open in Web Editor NEW

290.0 5.0 36.0 796 KB

Snapshot testing for React Styleguidist

License: MIT License

JavaScript 94.46% CSS 5.54%

snapshot-testing jest react styleguidist

snapguidist's People

Contributors

Stargazers

Watchers

snapguidist's Issues

Hide green/red snapshot bar when condition is set

We have a situation where we would like to achieve the following with Snapguidist:

Hide the green/red snapshot bar for certain components or for an entire section (ie. documentation only components)
Hide the grey bar when the styleguide is published (in our case to Github pages)

Are there any current config settings that would allow us to do this without some dirty CSS hacks etc?

Usage with Create React App

How can I use this with Create React App? I am getting an error 10 obsolete snapshot files found, press `u` to remove them..

Upgrade to react-styleguidist 6.x

We've recently upgraded to React Styleguidist v6.0.24 and have noticed a small bug with Snapguidist around the colour changes on diffs:

Before

After

We're trying to pin down whether this was due to RSG only supporting Webpack 2 now, some Babel changes or something else entirely.

Everything else with Snapguidist seems to still be functioning perfectly (snapshots, diffs etc) -- it's just the colour that's dropped off.

Would love to raise a PR and help if you can point me in the right direction!

Cannot resolve Playground

Hey! I've followed the tutorial to implement snapguidist on my react-styleguidist but I'm gettint the following error when I run the start script:

FAIL  Failed to compile

./node_modules/react-styleguidist/lib/rsg-components/Playground/index.js
Module not found: Can't resolve 'rsg-components/Playground/Playground' in '/<path-to-project>/node_modules/react-styleguidist/lib/rsg-components/Playground'

Here's the alias part of the loaded webpackconfig:

{ entry: 
   [ '/<path-to-project>/packages/css-packs/core-styles/src/index.scss',
     '/<path-to-project>/node_modules/react-styleguidist/lib/index',
     '/<path-to-project>/node_modules/react-dev-utils/webpackHotDevClient.js',
     '!!style-loader!css-loader!codemirror/lib/codemirror.css',
     '!!style-loader!css-loader!rsg-codemirror-theme.css',
     '!!style-loader!css-loader!/<path-to-project>/node_modules/snapguidist/lib/styles.css' ],
  output: 
   { path: '/<path-to-project>/styleguide',
     filename: 'build/[name].bundle.js',
     chunkFilename: 'build/[name].js' },
  resolve: 
   { 
     extensions: 
     [
        '.js',
        '.jsx',
        '.json',
        '.js',
        '.jsx',
        '.ts',
        '.tsx',
        '.json',
        '.less',
        '.scss',
        '.sass',
        '.styl',
        '.css'
      ],
     alias: {
      'rsg-components/Playground/PlaygroundRenderer': 'react-styleguidist/lib/rsg-components/Playground/PlaygroundRenderer',
      'rsg-components/Playground': '/<path-to-project>/node_modules/snapguidist/lib/components/Playground',
      'rsg-components/Preview': '/<path-to-project>/node_modules/snapguidist/lib/components/Preview',
      'rsg-codemirror-theme.css': 'codemirror/theme/base16-light.css',
      react: 'preact-compat',
      'react-dom': 'preact-compat',
      'rsg-components': '/<path-to-project>/node_modules/react-styleguidist/lib/rsg-components' 
    },
  modules: [ './node_modules' ] }
  ...
}

(I've used <path-to-project> here just to shorten the output)

Not working in webpack 4

I really like styleguidist, and that integrated into my project with almost no effort, however when I try to add snapguidist, I'm getting the following error whenever I try to run webpack:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'configureServer'. These properties are valid:
   object { mode?, amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, module?, name?, node?, output?, optimization?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           configureServer: …
         }
       })
     ]

Here is my webpack.config.js:

const process               = require('process');
const path                  = require('path');
const webpack               = require('webpack');
const postcssPresetEnv      = require('postcss-preset-env');
const MiniCssExtractPlugin  = require('mini-css-extract-plugin');
const I18nextPlugin         = require('i18next-scanner-webpack');
const snapguidist           = require('snapguidist');

const settings  =
{
    mode:               'development',          // "production" "development" "none"
    entry:
    [
        'webpack-hot-middleware/client',
        './src/index.tsx',
    ],
    output:
    {
        filename:       '[name].js',
        publicPath:     '/build/',
        path:           '/home/phil/playground/project/build',//path.resolve(process.cwd(), "build"),
    },
    performance:
    {
        hints:          false,
    },
    devtool:            'source-map',
    resolve:
    {
        extensions:     [ '.ts', '.tsx', '.js', '.json', '.css' ],
        alias:
        {
            'common/*':     path.resolve(__dirname, '..', 'common'),
            'controls/*':   path.resolve(__dirname, 'src', 'controls'),
        }
    },
    module:
    {
        rules:
        [
            {
                test:       /\.tsx?$/,
                loader:     'awesome-typescript-loader',
            },
            {
                test:       /\.css$/,
                use:
                [
                    //'style-loader',
                    {
                        loader:     MiniCssExtractPlugin.loader,
                        options:
                        {
                            //public-path?
                        }
                    },
                    {
                        loader: 'css-loader',
                        options:
                        {
                            modules:        true,
                            sourceMap:      true,
                            importloaders:  1,
                            localIdentName: '[name]--[local]--[hash:base64:8]',
                        },
                    },
                   // 'postcss-loader',
                ]
            },
            {
                enforce:    'pre',
                test:       /\.js$/,
                loader:     'source-map-loader',
            }
        ]
    },
    plugins:
    [
        new MiniCssExtractPlugin
        (
            {
                filename:           '[name].css',
                chunkFilename:      '[id].css',
            }
        ),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.LoaderOptionsPlugin({ debug: true }),
        new I18nextPlugin
        (
            {
                src:    path.resolve(__dirname, './src/**/*'),
                dest:   path.resolve(__dirname, '../locales'),
                options:
                {
                    func:
                    {
                        list:           ['t', '$t', 'i18next.t', 'i18n.t'],
                        extensions:     ['.js', '.jsx', '.ts', '.tsx']
                    },
                    trans:
                    {
                        component:      'Trans',
                        i18nKey:        'i18nKey',
                        defaultsKey:    'defaults',
                        extensions:     ['.js', '.jsx', '.ts', '.tsx'],
                    },
                    lngs: ['en', 'hr'],
                    namespaces: [ 'translations' ],
                    defaultNs:  'translations',
                    resource:
                    {
                        loadPath: '{{lng}}/{{ns}}.json',
                        savePath: '{{lng}}/{{ns}}.json'
                    },
                    keySeparator: false,
                    defaultValue: (lng, ns, key) => ` [[${key}]] `
                }
            }
        ),
    ],
    externals:
    {
        'react':        'React',
        'react-dom':    'ReactDOM',
    },
}

module.exports = snapguidist(settings);

How do I run the snapshots in CI

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.

I don't know how much work it would be, but I'd love to see something like https://github.com/styled-components/jest-styled-components integrated into snapguidist, so I can actually review the diffs to class names, rather than just having to trust that they're correct.

Add change log

Yup ;-)

Some Errors (No green Line, Can't close jest-info ...)

Hallo,

I wanted to test snapguidist to see if it would work for us as we already use the react-styleguidist.
Unfortunately it's not really working like it should:

No green or red line if I start or change some props in the styleguidist
As soon as I change props the jest -dropdown with the Differences opens immediately
The jest dropdown hasn't any colors
I cant close the jest dropdown (nothing happens if i click on the symbol)

I am using react-styleguidist v4.6.3 (I had to downgrade from 5.0.3 )

I hope you can help me :)

That's how it looks:

not working with flow and create react app

I tried to use snapguidist with create react app in a project which include flow type but did not manage to get it work. Not even to get to the point of this issue: #35

1st try: use the configuration from snapguidist documentation:

module.exports = snapguidist({
  components: "src/components/**/[A-Z]*.js",
  defaultExample: true,
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: "babel-loader"
        },
        {
          test: /\.css$/,
          loader: "style-loader!css-loader"
        }
      ]
    }
  }
});

=> FAIL failed to compiled
compiler do not understand the word "type"

2nd try: I installed the flow plugin for babel :

npm i flow-babel-webpack-plugin

And add the plugin in the configuration file:

module.exports = snapguidist({
  components: "src/components/**/[A-Z]*.js",
  defaultExample: true,
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: "babel-loader"
        },
        {
          test: /\.css$/,
          loader: "style-loader!css-loader"
        }
      ]
    },
    plugins: [new FlowBabelWebpackPlugin()]
  }
});

=> styleguidist start and freeze, server never stop neither any message appears.

Is there a way to get snapguidist working with create-react-app and flow?

React 16.x.x

Current version is not compatible with React 16.x.x

luckily i did all the dirty migration job

you can use the fork if you want [email protected] support right away

Document need for editorConfig.highlightTheme

When using Snapguidist with Styleguidist 6.2.5, the styleguide config must explicitly set editorConfig.highlightTheme or Snapguidist will cause rendering errors when a snapshot test fails.

TypeError: Cannot read property 'replace' of undefined
    in CodeMirror (created by Code)
    in div (created by Code)
    in div (created by Code)
    in Code (created by Test)
    in div (created by Test)
    in div (created by Test)
    in div (created by Test)
    in Test (created by SnapguidistPreview)
    in div (created by SnapguidistPreview)
    ...

Add support for React 16.8 hooks

Snapguidist throws an error in the browser console when we load a React.FunctionComponent with hooks in React Styleguidist. It doesn't break the compilation but throws an error onto the console.
React 16.8 was released just a day ago along with the hooks and snapguidist should add support for it as we are moving from class based components to function based components and hooks are necessary for adding state to the components.

Without the snapguidist it works perfectly so I presume it's got to be a problem with either snapguidist or one of its dependencies.

Example:

import React, { useState } from 'react'
...
const Comp: React.FC<IComp> = props => {
  ...
  const [state, setState] = useState(0); 
  
  return <div onClick={() => { setState(state + 1) }}>{state}</div>;
};

This will throw the same error shown above

Snapguidist and Webpack 2 Error

Styleguidist works fine with Webpack 2. But, when I try to use Snapguidist, I receive the following error:

Something is wrong with your style guide config

updateWebpackConfig config option was removed. Use "webpackConfig" option instead:
https://github.com/styleguidist/react-styleguidist/blob/master/docs/Webpack.md

Provide a way to skip some examples

Snapguidist should ideally provide a way to filter which examples are tested, or to disable testing for specific code blocks. For example, users may not want snapguidist to run tests on example blocks in general doc sections.

Compatibility with Styleguidist 9.x.x

Styleguidist 9.x.x has replaced codemirror with react-simple-code-editor due to which getting errors when using snapguidist with Styleguidist 9.

Can't resolve 'react-codemirror'

Hi guys just added snapguidist on my styleguidist and I have to install react-codemirror as a dependency in order to make project compile.
Should it need to be added as a dependency into snapguidist perhaps?

How can I apply snapguidist to Vue component, any ideas please?

Upgrade to react-styleguidist 5.x

Now that 5.x is out, this package still requires 4.5 of react-styleguidist

"react-styleguidist": ">=4.5 <5",

It would be great to get a new version that is compatible with 5.x

How to handle dynamic IDs in examples

hey guys! :)

i've a few components that generates dynamic internal ids for their children, like:

import shortid from 'shortid';

class Field extends React.Component {
  constructor() {
    this.instanceId = shortid.generate();
  }

  render() {
    return (
      <p>
        <label htmlFor={this.instanceId}>Example<label>
        <input id={this.instanceId} />
      <p>
    )
  } 
}

Every time I start the style guide, I've a few red bars diffing only the ID.

Without moving it to a prop, there's any solution for this issue?

(I'm not worried about it tbh, just asking :P)

Component gets unmounted = ref is null while I interact with a component

Hello Michele!

I was playing with this example in Styleguidist cookbook: how-to-use-refs-in-examples

Took me quite a while to understand why the example would not work on my almost clean version of styleguidist + snapguidist.

When I click the button in the even more simplified example below I get an error because snapguidist basically unmount the component so ref gets called with null (is that correct?)facebook/react#9328 (comment)

Could this lead to issues? I'm interacting with a component that is unmounted?

Example to try on a clean installation of styleguidist+snapguidist

let myEl;
<div>
  <button onClick={() => myEl.value = 'Pizza'}>Insert</button>
  <input ref={ref => myEl = ref} />
</div>