Svelte

You should create a main Svelte component named App.svelte as the entry point of your Svelte application. Your Svelte code should be linted using ESLint with the recommended configuration for Svelte.

Entry file

The entry file for this template must be index.js.

Version

Running on Node.js v20.0.0

Supported languages

Typescript or Javascript

Testing framework

Jest

Special reminders and implementation details

import { render, fireEvent } from '@testing-library/svelte';
import Button from './Button.svelte';

test('button click updates count', async () => {
  const { getByText } = render(Button);
  const button = getByText('Click me');
  await fireEvent.click(button);
  expect(getByText('Clicked 1 times')).toBeInTheDocument();
});

Remember to always keep your components modular and make use of Svelte's reactivity, stores, and lifecycle functions for efficient data handling and DOM manipulations. Utilize Svelte's concise syntax to create interactive user interfaces with minimal boilerplate.

Included libraries

• svelte
• @babel/preset-env
• @sveltejs/vite-plugin-svelte
• @testing-library/jest-dom
• @testing-library/svelte
• @testing-library/user-event
• babel-jest
• babel-plugin-transform-vite-meta-env
• jest
• jest-environment-jsdom
• jest-transform-stub
• svelte-jester
• vite

Write-tests challenges

This template supports write-tests challenges. The reference solution is already written and you write the tests: they must pass on the reference solution and catch every hidden buggy variant. Test runs your tests against the reference solution only, while Verify tests and Submit also run them against the hidden buggy variants. Read Solving a write-tests challenge for the full flow.

• Test runner: Jest + @testing-library/svelte
• The @testing-library/jest-dom matchers (toBeInTheDocument, toBeDisabled) are registered for you.
• await every fireEvent call: Svelte flushes DOM updates asynchronously, and an assertion right after an un-awaited click reads the old state.
• Name test files *.spec.js and call cleanup() in afterEach.

A complete example is in Write-tests examples by template.

How to debug

Debugging Svelte code is similar to debugging JavaScript, and you can use console.log() statements in Svelte just as you would in JavaScript.

Steps to Debug Using Console Logs

1. Identify the Problem Area: Locate the section of your Svelte code where you suspect the problem might be.

2. Insert console.log() Statements: Add console.log() statements before and after the suspected problematic code to print out variable values and flow control.

3. Check the Results Output of your tests

4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output or check your browser console.

5. Analyze the Output: Look at the values printed in the console to understand what's going wrong in your code. Adjust your code based on the findings and repeat as necessary.

Here’s an example of how to use console.log() for debugging in Svelte:

<script lang="ts">
  let a = 5;
  let b = 10;

  function calculateSum(a: number, b: number): number {
      console.log("calculateSum called with arguments:", a, b); // Log function call
      let sum: number = a + b;
      console.log("Sum after addition:", sum); // Log sum calculation
      return sum;
  }

  let result: number = calculateSum(a, b);
  console.log("Result of calculateSum:", result); // Log the result
</script>

<p>Result: {result}</p>