Unit testing logic in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is unit testing in Svelte?

Unit testing in Svelte means checking small parts of your app, like functions or components, to make sure they work right by themselves.

beginner

Why do we write unit tests for logic in Svelte components?

We write unit tests to catch mistakes early, make sure our code works as expected, and help us change code safely without breaking things.

intermediate

How do you test a function inside a Svelte component?

You can export the function from the component and import it in your test file, then write tests to check if it returns the right results for different inputs.

beginner

What tool is commonly used for unit testing Svelte logic?

Vitest or Jest are popular tools to run unit tests for Svelte logic because they are fast and easy to set up.

intermediate

What does a good unit test for logic include?

A good unit test checks one thing clearly, uses simple inputs, and expects a specific output or behavior.

What is the main goal of unit testing logic in Svelte?

A To check small parts of code work correctly

B To test the whole app at once

C To improve app design only

D To speed up the app

Unit testing focuses on small parts like functions or components to ensure they work correctly on their own.

Which tool can you use to run unit tests in Svelte projects?

A WordPress

B Photoshop

C Excel

D Vitest

Vitest is a testing tool designed for JavaScript frameworks like Svelte.

How do you test a function inside a Svelte component?

A Rewrite the function in the test file

B Test only the HTML markup

C Export the function and import it in the test file

D Use CSS to test the function

Exporting the function allows you to import and test it directly in your test files.

What should a unit test NOT do?

A Test multiple unrelated things at once

B Use simple inputs

C Test one thing clearly

D Expect a specific output

Unit tests should focus on one thing to keep tests clear and easy to understand.

Why is unit testing logic helpful when changing code?

A It makes the app load faster

B It helps catch errors early and keeps code safe

C It changes the app design automatically

D It removes all bugs without writing code

Unit tests help find mistakes early and ensure changes don't break existing code.

Explain how you would write a unit test for a simple function inside a Svelte component.

Think about how to access the function and what to check.

Describe why unit testing logic is important in Svelte development.

Consider benefits for developers and app quality.

Practice

1. What is the main purpose of unit testing in Svelte applications?

easy

A. To write HTML templates

B. To style components with CSS

C. To check small parts of code for errors early

D. To deploy the app to production

Solution

1. Step 1: Understand unit testing purpose

   Unit testing focuses on testing small, isolated parts of code to find bugs early.

2. Step 2: Compare options to unit testing goal

   Only To check small parts of code for errors early describes checking small code parts for errors early, which matches unit testing.

3. Final Answer:

   To check small parts of code for errors early -> Option C

4. Quick Check:

   Unit testing = check small code parts early [OK]

Hint: Unit tests check small code parts, not styling or deployment [OK]

Common Mistakes:

• Confusing unit testing with styling or deployment
• Thinking unit tests write HTML templates
• Assuming unit tests run only in production

2. Which of the following is the correct syntax to define a test case in Svelte using Vitest or Jest?

easy

A. test('test case') { /* test code */ }

B. describe 'test group' { it 'test case' { /* test code */ } }

C. it 'test case' => { /* test code */ }

D. describe('test group', () => { it('test case', () => { /* test code */ }) })

Solution

1. Step 1: Recall correct test syntax

   In Vitest/Jest, tests use describe() and it() functions with arrow functions.

2. Step 2: Check each option's syntax

   describe('test group', () => { it('test case', () => { /* test code */ }) }) uses correct parentheses and arrow functions. Others miss parentheses or use wrong syntax.

3. Final Answer:

   describe('test group', () => { it('test case', () => { /* test code */ }) }) -> Option D

4. Quick Check:

   describe and it with arrow functions = correct syntax [OK]

Hint: Use parentheses and arrow functions with describe and it [OK]

Common Mistakes:

• Omitting parentheses around function arguments
• Using wrong arrow function syntax
• Confusing test and it keywords

3. Given this test code snippet, what will be the test result?

describe('sum function', () => {
  it('adds two numbers', () => {
    const sum = (a, b) => a + b;
    expect(sum(2, 3)).toBe(5);
  });
});

medium

A. The test will pass because 2 + 3 equals 5

B. The test will fail because sum is not defined

C. The test will fail because toBe is not a function

D. The test will throw a syntax error

Solution

1. Step 1: Analyze the sum function and test

   The sum function adds two numbers correctly. The test checks if sum(2, 3) equals 5.

2. Step 2: Evaluate the expect statement

   expect(sum(2, 3)).toBe(5) compares 5 to 5, which is true, so the test passes.

3. Final Answer:

   The test will pass because 2 + 3 equals 5 -> Option A

4. Quick Check:

   sum(2,3) = 5, expect toBe(5) passes [OK]

Hint: Check function output matches expected value exactly [OK]

Common Mistakes:

• Assuming sum is undefined
• Confusing toBe with other matchers
• Thinking syntax error occurs here

4. Identify the error in this Svelte unit test code:

describe('multiply function', () => {
  it('multiplies two numbers', () => {
    const multiply = (a, b) => a * b
    expect(multiply(2, 3)).toBe(6)
  }
});

medium

A. Missing closing parenthesis for the it block

B. multiply function is not defined

C. toBe matcher is used incorrectly

D. describe block is missing a callback function

Solution

1. Step 1: Check syntax of it block

   The it block starts with a parenthesis but lacks a closing parenthesis before the closing brace.

2. Step 2: Verify other parts

   multiply is defined correctly, toBe is used properly, and describe has a callback function.

3. Final Answer:

   Missing closing parenthesis for the it block -> Option A

4. Quick Check:

   Syntax error due to missing parenthesis [OK]

Hint: Count opening and closing parentheses carefully [OK]

Common Mistakes:

• Ignoring missing parentheses errors
• Thinking multiply is undefined
• Assuming toBe usage is wrong

5. You want to write a unit test in Svelte that checks if a function returns the correct value only when the input is positive. Which test logic correctly implements this condition?

function checkPositive(n) {
  return n > 0 ? 'positive' : 'not positive';
}

hard

A. expect(checkPositive(0)).toBe('positive'); expect(checkPositive(5)).toBe('not positive');

B. expect(checkPositive(5)).toBe('positive'); expect(checkPositive(-1)).toBe('not positive');

C. expect(checkPositive(-5)).toBe('positive'); expect(checkPositive(5)).toBe('positive');

D. expect(checkPositive(5)).toBe('not positive'); expect(checkPositive(-1)).toBe('positive');

Solution

1. Step 1: Understand function behavior

   checkPositive returns 'positive' if input > 0, else 'not positive'.

2. Step 2: Match test expectations to function logic

   expect(checkPositive(5)).toBe('positive'); expect(checkPositive(-1)).toBe('not positive'); tests positive input 5 returns 'positive' and negative input -1 returns 'not positive', matching function logic.

3. Final Answer:

   expect(checkPositive(5)).toBe('positive'); expect(checkPositive(-1)).toBe('not positive'); -> Option B

4. Quick Check:

   Test matches function output for positive and negative inputs [OK]

Hint: Test both positive and negative inputs to cover conditions [OK]

Common Mistakes:

• Testing zero as positive incorrectly
• Swapping expected results for inputs
• Testing only one input case