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

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')
  })
})

Hono•2y ago•

2 replies

scruffy

Using Vitest with Hono JSX // Error: Expression expected

vitest 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')
  })
})

Using Vitest with Hono JSX // Error: Expression expected

Similar Threads

Using Vitest with Hono JSX // Error: Expression expected

Similar Threads

Similar Threads

Similar Threads