diff --git a/test/runtime/samples/component-class-with-attribute/Child.svelte b/test/runtime/samples/component-class-with-attribute/Child.svelte
new file mode 100644
index 0000000000..7fc0f8aa86
--- /dev/null
+++ b/test/runtime/samples/component-class-with-attribute/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+  let className
+  export { className as class }
+</script>
+
+<div class={className}></div>
diff --git a/test/runtime/samples/component-class-with-attribute/_config.js b/test/runtime/samples/component-class-with-attribute/_config.js
new file mode 100644
index 0000000000..12c955c24d
--- /dev/null
+++ b/test/runtime/samples/component-class-with-attribute/_config.js
@@ -0,0 +1,15 @@
+export default {
+	props: {
+		myClass: 'one two'
+	},
+
+	html: `<div class="one two three"></div>`,
+
+	test({ assert, component, target, window }) {
+		component.myClass = 'one';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="one three"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-class-with-attribute/main.svelte b/test/runtime/samples/component-class-with-attribute/main.svelte
new file mode 100644
index 0000000000..4ea543bfa8
--- /dev/null
+++ b/test/runtime/samples/component-class-with-attribute/main.svelte
@@ -0,0 +1,6 @@
+<script>
+  import Child from './Child.svelte'
+	export let myClass;
+</script>
+
+<Child class={myClass} class:three={true}></Child>
diff --git a/test/runtime/samples/component-class-with-spread/Child.svelte b/test/runtime/samples/component-class-with-spread/Child.svelte
new file mode 100644
index 0000000000..5c463ca999
--- /dev/null
+++ b/test/runtime/samples/component-class-with-spread/Child.svelte
@@ -0,0 +1 @@
+<div {...$$props}></div>
diff --git a/test/runtime/samples/component-class-with-spread/_config.js b/test/runtime/samples/component-class-with-spread/_config.js
new file mode 100644
index 0000000000..58ccc76497
--- /dev/null
+++ b/test/runtime/samples/component-class-with-spread/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		myClass: 'one two',
+		attributes: {
+			role: 'button'
+		}
+	},
+
+	html: `<div class="one two three" role="button"></div>`,
+
+	test({ assert, component, target, window }) {
+		component.myClass = 'one';
+		component.attributes = {
+			'aria-label': 'Test'
+		};
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="one three" aria-label="Test"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-class-with-spread/main.svelte b/test/runtime/samples/component-class-with-spread/main.svelte
new file mode 100644
index 0000000000..4709e4a851
--- /dev/null
+++ b/test/runtime/samples/component-class-with-spread/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Child from './Child.svelte'
+
+	export let myClass;
+	export let attributes = {};
+</script>
+
+<Child class={myClass} class:three={true} {...attributes}></Child>
diff --git a/test/runtime/samples/component-class/Child.svelte b/test/runtime/samples/component-class/Child.svelte
new file mode 100644
index 0000000000..7fc0f8aa86
--- /dev/null
+++ b/test/runtime/samples/component-class/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+  let className
+  export { className as class }
+</script>
+
+<div class={className}></div>
diff --git a/test/runtime/samples/component-class/_config.js b/test/runtime/samples/component-class/_config.js
new file mode 100644
index 0000000000..c38cc88240
--- /dev/null
+++ b/test/runtime/samples/component-class/_config.js
@@ -0,0 +1,15 @@
+export default {
+	props: {
+		user: { active: true }
+	},
+
+	html: `<div class="active"></div>`,
+
+	test({ assert, component, target }) {
+		component.user = { active: false };
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-class/main.svelte b/test/runtime/samples/component-class/main.svelte
new file mode 100644
index 0000000000..2571dd7f18
--- /dev/null
+++ b/test/runtime/samples/component-class/main.svelte
@@ -0,0 +1,10 @@
+<script>
+  import Child from './Child.svelte'
+  export let user;
+
+  function isActive(user) {
+    return user.active;
+  }
+</script>
+
+<Child class:active={isActive(user)}></Child>