Test Procedure
Instructions
To begin, execute the following bash command:
mkdir example && cd example && mkdir src && touch jest.config.js && pnpm init && pnpm i @jest/globals @testing-library/svelte jest jest-environment-jsdom svelte svelte-jester -D && cd src && touch Example.test.js && touch Example.svelte && cd ..Add to package.json
{
"type": "module",
"scripts": {
"test": "NODE_OPTIONS=--experimental-vm-modules pnpm jest"
}
}
Setting up jest.config.js
/** @type { import('jest').Config } */
const config = {
clearMocks: true,
collectCoverage: true,
coverageDirectory: 'coverage',
coverageProvider: 'v8',
injectGlobals: false,
testEnvironment: 'jest-environment-jsdom',
moduleFileExtensions: ['js', 'svelte'],
extensionsToTreatAsEsm: ['.svelte'],
transform: { '^.+\.svelte$': 'svelte-jester' },
}
export default config
Content of Example.svelte
<script>
let value
function setValue (e) {
value = e.target.value
}
</script>
<textarea on:input={ setValue }></textarea>
{ #if value }
{ value }
{ /if }
Code for Example.test.js
import Example from './Example.svelte'
import { describe, test, expect } from '@jest/globals'
import { render, fireEvent, screen } from '@testing-library/svelte'
describe('Testing Example.svelte Component', () => {
test('Functionality Check', async () => {
const value = 'hello world'
expect(screen.queryByText(value)).toBeFalsy() // Pre-render component => No visible text in DOM
const { container } = render(Example) // Render component
const textarea = container.querySelector('textarea')
expect(screen.queryByText(value)).toBeFalsy() // Value still not present in DOM
await fireEvent.input(textarea, { target: { value } }) // Add value to textarea
expect(screen.queryByText(value)).toBeTruthy() // Value should be visible in DOM now
await fireEvent.input(textarea, { target: { value: '' } }) // Remove value from textarea
expect(screen.queryByText(value)).toBeFalsy() // Value should no longer be present in DOM
})
})
Evaluation Results
- All tests have passed successfully
- The issue with an uncovered line #11 in
Example.sveltehas been identified.
PASS src/Example.test.js
Example.svelte
✓ Functionality Check (26 ms)
----------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------------|---------|----------|---------|---------|-------------------
All files | 100 | 0 | 100 | 100 |
Example.svelte | 100 | 0 | 100 | 100 | 11
----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.113 s