import { Hono } from 'hono'
import { reactRenderer, useRequestContext } from '../src/react-renderer'
const RequestUrl = () => {
const c = useRequestContext()
return <>{c.req.url}
}
describe('Basic', () => {
const app = new Hono()
app.use(
// @ts-expect-error - `title` is not defined
reactRenderer(({ children, title }) => {
return (
{title}
{children}
)
})
)
app.get('/', (c) => {
return c.render(
,
{
title: 'Title',
}
)
})
it('Should return HTML with layout', async () => {
const res = await app.request('http://localhost/')
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe(
'Titlehttp://localhost/
'
)
})
it('Should return HTML without layout', async () => {
const app = new Hono()
app.use('*', reactRenderer())
app.get('/', (c) =>
c.render(
,
{ title: 'Title' }
)
)
const res = await app.request('http://localhost/')
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe('http://localhost/
')
})
it('nested layout with Layout', async () => {
const app = new Hono()
app.use(
'*',
// @ts-expect-error - `title` is not defined
reactRenderer(({ children, title, Layout }) => {
return (
{title}
{children}
)
})
)
const app2 = new Hono()
app2.use(
'*',
// @ts-expect-error - `title` is not defined
reactRenderer(({ children, Layout, title }) => {
return (
{children}
)
})
)
app2.get('/', (c) => c.render(http://localhost/nested
, { title: 'Nested' }))
const app3 = new Hono()
app3.use(
'*',
// @ts-expect-error - `title` is not defined
reactRenderer(({ children, Layout, title }) => {
return (
{children}
)
})
)
app3.get('/', (c) => c.render(http://localhost/nested
, { title: 'Nested2' }))
app2.route('/nested2', app3)
app.route('/nested', app2)
let res = await app.request('http://localhost/nested')
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe(
'Nestedhttp://localhost/nested
'
)
res = await app.request('http://localhost/nested/nested2')
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe(
'Nested2'
)
})
it('Should return a default doctype', async () => {
const app = new Hono()
app.use(
'*',
reactRenderer(
({ children }) => {
return (
{children}
)
},
{ docType: true }
)
)
app.get('/', (c) => c.render(Hello
, { title: 'Title' }))
const res = await app.request('/')
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe('Hello
')
})
it('Should return a content without a doctype', async () => {
const app = new Hono()
app.use(
'*',
reactRenderer(
({ children }) => {
return (
{children}
)
},
{ docType: false }
)
)
app.get('/', (c) => c.render(Hello
, { title: 'Title' }))
const res = await app.request('/')
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe('Hello
')
})
it('Should return a custom doctype', async () => {
const app = new Hono()
app.use(
'*',
reactRenderer(
({ children }) => {
return (
{children}
)
},
{
docType:
'',
}
)
)
app.get('/', (c) => c.render(Hello
, { title: 'Title' }))
const res = await app.request('/')
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe(
'Hello
'
)
})
it('Should return as streaming content with headers added in a handler', async () => {
const app = new Hono()
app.use(reactRenderer(({ children }) => <>{children}, { stream: true }))
app.get('/', (c) => {
c.header('X-Message-Set', 'Hello')
c.header('X-Message-Append', 'Hello', { append: true })
return c.render(Hi
, { title: 'Hi' })
})
const res = await app.request('/')
expect(res.status).toBe(200)
expect(res.headers.get('Transfer-Encoding')).toBe('chunked')
expect(res.headers.get('Content-Type')).toBe('text/html; charset=UTF-8')
expect(res.headers.get('X-Message-Set')).toBe('Hello')
expect(res.headers.get('X-Message-Append')).toBe('Hello')
expect(await res.text()).toBe('Hi
')
})
})
describe('Streaming', () => {
it('Should return a stream response', async () => {
const app = new Hono()
app.use(
'*',
reactRenderer(
({ children }) => {
return (
{children}
)
},
{ stream: true }
)
)
app.get('/', (c) => c.render(Hello
, { title: 'Title' }))
const res = await app.request('/')
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(res.headers.get('Transfer-Encoding')).toBe('chunked')
expect(res.headers.get('Content-Type')).toBe('text/html; charset=UTF-8')
expect(await res.text()).toBe('Hello
')
})
})