PHPackages suffle/snapshot - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Testing & Quality](/categories/testing) 4. / 5. suffle/snapshot ActiveNeos-plugin[Testing & Quality](/categories/testing) suffle/snapshot =============== Snapshot Testing of standalone fusion components 1.0.0(1y ago)135.1k↓15%3[26 PRs](https://github.com/suffle/Suffle.Snapshot/pulls)GPL-3.0-or-laterTypeScriptPHP >=8.1 Since May 9Pushed 1y ago2 watchersCompare [ Source](https://github.com/suffle/Suffle.Snapshot)[ Packagist](https://packagist.org/packages/suffle/snapshot)[ RSS](/packages/suffle-snapshot/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (3)Dependencies (2)Versions (31)Used By (0) Suffle.Snapshot =============== [](#sufflesnapshot) A Neos CMS package to perform snapshot tests of fusion components Regression testing for fusion components ---------------------------------------- [](#regression-testing-for-fusion-components) Inspired by Jest and its snapshot testing for React Components, this package helps to reduce unwanted side effects when changing existing Fusion Components. Especially in big projects it is often hard to keep an eye on every usage of a component and which other component might be influenced. Snapshot testing reduces regression bugs by rendering Fusion Components and saving their outcome. If the code of a Fusion Component is changed, the snapshots are no longer in sync with the new outcome, which gives the developer two possibilities: 1. Adjust the code to keep old behaviour where needed 2. Update the old snapshots Nevertheless, the developer needs to address the changed code somehow. The tests can also be run automatically as part of a CI-Build. Installation ------------ [](#installation) Add the dependency to your project like this: ``` composer require --dev suffle/snapshot ``` Example configuration --------------------- [](#example-configuration) The Snapshot Tests are configured as regular Flow settings. ``` Suffle: Snapshot: snapshotSavePath: '%FLOW_PATH_DATA%Persistent/fusionSnapshots/' annotationKey: 'snapshot' ``` ### snapshotSavePath [](#snapshotsavepath) The snapshotSavePath defines the directory, where the snapshots are saved. If you use any Version Control Software like Git, make sure not to ignore this folder. annotationKey ------------- [](#annotationkey) The annotationKey can be set, if you want to use another name to annotate test cases. Since the syntax of the cases is the same used for the [Monocle Styleguide](https://github.com/sitegeist/Sitegeist.Monocle), you can use the styleguide annotation for the testing as well. Annotating Test Cases --------------------- [](#annotating-test-cases) As long as the annotation ist present, the component is tested in a pure version, which uses the basic props of the Fusion Component. ``` prototype(Vendor.Package:Components.Example) < prototype(Neos.Fusion:Component) { # Snapshot annotation # only if this annotation (or the another key in the settings) is # present the prototype is tested # @snapshot { # Default props for testing props { href = 'neos.io' classes = 'link-class' } # # Optional test cases which overload the default props # propSets { # This propSet still uses href and classes # from props 'targetBlank' { target = '_blank' } # This propSet overwrites the classes but keeps the href 'differentClass' { classes = 'other-link-class' } } } # basic fusion props href = '' classes = '' target = '_self' renderer = Neos.Fusion:Tag { tagName = 'a' attributes = { href = ${props.href} target = ${props.target} class = ${props.classes} } @if.hasHref = ${props.href} } } ``` ### Keep in mind [](#keep-in-mind) The snapshot tests are not using any database content or context variables other than the ones set directly in the tested component. You can't test any actual nodes or refer to context variables like `node`, `site` or `documentNode`. Taking Snapshots ---------------- [](#taking-snapshots) You can take snapshots of components via the cli: ### Take snapshots of all components [](#take-snapshots-of-all-components) If you want to take snapshots of your annotated Fusion Components, you can use the cli to take snapshots of all components: ``` ./flow snapshot:takeall ``` This takes and **overwrites** snapshots of all components in all active site packages. If there is no snapshot present for a component, the first snapshot will also be taken automatically during a test run. ### Take Snapshot of specific component [](#take-snapshot-of-specific-component) If you want to restrict the snapshots taken to a specific component, you can use the take-Command: ``` ./flow snapshot:take Vendor.Package:Components.Example ``` Testing components ------------------ [](#testing-components) Like with taking new snapshots, it is also possible to test all or only specific components. If you test new components or propSets without any snapshots available, the snapshots will be written on the first run. ### Test all components [](#test-all-components) As a standard test mechanism this tests all components from all site packages prepared for testing: ``` ./flow snapshot:testall ``` ### Test single component [](#test-single-component) Sometimes it is useful to test only single components, e.g. while developing: ``` ./flow snapshot:test Vendor.Package:Components.Example ``` ### Using interactive mode [](#using-interactive-mode) By using the `--interactive` flag with a test command, the interactive mode is turned on. When a test of a component and its propSet fails, the diff of the rendered Fusion and the snapshots are shown and a prompt of what to do next, possibilities are: InputEffectyUpdate the current snapshotnDo not update the snapshot, causing the test to failqImmediately stop the testingaUpdate the current and all following snapshots that faildDo not update this or any of the following snapshots that fail### Update all failing snapshots [](#update-all-failing-snapshots) It is also possible to automatically update all snapshots of failing tests. Just add the `--updateall` flag to a test command. List all items to test ---------------------- [](#list-all-items-to-test) If you need a list of all components that are ready for testing, you can use: ``` ./flow snapshot:items ``` Restricting command to a specific site package ---------------------------------------------- [](#restricting-command-to-a-specific-site-package) All CLI Commands can be restricted to a specific site package. Just add `--packageName "sitePackageName"` as an option. ### Health Score 45 — FairBetter than 93% of packages Maintenance40 Moderate activity, may be stable Popularity32 Limited adoption so far Community14 Small or concentrated contributor base Maturity79 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1022 days Total 3 Last Release 522d ago Major Versions v0.1.0 → 1.0.02024-12-12 ### Community Maintainers ![](https://www.gravatar.com/avatar/61c7b785be7a795cf6e8c0c4d491e5e7080bc6fac9b81123b0e7e30e9d03482b?d=identicon)[suffle](/maintainers/suffle) --- Top Contributors [![suffle](https://avatars.githubusercontent.com/u/10942229?v=4)](https://github.com/suffle "suffle (15 commits)")[![Sebobo](https://avatars.githubusercontent.com/u/596967?v=4)](https://github.com/Sebobo "Sebobo (12 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (8 commits)")[![lucasboerner](https://avatars.githubusercontent.com/u/92752057?v=4)](https://github.com/lucasboerner "lucasboerner (2 commits)") --- Tags testingsnapshotFUSIONNeos CMSjest ### Embed Badge ![Health badge](/badges/suffle-snapshot/health.svg) ``` [![Health](https://phpackages.com/badges/suffle-snapshot/health.svg)](https://phpackages.com/packages/suffle-snapshot) ``` ### Alternatives [phpunit/phpunit The PHP Unit Testing framework. 20.0k910.7M134.8k](/packages/phpunit-phpunit)[infection/infection Infection is a Mutation Testing framework for PHP. The mutation adequacy score can be used to measure the effectiveness of a test set in terms of its ability to detect faults. 2.2k26.2M1.8k](/packages/infection-infection)[spatie/phpunit-snapshot-assertions Snapshot testing with PHPUnit 69617.9M510](/packages/spatie-phpunit-snapshot-assertions) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)