SolidJS

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

Entry file

The component file is App.jsx. The main.jsx file (preloaded, read-only) mounts your App component into the page using solid-js/web:

import { render } from 'solid-js/web';
import App from './App';

render(() => <App />, document.getElementById('root'));

Version

Running on Node.js v20.0.0

Supported languages

Javascript

Testing framework

Vitest

Special reminders and implementation details

• Tests are written with @solidjs/testing-library, which wraps SolidJS components for assertion-friendly rendering.
• render accepts a function returning JSX (() => <App />) — this matches how SolidJS mounts components and gives the test the same reactive root the real app would have.
• Use SolidJS primitives (createSignal, createEffect, createMemo) rather than React-style hooks — they look similar but behave differently (fine-grained reactivity, no re-renders).

Example with @solidjs/testing-library:

import { render, screen } from '@solidjs/testing-library';
import App from './App';

describe('App', () => {
  test("says 'Hello, World!'", () => {
    render(() => <App />);
    const node = screen.queryByText('Hello, World!');
    expect(node).toBeInTheDocument();
  });
});

Included libraries

• solid-js
• @solidjs/testing-library
• @testing-library/jest-dom
• @testing-library/user-event
• jsdom
• vite
• vite-plugin-solid
• vitest

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: Vitest + @solidjs/testing-library
• Render with a function: render(() => <App />). The jest-dom matchers are registered by the test setup.
• Solid updates the DOM synchronously, so assertions can follow fireEvent.click directly.
• Name test files *.spec.jsx.

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

How to debug

Debugging SolidJS code is similar to debugging JavaScript. Use console.log() to inspect signal values inside createEffect or directly inside JSX expressions.

Steps to Debug Using Console Logs

1. Identify the Problem Area: Locate the component or signal you want to inspect.

2. Insert console.log() Statements: Log signal values inside createEffect so they re-run whenever the signal changes, or log directly inside JSX.

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 open your browser console.

5. Analyze the Output: Compare logs against the rendered UI to spot stale signals or missed updates.

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

import { createSignal, createEffect } from 'solid-js';

export default function Counter() {
  const [count, setCount] = createSignal(0);

  createEffect(() => {
    console.log('count is now', count()); // Log every time count changes
  });

  const handleClick = () => {
    console.log('Button clicked, current count:', count());
    setCount(count() + 1);
  };

  return <button onClick={handleClick}>{count()}</button>;
}