Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Unit test when there is style on the component

$
0
0

I'm checking out Svelte 5 and I have this simple component

<script lang="ts">    let {        name    }: {        name: string;    } = $props();</script><h1>    Hello! {name}</h1>

I made a unit test

import { render, screen } from '@testing-library/svelte';import { describe, it, expect } from 'vitest';import '@testing-library/jest-dom';import Header from '../components/Header.svelte';describe('Header.svelte', () => {  it('renders with default name', () => {    render(Header);    expect(screen.getByText('Hello!')).toBeInTheDocument();  });  it('renders with a custom name', () => {    render(Header, { props: { name: 'John' } });    expect(screen.getByText('Hello! John')).toBeInTheDocument();  });});

This works fine. But if I update/add a style on Header.svelte like:

<script lang="ts">    let {        name    }: {        name: string;    } = $props();</script><h1>    Hello! {name}</h1><style>    // I added a style tag here. empty and not empty</style>

This results in error:

TypeError: Error while preprocessing path/to/component/Header.svelte -Cannot create proxy with a non-object as target or handler❯ new PartialEnvironmentnode_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:16766:19  ❯preprocessCSSnode_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:48447:23  ❯node_modules/@sveltejs/vite-plugin-svelte/src/preprocess.js:114:10  ❯stylenode_modules/@sveltejs/vite-plugin-svelte/src/preprocess.js:77:37  ❯process_single_tagnode_modules/svelte/src/compiler/preprocess/index.js:283:21  ❯replace_in_codenode_modules/svelte/src/compiler/preprocess/replace_in_code.js:70:23 ❯ process_tagnode_modules/svelte/src/compiler/preprocess/index.js:300:26  ❯Module.preprocessnode_modules/svelte/src/compiler/preprocess/index.js:363:25  ❯compileSveltenode_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:85:20

Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>