Hono•4mo ago

Using Vitest with Hono JSX // Error: Expression expected

Hi there, I'm trying to add vitest to a hono project (I've not used vitest before) and am running into a problem... The following code works fine in the browser -- hitting root on localhost shows a page with an H1 of "Hello world". When I run vitest run, I get "Error: Expression expected". Can anybody tell me what I'm doing wrong? Fingers crossed and thanks for any help 🙂

// tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "checkJs": true,
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "noEmit": true
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "checkJs": true,
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "noEmit": true
  }
}

// index.js
import { Hono } from 'hono'
import { home } from './lib/home'

const app = new Hono()

app.get('/', (c) => home(c))

export default app

// index.js
import { Hono } from 'hono'
import { home } from './lib/home'

const app = new Hono()

app.get('/', (c) => home(c))

export default app

// lib/home.js
import { Home } from '../views/Home'

const props = {
  message: 'Hello world'
}

export const home = (c) => c.html(
  <Home {...props} />
)

// lib/home.js
import { Home } from '../views/Home'

const props = {
  message: 'Hello world'
}

export const home = (c) => c.html(
  <Home {...props} />
)

// views/Home.jsx
const Layout = (props) => (
  <html>
    <body>
      {props.children}
    </body>
  </html>
)

export const Home = (props) => (
  <Layout {...props}>
    <h1>{props.message}</h1>
  </Layout>
)

// views/Home.jsx
const Layout = (props) => (
  <html>
    <body>
      {props.children}
    </body>
  </html>
)

export const Home = (props) => (
  <Layout {...props}>
    <h1>{props.message}</h1>
  </Layout>
)

// index.test.js
import { describe, expect, test } from 'vitest'
import index from './index'

describe('index worker', () => {
  test('GET /', async () => {
    const res = await index.request('/')
    expect(res.status).toBe(200)
    const body = (await res.text())
    expect(body).toBe('Hello world')
  })
})

// index.test.js
import { describe, expect, test } from 'vitest'
import index from './index'

describe('index worker', () => {
  test('GET /', async () => {
    const res = await index.request('/')
    expect(res.status).toBe(200)
    const body = (await res.text())
    expect(body).toBe('Hello world')
  })
})

2 Replies

scruffy•4mo ago

I created a repo at https://github.com/scruffymongrel/hono-jsx-vitest-repro in case it helps make this easier to answer.

GitHub

GitHub - scruffymongrel/hono-jsx-vitest-repro

Contribute to scruffymongrel/hono-jsx-vitest-repro development by creating an account on GitHub.

scruffy•4mo ago

This is now solved... the answer is to configure esbuild in the vitest.config.js:

// vitest.config.js
import { defineConfig } from 'vitest/config'

export default defineConfig({
  esbuild: {
    exclude: [],
    include: /.*\.jsx?$/,
    jsx: 'automatic',
    jsxImportSource: 'hono/jsx',
    loader: 'jsx'
  }
})

// vitest.config.js
import { defineConfig } from 'vitest/config'

export default defineConfig({
  esbuild: {
    exclude: [],
    include: /.*\.jsx?$/,
    jsx: 'automatic',
    jsxImportSource: 'hono/jsx',
    loader: 'jsx'
  }
})

Gaming

Programming

Using Vitest with Hono JSX // Error: Expression expected