ways to test Svelte components
const svelte = require('svelte');
const assert = require('assert');
const { JSDOM } = require('jsdom');
const SCRIPT = `script`; // otherwise RunKit breaks
// testing non-DOM stuff
const C1 = svelte.create(`
<script>
export default {
computed: {
name: ({ firstname, lastname }) => firstname + ' ' + lastname
}
};
</script>
`);
const c1 = new C1({
data: {
firstname: 'Kent',
lastname: 'Dodds'
}
});
assert.equal(c1.get().name, 'Kent Dodds');
// testing client-side rendering
const C2 = svelte.create(`
<h1>Hello {name}!</h1>
`);
const { window } = new JSDOM();
global.document = window.document;
const c2 = new C2({
target: document.body,
data: {
name: 'Kent'
}
});
assert.equal(document.body.innerHTML, '<h1>Hello Kent!</h1>');
// testing server-side rendering
const ServerSideComponent = svelte.create(`
<h1>Hello {name}!</h1>
`, {
generate: 'ssr'
});
const { html } = ServerSideComponent.render({ name: 'Rich' });
assert.equal(html, '<h1>Hello Rich!</h1>');
'ok';
no comments