Jumpstart your testing with our new AI-powered script that automatically generates boilerplate tests for your React components.
> impact
We've introduced `scripts/generate-tests.mjs`, a new Node.js script that leverages a Large Language Model (LLM) to automate test generation. When executed, this script scans your `app/` directory for component files (e.g., `page.tsx`) and creates a corresponding test file (`.test.tsx`) populated with foundational tests using Vitest and React Testing Library.
A common bottleneck when using starter templates is the lack of a built-in testing workflow. Developers are often required to write all unit and integration tests from scratch, a manual and time-consuming process that can stifle development velocity and lead to inconsistent test coverage. We wanted to eliminate this friction and make best practices accessible right out of the box.
This new tool significantly accelerates the development cycle. With a single command, you can generate a solid testing foundation for any new component, freeing you to focus on writing feature-specific assertions rather than boilerplate setup. This not only saves time but also encourages a test-driven mindset from the very beginning of a project, leading to more robust and maintainable applications.
> Try this now
try this
# 1. Make sure you have a component to test, for example `app/page.tsx`.
# 2. Run the new test generation script from your terminal.
# This script finds your component and uses an AI to write a test for it.
node scripts/generate-tests.mjs
# 3. The script will confirm that it has created a new test file.
# > Generated test file: app/page.test.tsx
# 4. Open the newly created `app/page.test.tsx`.
# You'll find a complete, ready-to-run test file like this:
`
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import HomePage from './page';
describe('HomePage', () => {
it('should render the main heading', () => {
render(<HomePage />);
const headingElement = screen.getByRole('heading', {
name: /Welcome to your Mini App/i,
});
expect(headingElement).toBeInTheDocument();
});
});
`
# 5. This provides an instant foundation. You can now run the test suite
# and then extend the file with more specific assertions for your component's logic.
npm test