creevey 0.9.0-beta.2 → 0.9.0-non-webpack.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2019 Dmitriy Lazarev
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2019 Dmitriy Lazarev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,9 +1,12 @@
 # 📸+👦🏼 [Creevey](https://harrypotter.fandom.com/wiki/Colin_Creevey)
 
+**IMPORTANT** _Looking for any help with maintaining_
+
 Cross-browser screenshot testing tool for [Storybook](https://storybook.js.org/) with fancy UI Runner.
 
 [![Creevey downloads](https://img.shields.io/npm/dt/creevey)](https://www.npmjs.com/package/creevey)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FwKich%2Fcreevey.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FwKich%2Fcreevey?ref=badge_shield)
 
 ![Creevey Demo](https://user-images.githubusercontent.com/6397708/100863723-cd6b8500-34b6-11eb-94e1-849590bc8066.gif)
 
@@ -145,3 +148,7 @@ Because tests defined in story parameters and `selenium-webdriver` depends on no
 
 | [![Whisk](https://raw.githubusercontent.com/wKich/creevey/master/.github/images/whisk.svg)](https://whisk.com/) | [![SKB Kontur](https://kontur.ru/Files/userfiles/image/brandbook/logo-skb-kontur-eng.png)](https://kontur.ru/) | [![ABBYY](https://raw.githubusercontent.com/wKich/creevey/master/.github/images/abbyy.svg)](https://www.abbyy.com/) |
 | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
+
+## License
+
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FwKich%2Fcreevey.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FwKich%2Fcreevey?ref=badge_large)

package/addon/README.md

@@ -0,0 +1,3 @@
+This is a fallback for package.json's `exports.addon` field. It's required for outdated environments (like node 11 and typescript with the "node" moduleResolution) to resolve imports from `creevey/addon` properly.
+
+See https://github.com/andrewbranch/example-subpath-exports-ts-compat. The fallback uses the "package-json-redirects" startegy.

package/addon/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../lib/cjs/client/addon/index.js",
+  "types": "../lib/types/client/addon/index.d.ts"
+}

package/docs/config.md

@@ -1,212 +1,212 @@
-## Config/Options
-
-### CLI Options
-
-- `--config` — Specify path to config file. Default `.creevey/config.js` or `creevey.config.js`
-- `--ui` — Start runner web server
-- `--update` — Approve all images from `report` directory
-- `--port` — Specify port for web server. Default `3000`
-- `--reportDir` — Path where reports will be stored
-- `--screenDir` — Path where reference images are located
-- `--debug` — Enable debug output
-
-### Creevey config
-
-In default configuration Creevey take screenshots of `#root` element only for chrome browser in one concurrent instance, to run tests in different browsers or speedup tests and run in parallel, you need to define config file `.creevey/config.js`
-
-```ts
-module.exports = {
-  browsers: {
-    chrome: {
-      browserName: 'chrome',
-      // Define initial viewport size
-      viewport: { width: 1024, height: 720 },
-      // Increase parallel sessions
-      limit: 2,
-    },
-    firefox: {
-      browserName: 'firefox',
-      viewport: { width: 1024, height: 720 },
-    },
-  },
-};
-```
-
-### All possible config options
-
-:warning: **WARN** :warning: This config is just an example with all possible options. :warning: **WARN** :warning:
-
-```ts
-const path = require('path');
-
-module.exports = {
-  // Specify custom Selenium Grid url (see usage below)
-  // In most cases you don't need this option
-  gridUrl: '<gridUrl>/wd/hub',
-
-  // Default Storybook url
-  storybookUrl: 'http://localhost:6006',
-
-  // Storybook config directory
-  storybookDir: path.join(__dirname, '.storybook'),
-
-  // Where original images are stored
-  screenDir: path.join(__dirname, '../images'),
-
-  // Report directory that contains data from previous runs
-  reportDir: path.join(__dirname, '../report'),
-
-  // Pixelmatch options
-  diffOptions: { threshold: 0.1 },
-
-  // How many times test should be retried before to consider it as failed
-  maxRetries: 2,
-
-  // Describe browsers and their options
-  browsers: {
-    // Shorthand declarations of browsers
-    chrome: true,
-    ff: 'firefox',
-
-    otherChrome: {
-      browserName: 'chrome',
-      // Define initial viewport size
-      viewport: { width: 1024, height: 720 },
-      // Increase parallel sessions
-      limit: 2,
-      /* Also you can define any browser capabilities here */
-      version: '86.0',
-      // It's possible to set Storybook's globals
-      // https://github.com/storybookjs/storybook/blob/v6.0.0/docs/essentials/toolbars-and-globals.md
-      // NOTE: This is an experimental feature and will be replaced in future
-      _storybookGlobals: {
-        myTheme: 'dark',
-      },
-    },
-
-    // You can override some global options for specific browser
-    ie11: {
-      browserName: 'internet explorer',
-      // Like user another Selenium Grid url
-      gridUrl: '<anotherGridUrl>/wd/hub',
-      // Or use different storybook instance
-      storybookUrl: 'http://mystoryhost:6007',
-      // And use you own docker image
-      // By default Creevey will use selenoid image according browser name and version:
-      // `selenoid/${browserName}:${version ?? 'latest'}` image
-      dockerImage: 'microsoft/ie:11.0',
-    },
-  },
-
-  // You may want to do something before tests started (for example start browserstack-local)
-  hooks: {
-    async before() {
-      /* ... */
-    },
-    async after() {
-      /* ... */
-    },
-  },
-};
-```
-
-### Storybook parameters
-
-Also you could define parameters on `global`, `kind` or `story` levels. All these parameters are deeply merged by Storybook for each story. But bear in mind when you define skip option as an array Storybook treats it as primitive value and doesn't merge with other skip options.
-
-```tsx
-// .storybook/preview.tsx
-export const parameters = {
-  creevey: {
-    // Skip all *hover tests in IE11 on the global level
-    skip: {
-      ie11: { in: 'ie11', tests: /.*hover$/ },
-    },
-  },
-};
-```
-
-```tsx
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { CreeveyMeta, CreeveyStory } from 'creevey';
-import MyComponent from './src/components/MyComponent';
-
-export default {
-  title: 'MyComponent'
-  parameters: {
-    creevey: {
-      // You could skip some browsers/stories or even specific tests
-      skip: [
-        { in: 'ie11', reason: "`MyComponent` doesn't support ie11" },
-        { in: 'firefox', stories: 'Loading', reason: "Loading stories are flaky in firefox" },
-        {
-          in: ['firefox', 'chrome'],
-          tests: /.*hover$/,
-          reason: "For some reason `MyComponent` hovering doesn't work correctly",
-        },
-      ],
-    },
-  },
-} as Meta & CreeveyMeta;
-
-export const Basic: Story & CreeveyStory = () => <MyComponent />;
-Basic.parameters = {
-  creevey: {
-    captureElement: '.container',
-    // elements to ignore in capturing screenshot
-    ignoreElements: ['button', '.local-time'],
-    // Delay before test starts in ms
-    delay: 1000,
-    tests: {
-      /* ... */
-    },
-  },
-};
-```
-
-### `skip` option examples:
-
-```ts
-interface SkipOption {
-  reason?: string;
-  in?: string | string[] | RegExp;
-  kinds?: string | string[] | RegExp;
-  stories?: string | string[] | RegExp;
-  tests?: string | string[] | RegExp;
-}
-
-type SkipOptions = SkipOption | SkipOption[] | Record<string, SkipOption | SkipOption[]>;
-```
-
-- Skip all stories for all browsers:
-  - `skip: true`
-  - `skip: 'Skip reason message'`
-  - `skip: { reason: 'Skip reason message' }`
-- Skip all stories for specific browsers:
-  - `skip: { in: 'ie11' }`
-  - `skip: { in: ['ie11', 'chrome'] }`
-  - `skip: { in: /^fire.*/ }`
-- Skip all stories in specific kinds:
-  - `skip: { kinds: 'Button' }`
-  - `skip: { kinds: ['Button', 'Input'] }`
-  - `skip: { kinds: /.*Modal$/ }`
-- Skip all tests in specific stories:
-  - `skip: { stories: 'simple' }`
-  - `skip: { stories: ['simple', 'special'] }`
-  - `skip: { stories: /.*large$/ }`
-- Skip specific tests:
-  - `skip: { tests: 'click' }`
-  - `skip: { tests: ['hover', 'click'] }`
-  - `skip: { tests: /^press.*$/ }`
-- Multiple skip options:
-  - as an array `skip: [{ /* ... */ }]`
-  - as an object
-    ```
-    skip: {
-      foo: { /* ... */ },
-      bar: { /* ... */ },
-    }
-    ```
-
-NOTE: If you try to skip stories by story name, the storybook name format will be used (For more info see [storybook-export-vs-name-handling](https://storybook.js.org/docs/formats/component-story-format/#storybook-export-vs-name-handling))
+## Config/Options
+
+### CLI Options
+
+- `--config` — Specify path to config file. Default `.creevey/config.js` or `creevey.config.js`
+- `--ui` — Start runner web server
+- `--update` — Approve all images from `report` directory
+- `--port` — Specify port for web server. Default `3000`
+- `--reportDir` — Path where reports will be stored
+- `--screenDir` — Path where reference images are located
+- `--debug` — Enable debug output
+
+### Creevey config
+
+In default configuration Creevey take screenshots of `#root` element only for chrome browser in one concurrent instance, to run tests in different browsers or speedup tests and run in parallel, you need to define config file `.creevey/config.js`
+
+```ts
+module.exports = {
+  browsers: {
+    chrome: {
+      browserName: 'chrome',
+      // Define initial viewport size
+      viewport: { width: 1024, height: 720 },
+      // Increase parallel sessions
+      limit: 2,
+    },
+    firefox: {
+      browserName: 'firefox',
+      viewport: { width: 1024, height: 720 },
+    },
+  },
+};
+```
+
+### All possible config options
+
+:warning: **WARN** :warning: This config is just an example with all possible options. :warning: **WARN** :warning:
+
+```ts
+const path = require('path');
+
+module.exports = {
+  // Specify custom Selenium Grid url (see usage below)
+  // In most cases you don't need this option
+  gridUrl: '<gridUrl>/wd/hub',
+
+  // Default Storybook url
+  storybookUrl: 'http://localhost:6006',
+
+  // Storybook config directory
+  storybookDir: path.join(__dirname, '.storybook'),
+
+  // Where original images are stored
+  screenDir: path.join(__dirname, '../images'),
+
+  // Report directory that contains data from previous runs
+  reportDir: path.join(__dirname, '../report'),
+
+  // Pixelmatch options
+  diffOptions: { threshold: 0.1 },
+
+  // How many times test should be retried before to consider it as failed
+  maxRetries: 2,
+
+  // Describe browsers and their options
+  browsers: {
+    // Shorthand declarations of browsers
+    chrome: true,
+    ff: 'firefox',
+
+    otherChrome: {
+      browserName: 'chrome',
+      // Define initial viewport size
+      viewport: { width: 1024, height: 720 },
+      // Increase parallel sessions
+      limit: 2,
+      /* Also you can define any browser capabilities here */
+      version: '86.0',
+      // It's possible to set Storybook's globals
+      // https://github.com/storybookjs/storybook/blob/v6.0.0/docs/essentials/toolbars-and-globals.md
+      // NOTE: This is an experimental feature and will be replaced in future
+      _storybookGlobals: {
+        myTheme: 'dark',
+      },
+    },
+
+    // You can override some global options for specific browser
+    ie11: {
+      browserName: 'internet explorer',
+      // Like user another Selenium Grid url
+      gridUrl: '<anotherGridUrl>/wd/hub',
+      // Or use different storybook instance
+      storybookUrl: 'http://mystoryhost:6007',
+      // And use you own docker image
+      // By default Creevey will use selenoid image according browser name and version:
+      // `selenoid/${browserName}:${version ?? 'latest'}` image
+      dockerImage: 'microsoft/ie:11.0',
+    },
+  },
+
+  // You may want to do something before tests started (for example start browserstack-local)
+  hooks: {
+    async before() {
+      /* ... */
+    },
+    async after() {
+      /* ... */
+    },
+  },
+};
+```
+
+### Storybook parameters
+
+Also you could define parameters on `global`, `kind` or `story` levels. All these parameters are deeply merged by Storybook for each story. But bear in mind when you define skip option as an array Storybook treats it as primitive value and doesn't merge with other skip options.
+
+```tsx
+// .storybook/preview.tsx
+export const parameters = {
+  creevey: {
+    // Skip all *hover tests in IE11 on the global level
+    skip: {
+      ie11: { in: 'ie11', tests: /.*hover$/ },
+    },
+  },
+};
+```
+
+```tsx
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { CreeveyMeta, CreeveyStory } from 'creevey';
+import MyComponent from './src/components/MyComponent';
+
+export default {
+  title: 'MyComponent'
+  parameters: {
+    creevey: {
+      // You could skip some browsers/stories or even specific tests
+      skip: [
+        { in: 'ie11', reason: "`MyComponent` doesn't support ie11" },
+        { in: 'firefox', stories: 'Loading', reason: "Loading stories are flaky in firefox" },
+        {
+          in: ['firefox', 'chrome'],
+          tests: /.*hover$/,
+          reason: "For some reason `MyComponent` hovering doesn't work correctly",
+        },
+      ],
+    },
+  },
+} as Meta & CreeveyMeta;
+
+export const Basic: Story & CreeveyStory = () => <MyComponent />;
+Basic.parameters = {
+  creevey: {
+    captureElement: '.container',
+    // elements to ignore in capturing screenshot
+    ignoreElements: ['button', '.local-time'],
+    // Delay before test starts in ms
+    delay: 1000,
+    tests: {
+      /* ... */
+    },
+  },
+};
+```
+
+### `skip` option examples:
+
+```ts
+interface SkipOption {
+  reason?: string;
+  in?: string | string[] | RegExp;
+  kinds?: string | string[] | RegExp;
+  stories?: string | string[] | RegExp;
+  tests?: string | string[] | RegExp;
+}
+
+type SkipOptions = SkipOption | SkipOption[] | Record<string, SkipOption | SkipOption[]>;
+```
+
+- Skip all stories for all browsers:
+  - `skip: true`
+  - `skip: 'Skip reason message'`
+  - `skip: { reason: 'Skip reason message' }`
+- Skip all stories for specific browsers:
+  - `skip: { in: 'ie11' }`
+  - `skip: { in: ['ie11', 'chrome'] }`
+  - `skip: { in: /^fire.*/ }`
+- Skip all stories in specific kinds:
+  - `skip: { kinds: 'Button' }`
+  - `skip: { kinds: ['Button', 'Input'] }`
+  - `skip: { kinds: /.*Modal$/ }`
+- Skip all tests in specific stories:
+  - `skip: { stories: 'simple' }`
+  - `skip: { stories: ['simple', 'special'] }`
+  - `skip: { stories: /.*large$/ }`
+- Skip specific tests:
+  - `skip: { tests: 'click' }`
+  - `skip: { tests: ['hover', 'click'] }`
+  - `skip: { tests: /^press.*$/ }`
+- Multiple skip options:
+  - as an array `skip: [{ /* ... */ }]`
+  - as an object
+    ```
+    skip: {
+      foo: { /* ... */ },
+      bar: { /* ... */ },
+    }
+    ```
+
+NOTE: If you try to skip stories by story name, the storybook name format will be used (For more info see [storybook-export-vs-name-handling](https://storybook.js.org/docs/formats/component-story-format/#storybook-export-vs-name-handling))

package/docs/grid.md

@@ -1,10 +1,10 @@
-## Use your Selenium Grid (BrowserStack/SauceLabs/etc)
-
-Sometimes you already have Selenium Grid on one of many different e2e testing services, like LambdaTest, BrowserStack, or SauceLabs , or use a self-hosted one. You could use these services. If your Selenium Grid is located in the same network where you going to start Creevey, you will need to define `gridUrl` parameter in Creevey config. Overwise you need to start tunneling tool depending on what Grid you use:
-
-- [LambdaTest] (https://www.npmjs.com/package/@lambdatest/node-tunnel)
-- [browserstack-local](https://www.npmjs.com/package/browserstack-local)
-- [sauce-connect-launcher](https://www.npmjs.com/package/sauce-connect-launcher)
-- [open-ssh-tunnel](https://www.npmjs.com/package/open-ssh-tunnel)
-
-To start one of these tool use `before/after` hook parameters in Creevey config.
+## Use your Selenium Grid (BrowserStack/SauceLabs/etc)
+
+Sometimes you already have Selenium Grid on one of many different e2e testing services, like LambdaTest, BrowserStack, or SauceLabs , or use a self-hosted one. You could use these services. If your Selenium Grid is located in the same network where you going to start Creevey, you will need to define `gridUrl` parameter in Creevey config. Overwise you need to start tunneling tool depending on what Grid you use:
+
+- [LambdaTest] (https://www.npmjs.com/package/@lambdatest/node-tunnel)
+- [browserstack-local](https://www.npmjs.com/package/browserstack-local)
+- [sauce-connect-launcher](https://www.npmjs.com/package/sauce-connect-launcher)
+- [open-ssh-tunnel](https://www.npmjs.com/package/open-ssh-tunnel)
+
+To start one of these tool use `before/after` hook parameters in Creevey config.

package/docs/tests.md

@@ -1,63 +1,63 @@
-## Write tests
-
-By default Creevey generate for each story very simple screenshot test. In most cases it would be enough to test your UI. But you may want to do some interactions and capture one or multiple screenshots with different states of your story. For this case you could write custom tests, like this
-
-```tsx
-import React from 'react';
-import { Story } from '@storybook/react';
-import { CreeveyStory } from 'creevey';
-import MyComponent from './src/components/MyComponent';
-
-export default { title: 'MyComponent' };
-
-export const Basic: Story & CreeveyStory = () => <MyComponent />;
-Basic.parameters = {
-  creevey: {
-    captureElement: '#root',
-    tests: {
-      async click() {
-        await this.browser.actions().click(this.captureElement).perform();
-
-        await this.expect(await this.takeScreenshot()).to.matchImage('clicked component');
-      },
-    },
-  },
-};
-```
-
-NOTE: Here you define story parameters with simple test `click`. Where you setup capturing element `#root` then click on that element and taking screenshot to assert it. `this.browser` allow you to access to native selenium webdriver instance you could check [API here](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html).
-
-You also could write more powerful tests with asserting multiple screenshots
-
-```tsx
-import React from 'react';
-import { CSFStory } from 'creevey';
-import MyForm from './src/components/MyForm';
-
-export default { title: 'MyForm' };
-
-export const Basic: CSFStory<JSX.Element> = () => <MyForm />;
-Basic.story = {
-  parameters: {
-    creevey: {
-      captureElement: '#root',
-      delay: 1000,
-      tests: {
-        async submit() {
-          const input = await this.browser.findElement({ css: '.my-input' });
-
-          const empty = await this.takeScreenshot();
-
-          await this.browser.actions().click(input).sendKeys('Hello Creevey').sendKeys(this.keys.ENTER).perform();
-
-          const submitted = await this.takeScreenshot();
-
-          await this.expect({ empty, submitted }).to.matchImages();
-        },
-      },
-    },
-  },
-};
-```
-
-NOTE: In this example I fill some simple form and submit it. Also as you could see, I taking two different screenshots `empty` and `submitted` and assert these in the end.
+## Write tests
+
+By default Creevey generate for each story very simple screenshot test. In most cases it would be enough to test your UI. But you may want to do some interactions and capture one or multiple screenshots with different states of your story. For this case you could write custom tests, like this
+
+```tsx
+import React from 'react';
+import { Story } from '@storybook/react';
+import { CreeveyStory } from 'creevey';
+import MyComponent from './src/components/MyComponent';
+
+export default { title: 'MyComponent' };
+
+export const Basic: Story & CreeveyStory = () => <MyComponent />;
+Basic.parameters = {
+  creevey: {
+    captureElement: '#root',
+    tests: {
+      async click() {
+        await this.browser.actions().click(this.captureElement).perform();
+
+        await this.expect(await this.takeScreenshot()).to.matchImage('clicked component');
+      },
+    },
+  },
+};
+```
+
+NOTE: Here you define story parameters with simple test `click`. Where you setup capturing element `#root` then click on that element and taking screenshot to assert it. `this.browser` allow you to access to native selenium webdriver instance you could check [API here](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html).
+
+You also could write more powerful tests with asserting multiple screenshots
+
+```tsx
+import React from 'react';
+import { CSFStory } from 'creevey';
+import MyForm from './src/components/MyForm';
+
+export default { title: 'MyForm' };
+
+export const Basic: CSFStory<JSX.Element> = () => <MyForm />;
+Basic.story = {
+  parameters: {
+    creevey: {
+      captureElement: '#root',
+      delay: 1000,
+      tests: {
+        async submit() {
+          const input = await this.browser.findElement({ css: '.my-input' });
+
+          const empty = await this.takeScreenshot();
+
+          await this.browser.actions().click(input).sendKeys('Hello Creevey').sendKeys(this.keys.ENTER).perform();
+
+          const submitted = await this.takeScreenshot();
+
+          await this.expect({ empty, submitted }).to.matchImages();
+        },
+      },
+    },
+  },
+};
+```
+
+NOTE: In this example I fill some simple form and submit it. Also as you could see, I taking two different screenshots `empty` and `submitted` and assert these in the end.

package/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  moduleNameMapper: {
+    '#(.*)': '<rootDir>/node_modules/$1',
+  },
+  transformIgnorePatterns: [],
+};