{"id":1837,"date":"2022-06-30T14:29:00","date_gmt":"2022-06-30T14:29:00","guid":{"rendered":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?p=1837"},"modified":"2022-08-12T10:23:51","modified_gmt":"2022-08-12T10:23:51","slug":"snapshot-testing-with-angular-and-storybook","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/","title":{"rendered":"Snapshot testing with Angular and Storybook"},"content":{"rendered":"\n

Storybook is a component-driven tool for creating visual style guides and demonstrating UI components from React, Angular and Vue, as well as web components.<\/p>\n\n\n\n

In particular, snapshot testing provides an opportunity to detect and correct unexpected changes to style at an early stage.<\/p>\n\n\n\n

\"Symbolic<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Snapshot testing in Storybook<\/strong><\/strong><\/h2>\n\n\n\n

Snapshot tests are a very useful tool if you want to ensure that there are no unexpected changes to your user interface.<\/p>\n\n\n\n

A typical snapshot test case renders a UI component and creates a snapshot before comparing this to a reference snapshot file that has been saved alongside the test. If the two snapshots do not match, the test has failed: There has either been an unexpected change or the reference snapshot needs updating to match the new version of the UI component.<\/p>\n\n\n\n

Storybook offers several ways to test an application, starting with Chromatic. However, this tool chain assumes that the source code has been versioned in GitHub and is subject to a monthly fee for professional use.<\/p>\n\n\n\n

Another option is Storyshots, a streamlined addon that uses the Jest testing framework. It launches in the command line, where it lists instances where components have deviated from their previous state. The programmer must then check whether such changes were intentional or erroneous.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Installation for Angular<\/strong><\/strong> <\/h2>\n\n\n\n

This guide assumes that Storybook has already been installed for the Angular application. A setup guide can be found at the following link<\/a>. Angular comes with the Karma testing framework by default. To migrate the application to Jest, the following steps are required:<\/p>\n\n\n\n

<\/div>\n\n\n\n

Installation of Jest dependencies<\/strong><\/strong><\/h3>\n\n\n\n

To install Jest, simply run the command “npm install jest jest-preset-angular –save-dev” in the command line.<\/p>\n\n\n\n

Create Jest setup file<\/strong><\/strong><\/h3>\n\n\n\n

In the root directory of your Angular project, create the new typescript file setupJest.ts with the contents: import ‘jest-preset-angular’.<\/p>\n\n\n\n

Adjust package.json<\/strong><\/strong><\/h3>\n\n\n\n

A script for the Jest testing framework must be added to the package.json of your Angular project:<\/p>\n\n\n\n

{\n \"jest\": {\n \"preset\": \"jest-preset-angular\",\n \"setupFilesAfterEnv\": [\n \"<rootDir>\/setupJest.ts\"\n },\n}<\/pre>\n\n\n\n
Au\u00dferdem muss die Script-Ausf\u00fchrung f\u00fcr Test angepasst werden. Anstatt \u201ctest\u201c: \u201cngtest\u201c, muss \u201ctest\u201c: \u201cjest\u201d In addition, the test script execution must be adapted. Instead of “test”: “ngtest”, “test”: “jest” must be used.<\/p>\n\n\n\n
Removing Karma (optional)<\/strong><\/strong><\/h3>\n\n\n\n
Run the following command line to remove Karma:<\/p>\n\n\n\n
npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine \nkarma-jasmine-html-reporter<\/pre>\n\n\n\n
Next, the Karma.config.js and test.ts files in the <root>\/src directory should be deleted and the section for testing must be removed from the angular.json.<\/p>\n\n\n\n
Migrating from Jasmine (optional)<\/strong><\/strong><\/h3>\n\n\n\n
To migrate to Jest, certain adjustments must be made:<\/p>\n\n\n\n
\u2022 Command line: npm uninstall @types\/jasmine<\/p>\n\n\n\n
\u2022 jasmine.createSpyObj(‘name’, [‘key’]) becomes jest.fn({key: jest.fn()})<\/p>\n\n\n\n
\u2022 jasmine.createSpy(‘name’) becomes jest.fn()<\/p>\n\n\n\n
\u2022 spyOn with returnValue() must be changed to jest.spyOn(…).mockReturnValue(\u2026)<\/p>\n\n\n\n
\u2022 spyOn with callFacke() must be changed to jest.spyOn(…).mockImplementation(\u2026)<\/p>\n\n\n\n
\u2022 Asymmetric matchers: jasmine.any, jasmine.objectContaining, etc. become expect.any, expect.objectContaining<\/p>\n\n\n\n
Installing Storyshots dependencies<\/strong><\/strong><\/h3>\n\n\n\n
Storyshots is now being installed. To install Storyshots, the following two command lines should be run::<\/p>\n\n\n\n
npm i -D @storybook\/addon-storyshots\nnpm i -D @storybook\/addon-storyshots-puppeteer puppeteer<\/pre>\n\n\n\n
After installation, the following dependencies should be available in the package.json (as at 12\/11\/2021; important for the installation workaround under Angular):<\/p>\n\n\n\n
\"jest\": \"^27.3.1\",\n\"jest-preset-angular\": \"^10.0.1\",\n\"@storybook\/addon-storyshots\": \"^6.3.12\"\n\"@storybook\/addon-storyshots-puppeteer\": \"^6.3.12\"<\/pre>\n\n\n\n
Creating Storyshots installation file<\/strong><\/strong><\/h3>\n\n\n\n
After installing Storyshots, the addon still needs to be configured. To do this, the Storyshots.test.js file must be created in the <root>\/src directory with the contents:<\/p>\n\n\n\n
import initStoryshots from '@storybook\/addon-storyshots';\nimport { imageSnapshot } from '@storybook\/addon-storyshots-puppeteer';\nimport path from 'path';\n\n\/\/ Function to customize the snapshot location\nconst getMatchOptions = ({ context: { fileName } }) => {\n \/\/ Generates a custom path based on the file name and the custom directory.\n const snapshotPath = path.join(path.dirname(fileName), 'snapshot-images');\n return { customSnapshotsDir: snapshotPath };\n};\n\ninitStoryshots({\n \/\/ your own configuration\n test: imageSnapshot({\n \/\/ invoke the function above here\n getMatchOptions,\n }),\n});<\/pre>\n\n\n\n
Expanding tsconfig.json for Storyshots<\/strong><\/strong><\/h3>\n\n\n\n
Moreover, the tsconfig.json must also be adapted. To do so, the compilerOptions section in tsconfig.json must be expanded as follows:<\/p>\n\n\n\n
\"compilerOptions\": { \n \"esModuleInterop\": true,<\/pre>\n\n\n\n
Expanding package.json for Storyshots<\/strong><\/strong><\/h3>\n\n\n\n
Lastly, the section contained in the package.json must be reconfigured for Jest:<\/p>\n\n\n\n
\"jest\": {\n \"preset\": \"jest-preset-angular\",\n \"setupFilesAfterEnv\": [\n \"<rootDir>\/setupJest.ts\"\n ],\n \"transformIgnorePatterns\": [\n \"<rootDir>\/node_modules\/(?!(@storybook\/addon-docs))\"\n ],\n \"moduleNameMapper\": {\n \"jest-preset-angular\/build\/setup-jest\": \"jest-preset-angular\/setup-jest\",\n \"jest-preset-angular\/build\/AngularNoNgAttributesSnapshotSerializer\": \"jest-presetangular\/build\/serializers\/no-ng-attributes\",\n \"jest-preset-angular\/build\/AngularSnapshotSerializer\": \"jest-presetangular\/build\/serializers\/ng-snapshot\",\n \"jest-preset-angular\/build\/HTMLCommentSerializer\": \"jest-presetangular\/build\/serializers\/html-comment\"\n }\n},<\/pre>\n\n\n\n
These adjustments are specific to the selected version because the folder structure must be remapped in Jest. This may change again in later versions of Storyshots.<\/p>\n\n\n\n
Testing components<\/strong><\/strong><\/h3>\n\n\n\n
There is a sample application for the test, which is composed of four individual components. The first component displays the time, including the date and day of the week. The second component shows a chart of the current weather in degrees, as well as the highest and lowest daily temperatures. Another component displays tram departures, using Dresden Striesen as an example. There is one final component, which shows three share prices along with graphs and indicators.<\/p>\n\n\n\n
\"\"
Figure 1: Storybook for an application composed of four components<\/em><\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n
For example, the source code for the clock component appears as follows:<\/p>\n\n\n\n
export default {\n title: 'WidgetMonitor\/Clock',\n component: ClockComponent,\n timeIsRunning: false,\n} as Meta;\n\nexport const Morning = () => {\n return({\n props: {\n timeIsRunning: false,\n time: new Date(2021, 10, 9, 9, 9, 9, 9)\n },\n parameter: {\n time: new Date(2021, 10, 9, 9, 9, 9, 9)\n }\n })\n}\n\nexport const Afternoon = () => {\n return({\n props: {\n timeIsRunning: false,\n time: new Date(2021, 10, 9, 15, 15, 15, 15)\n }\n })\n}\n\nconst Template: Story<ClockComponent> = (args: ClockComponent) => ({\n props: args\n});\n\nexport const Running = Template.bind({});\n\nRunning.args = {\n timeIsRunning: true,\n};\n\nRunning.parameters = {\n storyshots: { disable: true }\n};<\/pre>\n\n\n\n
This includes three states, the first two of which are static points in time. The third state, \u201cRunning\u201d, shows the current time, i.e. not static.<\/p>\n\n\n\n
Prerequisite for snapshot tests in Storybook<\/strong><\/strong><\/h3>\n\n\n\n
It is important for us to have a static state under Storybook in order to test the application. The \u201cRunning\u201d state is not static in the clock component example. This can be omitted by adding the parameter storyshots: { disable: true } (see source code above).<\/p>\n\n\n\n
Start testing<\/strong><\/strong><\/h3>\n\n\n\n
Using the npm test command line, the test is launched in the command line of the Angular project directory. The initial snapshot test will now produce a snapshot image of each component state.<\/p>\n\n\n\n
\"\"
Figure 2: Start test in Storybook<\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n
To demonstrate an example of an error, the font used on the clock in the clock component has now been changed so that it is smaller and red in the SCSS, and the test has been restarted.<\/p>\n\n\n\n
\"\"
Figure 3: Show errors in Storybook<\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n
The result of the snapshot test shows that the two active states of the clock component have failed and a diff image is referenced. This appears as follows:<\/p>\n\n\n\n
\"\"
Figure 4: Result of the snapshot tests<\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n
The original state is visible on the left, and the state following the change can be seen on the right. In the middle, you can see how both states overlap. It is now possible to either apply this state or to re-run the test after the application has been adapted.<\/p>\n\n\n\n
The npm test — -u command line is used to force-apply the state. This deletes the differential images and creates a new snapshot of the state of the component. The npm test command line should now run again with no errors.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Summary<\/h2>\n\n\n\n
For Storybook, maintaining a state invariably means that more effort is required in the project. Anyone who is not afraid of tackling this can use Jest and the Storyshots addon to check a specific state in a closed environment. This is particularly helpful for detecting styling bugs at an early stage, as these can be difficult to detect in unit and end-to-end tests and usually only become apparent during manual testing.<\/p>\n","protected":false},"excerpt":{"rendered":"
Storybook is a component-driven tool for creating visual style guides and demonstrating UI components from React, Angular and Vue, as well as web components. In particular, snapshot testing provides an opportunity to detect and correct unexpected changes to style at an early stage.<\/p>\n","protected":false},"author":147,"featured_media":1846,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[8],"tags":[261,398,675,824,825,839],"topics":[],"class_list":["post-1837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-angular","tag-web","tag-zeiss-digital-innovation","tag-snapshot-testing","tag-storybook","tag-editors-choice"],"acf":[],"yoast_head":"\nSnapshot testing with Angular and ... - ZEISS Digital Innovation Blog<\/title>\n<meta name=\"description\" content=\"This blog post deals with the Storybook tool and its snapshot testing options. An example is shown in the article.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Snapshot Testing mit Angular und Storybook\" \/>\n<meta property=\"og:description\" content=\"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Innovation Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-30T14:29:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-12T10:23:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/202207_Snapshot_Testing-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1693\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Steffen Kaemmerer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Snapshot Testing mit Angular und Storybook\" \/>\n<meta name=\"twitter:description\" content=\"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steffen Kaemmerer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/\",\"name\":\"Snapshot testing with Angular and ... - ZEISS Digital Innovation Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/202207_Snapshot_Testing-scaled.jpg\",\"datePublished\":\"2022-06-30T14:29:00+00:00\",\"dateModified\":\"2022-08-12T10:23:51+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/0f3eaebe612b0672e1889df21d44ab90\"},\"description\":\"This blog post deals with the Storybook tool and its snapshot testing options. An example is shown in the article.\",\"breadcrumb\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/#primaryimage\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/202207_Snapshot_Testing-scaled.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/202207_Snapshot_Testing-scaled.jpg\",\"width\":2560,\"height\":1693},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Snapshot testing with Angular and Storybook\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/\",\"name\":\"Digital Innovation Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/0f3eaebe612b0672e1889df21d44ab90\",\"name\":\"Steffen Kaemmerer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/kaemmerer_steffen-scaled-e1656670626294-150x150.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/kaemmerer_steffen-scaled-e1656670626294-150x150.jpg\",\"caption\":\"Steffen Kaemmerer\"},\"description\":\"Steffen Kaemmerer has a degree in computer science and is employed as a senior software consultant at ZEISS Digital Innovation. As a full stack developer with a focus on Angular and .Net Core, he is particularly concerned with web technologies and .NET.\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/ensteffenkaemmerer\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Snapshot testing with Angular and ... - ZEISS Digital Innovation Blog","description":"This blog post deals with the Storybook tool and its snapshot testing options. An example is shown in the article.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/","og_locale":"en_US","og_type":"article","og_title":"Snapshot Testing mit Angular und Storybook","og_description":"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.","og_url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/","og_site_name":"Digital Innovation Blog","article_published_time":"2022-06-30T14:29:00+00:00","article_modified_time":"2022-08-12T10:23:51+00:00","og_image":[{"width":2560,"height":1693,"url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/202207_Snapshot_Testing-scaled.jpg","type":"image\/jpeg"}],"author":"Steffen Kaemmerer","twitter_card":"summary_large_image","twitter_title":"Snapshot Testing mit Angular und Storybook","twitter_description":"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.","twitter_misc":{"Written by":"Steffen Kaemmerer","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/","name":"Snapshot testing with Angular and ... - ZEISS Digital Innovation Blog","isPartOf":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/#primaryimage"},"image":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/202207_Snapshot_Testing-scaled.jpg","datePublished":"2022-06-30T14:29:00+00:00","dateModified":"2022-08-12T10:23:51+00:00","author":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/0f3eaebe612b0672e1889df21d44ab90"},"description":"This blog post deals with the Storybook tool and its snapshot testing options. An example is shown in the article.","breadcrumb":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/#primaryimage","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/202207_Snapshot_Testing-scaled.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/202207_Snapshot_Testing-scaled.jpg","width":2560,"height":1693},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/snapshot-testing-with-angular-and-storybook\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/"},{"@type":"ListItem","position":2,"name":"Snapshot testing with Angular and Storybook"}]},{"@type":"WebSite","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/","name":"Digital Innovation Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/0f3eaebe612b0672e1889df21d44ab90","name":"Steffen Kaemmerer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/image\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/kaemmerer_steffen-scaled-e1656670626294-150x150.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/kaemmerer_steffen-scaled-e1656670626294-150x150.jpg","caption":"Steffen Kaemmerer"},"description":"Steffen Kaemmerer has a degree in computer science and is employed as a senior software consultant at ZEISS Digital Innovation. As a full stack developer with a focus on Angular and .Net Core, he is particularly concerned with web technologies and .NET.","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/ensteffenkaemmerer\/"}]}},"author_meta":{"display_name":"Steffen Kaemmerer","author_link":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/ensteffenkaemmerer\/"},"featured_img":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2022\/07\/202207_Snapshot_Testing-600x397.jpg","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Web<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Web<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Angular<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">web<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">ZEISS Digital Innovation<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Snapshot Testing<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Storybook<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Editor's Choice<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Angular<\/span>","<span class=\"advgb-post-tax-term\">web<\/span>","<span class=\"advgb-post-tax-term\">ZEISS Digital Innovation<\/span>","<span class=\"advgb-post-tax-term\">Snapshot Testing<\/span>","<span class=\"advgb-post-tax-term\">Storybook<\/span>","<span class=\"advgb-post-tax-term\">Editor's Choice<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 4 years ago","modified":"Updated 4 years ago"},"absolute_dates":{"created":"Posted on June 30, 2022","modified":"Updated on August 12, 2022"},"absolute_dates_time":{"created":"Posted on June 30, 2022 2:29 pm","modified":"Updated on August 12, 2022 10:23 am"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/1837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/users\/147"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/comments?post=1837"}],"version-history":[{"count":7,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/1837\/revisions"}],"predecessor-version":[{"id":1933,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/1837\/revisions\/1933"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/media\/1846"}],"wp:attachment":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/media?parent=1837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/categories?post=1837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/tags?post=1837"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/topics?post=1837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}