React Router v7 projelerinizde loader, action ve form etkileşimlerini test etmek için standart yöntemler yetersiz kalabilir. Resmi dokümantasyon, bileşen testleri için createRoutesStub kullanımını önerse de bu yöntem rota bileşenlerinin doğrudan test edilmesi için uygun değildir. E2E test araçları olan Playwright veya Cypress’e yönlendirme ise geliştirme döngüsünden çıkmanıza ve geri bildirim süresinin uzamasına neden olur. İşte tam bu noktada, TWD (Test With Devtools) devreye giriyor.
TWD, React Router v7’nin resmi createRoutesStub aracını alıp gerçek tarayıcıda, canlı geliştirme sunucusunda ve gerçek DOM üzerinde çalıştırarak geliştiricilere ideal bir test ortamı sunuyor. Bu yaklaşım, jsdom veya headless Chrome kullanmadan doğrudan uygulamanızın üzerinde çalışıyor ve geliştirme sürecini kesintiye uğratmıyor.
TWD ile Test Ortamını Kurma
TWD kullanmaya başlamak için öncelikle gerekli paketleri yükleyin ve projenizi yapılandırın. Aşağıdaki adımlar, Vite tabanlı bir React Router v7 projesinde TWD’nin nasıl entegre edileceğini gösteriyor:
npm install --save-dev twd-js
npx twd-js init public --saveArdından Vite yapılandırma dosyanızı düzenleyin. react-router ve TWD eklentilerini projenize ekleyerek test dosyalarınızı otomatik olarak algılamasını sağlayabilirsiniz:
// vite.config.ts
import { reactRouter } from '@react-router/dev/vite'
import { defineConfig } from 'vite'
import { twd } from 'twd-js/vite-plugin'
export default defineConfig({
plugins: [
reactRouter(),
twd({
testFilePattern: '/**/*.twd.test.{ts,tsx}',
}),
],
})SSR modunda çalışırken karşılaşabileceğiniz tek özel durum, React Router’un index.html dosyasını doğrudan sunmamasıdır. Bunun yerine app/root.tsx dosyasından HTML oluşturulur ve Vite’in transformIndexHtml kancası bu HTML için çalışmaz. Bu sorunun üstesinden gelmek için app/root.tsx içerisinde geliştirme ortamında otomatik olarak eklenen bir script etiketi bulunmaktadır:
<head>
<Meta />
<Links />
{import.meta.env.DEV && (
<script type="module" src="/@id/virtual:twd/init" />
)}
</head>Bu sayede TWD’nin sanal modülü kayıt altına alınır ve Vite tarafından /@id/... adresinde sunulur. import.meta.env.DEV kontrolü sayesinde bu etiket üretim ortamında yer almaz.
Geliştirme sunucusunu başlattığınızda sol tarafta TWD araç çubuğunu, sağ tarafta ise uygulamanızı göreceksiniz.
Testler İçin Özel Bir Rota Oluşturma
TWD’nin createRoutesStub fonksiyonunu kullanmak için, stub’ın yerleştirileceği bir DOM konteynerine ve bir React köküne ihtiyacınız vardır. En temiz çözüm, yalnızca testler için kullanılan özel bir rota oluşturmaktır:
// app/routes/testing-page.tsx
export default function TestPage() {
return (
<div
data-testid="testing-page"
style={{ minHeight: '100vh' }}
/>
)
}Bu testing-page rotasını projenizin rota tablosuna /testing adresi olarak ekleyin. Ardından, testlerinizde kullanacağınız yardımcı bir fonksiyonla bu sayfaya yönlendirin ve temiz bir React kökü oluşturun:
// app/twd-tests/utils.ts
import { createRoot } from 'react-dom/client'
import { twd, screenDomGlobal } from 'twd-js'
let root: ReturnType<typeof createRoot> | undefined
export async function setupReactRoot() {
if (root) {
root.unmount()
root = undefined
}
await twd.visit('/testing')
const container = await screenDomGlobal.findByTestId('testing-page')
root = createRoot(container)
return root
}Bu basit yardımcı fonksiyon sayesinde her testte temiz bir React kökü oluşturabilirsiniz. Maliyet oldukça düşük ve bu yapıyı projenizdeki tüm testlerde yeniden kullanabilirsiniz.
Bir Rota Testi Yazma
TWD kullanarak rota bileşenlerini doğrudan test etmek mümkündür. Resmi dokümantasyon bu tür testlerin createRoutesStub ile yapılmaması gerektiğini belirtse de TWD, stub’ı gerçek uygulamanızın bulunduğu aynı belge içinde çalıştırdığından bu sınırlamayı aşar. Tüm Route.* türleri, kancaları ve gerçek DOM kullanıcının göreceği şekilde test edilir.
Örnek olarak bir todo listesi uygulamasını test etmek için aşağıdaki yapıyı kullanabilirsiniz:
// app/twd-tests/todoList.twd.test.tsx
import { twd, expect, userEvent, screenDom } from 'twd-js'
import { describe, it, beforeEach } from 'twd-js/runner'
import { createRoutesStub, useLoaderData, useParams, useMatches } from 'react-router'
import TodoListPage from '~/routes/todolist'
import todoListMock from './mocks/todoList.json'
import { setupReactRoot } from './utils'
describe('Todo List sayfası', () => {
let root: Awaited<ReturnType<typeof setupReactRoot>>
beforeEach(async () => {
root = await setupReactRoot()
})
it('loader verilerinden todo listesini oluşturur', async () => {
const Stub = createRoutesStub([
{
path: '/',
Component: () => {
const loaderData = useLoaderData()
const params = useParams()
const matches = useMatches() as any
return (
<TodoListPage
loaderData={loaderData}
params={params}
matches={matches}
/>
)
},
loader() {
return { todos: todoListMock }
},
},
])
root.render(<Stub />)
await twd.wait(300)
const firstTodoTitle = await screenDom.getByText('Learn TWD')
twd.should(firstTodoTitle, 'be.visible')
const firstTodoDate = await screenDom.getByText('Date: 2024-12-20')
twd.should(firstTodoDate, 'be.visible')
})
it('doğru yük yükü ile action gönderir', async () => {
let payload: Record<string, string> | null = null
const Stub = createRoutesStub([
{
path: '/todos',
Component: () => null,
loader() {
return { todos: [] }
},
async action({ request }) {
const formData = await request.formData()
payload = Object.fromEntries(formData) as Record<string, string>
return null
},
},
])
root.render(<Stub initialEntries={['/todos']} />)
const titleInput = await screenDom.getByLabelText('Title')
await userEvent.type(titleInput, 'Test Todo')
const submitButton = await screenDom.getByRole('button', { name: 'Create Todo' })
await userEvent.click(submitButton)
expect(payload).to.deep.equal({
title: 'Test Todo',
})
})
})Bu test yapısı, resmi dokümantasyonun önerdiği şekilde bileşenlerin sarılmasını ve gerekli verilerin props olarak aktarılmasını içerir. TWD’nin sunduğu avantaj, bu testlerin gerçek tarayıcı ortamında ve anında geri bildirimle çalışabilmesidir. Böylece geliştirme sürecinizde herhangi bir kesintiye uğramadan rota düzeyinde testler gerçekleştirebilirsiniz.
TWD’nin sunduğu bu yaklaşım, React Router v7 projelerinizdeki test sürecini önemli ölçüde basitleştiriyor ve geliştiricilere hızlı geri bildirimlerle daha güvenilir uygulamalar oluşturma imkanı sunuyor. Bu yöntemi benimseyerek, hem uygulamanızın kalitesini artırabilir hem de geliştirme sürecinizi optimize edebilirsiniz.
Yapay zeka özeti
React Router v7 projelerinizdeki loader, action ve form bileşenlerini TWD kullanarak gerçek tarayıcıda ve canlı geliştirme ortamında test edin. Kurulum adımları ve pratik örneklerle hızlı geri bildirim alın.
