Storybook React with Jest. PostCSS support with Webpack3. Examples for material-UI
Started with standard quick-setup npx -p @storybook/cli sb init from https://storybook.js.org/basics/quick-start-guide/.
Configs where extended and moved to match jest structure.
Test setup is based on https://storybook.js.org/testing/structural-testing/ and https://www.robinwieruch.de/visual-regression-testing-react-storybook/
Example configuration for storybook with "basic" addons:
- Options - own title, link and panel to the right
- Knobs - live changeable properties
- Actions - watch emitted actions
- Usage - see React code for Component
- Storyshots - Use stories as Jest Snapshot-test
- Storyshots-puppeteer - Visual snapshots to compare regressions
- Info - great as a documentation, but not compatible for testings. Renders inside the view -.-
Stroybook must be running for visual testing, therefore they are not feasible in a CI with this setup.
e.g. for Jenkins, only use normal snapshots: CI=true /usr/local/bin/npm test --env=jsdom