Enable JSX in vitest so React component tests can run

Open Beginner friendly
  • Is something wrong?
#56 2 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@29miaoet is already working on this.

Since Oct 31, 2026.

  • #62 by @29miaoet — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
92/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
nextjs, react, typescript
Domain
frontend, testing-qa

Research direction

Start with frontend/vitest.config.ts and frontend/tsconfig.json; keep the Next.js JSX setting unchanged and add the automatic JSX transform only to Vitest's esbuild options. Use frontend/src/components/ui/Avatar.tsx as the first target, then add frontend/src/components/ui/Avatar.test.tsx covering the three rendering cases described in the issue. Run cd frontend && npx vitest run src/components/ui/Avatar.test.tsx and the full npx vitest run suite, and add the required fragment under changelog.d/.

Written by the indexing model from the issue text.

Description

claimed good first issue level: 1 testing

What is wrong / what to do
@testing-library/react and jsdom are already in devDependencies, but no .tsx component test can run. tsconfig.json sets "jsx": "preserve" for Next.js, so vitest's esbuild emits classic React.createElement calls, and rendering any component fails with ReferenceError: React is not defined. Adding esbuild: { jsx: 'automatic' } to vitest.config.ts fixes this (tested locally). Add one small component test to prove it, for example for components/ui/Avatar.tsx.

Where in the code

  • frontend/vitest.config.ts:14-23 — no esbuild / JSX setting
  • frontend/tsconfig.json:14 — "jsx": "preserve" (leave this alone; Next needs it)
  • frontend/src/components/ui/Avatar.tsx:19-39 — a simple first component to test

How to reproduce, or the test command

# test file starts with `// @vitest-environment jsdom`
cd frontend && npx vitest run src/components/ui/Avatar.test.tsx

Before the config change, render(<Avatar alt="nova" />) fails with ReferenceError: React is not defined.

Done when

  • vitest.config.ts sets esbuild: { jsx: 'automatic' } and nothing else in the config changes
  • Avatar.test.tsx checks that <Avatar alt="nova" /> renders the initial N, that <Avatar /> renders U, and that <Avatar src="x.png" alt="a" /> renders an img with alt="a"
  • The existing suite still passes (npx vitest run: 3 files / 20 tests today, plus the new one)
  • Tests added or updated, and the command above passes
  • Changelog fragment in changelog.d/
Dominant language
TypeScript
Stars
0
Forks
3
Avg merge
1d 4h
Merged PRs (30d)
5

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from BeyondITL/contentine-create

All issues in BeyondITL/contentine-create

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.