Upgrade dependencies

.storybook/main.js

@@ -5,6 +5,6 @@ module.exports = {
   addons: [
     "../preset.js",
     "@storybook/addon-essentials",
-    "@storybook/addon-knobs",
+    "@storybook/addon-interactions",
   ],
 };

package.json

@@ -38,16 +38,18 @@
   },
   "devDependencies": {
     "@auto-it/released": "^10.32.6",
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@babel/preset-typescript": "^7.12.5",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-knobs": "^6.2.9",
-    "@storybook/addon-storyshots": "^6.2.9",
-    "@storybook/eslint-config-storybook": "^3.0.0",
-    "@storybook/svelte": "^6.2.9",
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@storybook/addon-essentials": "^6.4.20",
+    "@storybook/addon-interactions": "^6.4.20",
+    "@storybook/jest": "^0.0.10",
+    "@storybook/testing-library": "^0.0.9",
+    "@storybook/addon-storyshots": "^6.4.20",
+    "@storybook/eslint-config-storybook": "^3.1.2",
+    "@storybook/svelte": "^6.4.20",
     "auto": "^10.3.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.1.0",
@@ -60,24 +62,24 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
-    "svelte": "^3.35.0",
-    "svelte-jester": "^1.3.2",
-    "svelte-loader": "^3.0.0",
-    "typescript": "^3.3.3333"
+    "svelte": "^3.46.6",
+    "svelte-jester": "^2.3.2",
+    "svelte-loader": "^3.1.2",
+    "typescript": "^3.9.7"
   },
   "peerDependencies": {
-    "@storybook/addons": "^6.2.9",
-    "@storybook/api": "^6.2.9",
-    "@storybook/client-api": "^6.2.9",
-    "@storybook/client-logger": "^6.2.9",
-    "@storybook/components": "^6.2.9",
-    "@storybook/core-events": "^6.2.9",
-    "@storybook/svelte": "^6.2.9",
-    "@storybook/theming": "^6.2.9",
+    "@storybook/addons": "^6.4.20",
+    "@storybook/api": "^6.4.20",
+    "@storybook/client-api": "^6.4.20",
+    "@storybook/client-logger": "^6.4.20",
+    "@storybook/components": "^6.4.20",
+    "@storybook/core-events": "^6.4.20",
+    "@storybook/svelte": "^6.4.20",
+    "@storybook/theming": "^6.4.20",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "svelte": "^3.35.0",
-    "svelte-loader": "^3.0.0"
+    "svelte": "^3.46.6",
+    "svelte-loader": "^3.1.2"
   },
   "peerDependenciesMeta": {
     "svelte": {

stories/Counter.svelte

@@ -0,0 +1,10 @@
+<script>
+  let count = 0;
+</script>
+
+<div>
+  <h1>Counter</h1>
+  <h2 data-testid="count">You clicked {count} times</h2>
+  <button type="button" on:click={() => count--}>Decrement</button>
+  <button type="button" on:click={() => count++}>Increment</button>
+</div>

stories/__snapshots__/interaction.stories.storyshot

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Interactions Play 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+
+  <div>
+    <h1>
+      Counter
+    </h1>
+
+    <h2
+      data-testid="count"
+    >
+      You clicked 
+      0
+       times
+    </h2>
+
+    <button
+      type="button"
+    >
+      Decrement
+    </button>
+
+    <button
+      type="button"
+    >
+      Increment
+    </button>
+  </div>
+
+
+</section>
+`;

stories/interaction.stories.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { Meta, Story } from '../src/index';
+  import { expect } from '@storybook/jest';
+  import { userEvent, within } from '@storybook/testing-library';
+
+  import Counter from './Counter.svelte';
+
+  async function play({canvasElement}) {
+    const canvas = within(canvasElement);
+    userEvent.click(await canvas.findByText('Increment'));
+
+    const count = await canvas.findByTestId('count');
+    expect(count.textContent).toEqual('You clicked 1 times');
+  }
+</script>
+
+<Meta title="Interactions" component={Counter} />
+
+<Story name="Play" {play}>
+  <Counter />
+</Story>

stories/svelteshots.test.js

@@ -8,6 +8,8 @@ initStoryshots({
   framework: 'svelte',
   configPath: path.join(__dirname, '../.storybook'),
   integrityOptions: { cwd: __dirname },
-  stories2snapsConverter: new Stories2SnapsConverter({ storiesExtensions: ['.js', '.svelte'] }),
+  stories2snapsConverter: new Stories2SnapsConverter({ 
+    storiesExtensions: ['.js', '.svelte'], 
+    snapshotsDirName: '../__snapshots__' }),
   test: multiSnapshotWithOptions(),
 });