Mastering TypeScript and React Testing with 3TG

We’ll explore why testing is a crucial part of modern software development.

First, let’s talk about quality. Tests help ensure that your code works as expected and continues to work as you add new features or fix bugs. They act like a safety net, catching issues early before they reach your users.

Next, consider speed. While writing tests might feel like extra work upfront, it actually saves you time in the long run. Automated tests allow you to quickly verify your code without manually checking every change. This speeds up development and reduces costly regressions.

Finally, tests give you confidence. When you run your tests and they all pass, you can feel assured that your code behaves correctly. This confidence makes it easier to refactor, optimize, or extend your codebase without fear.

Let’s dive in!

Automated test generation tools can save developers a tremendous amount of time by creating tests quickly and efficiently. However, it’s important to understand their limitations to use them effectively.

First, 100% coverage does not mean 100% behavior coverage. Just because every line or function in your code is tested, it doesn’t guarantee that every possible behavior or scenario is tested. Auto-generated tests often focus on verifying that the code executes without errors, but they may miss subtle behavioral nuances.

Second, generated tests only reflect the existing code - they do not inherently understand your business intent. Automated tools analyze your code’s structure and generate tests based on that, but they can’t interpret the why behind your implementation. This means that if your code has a bug or is missing a required feature, the generated tests won’t catch it because they’re testing what is, not what should be.

Finally, there is a real risk of skipping edge cases and complex scenarios. Auto-generated tests usually cover the “happy path” or common cases. They often lack the ability to anticipate and test rare or exceptional conditions, which could cause problems in production.

So while auto-generated tests are a great starting point, you should always supplement them with carefully written manual tests that cover your application’s business rules, edge cases, and error handling - or use tools like 3TG, which generates tests for all meaniningfull possible use cases.

Here’s a comprehensive list of types of software testing, grouped by their purpose and scope:

1. By Scope and Granularity

✅ Unit Testing

Tests individual functions or methods in isolation.

✅ Component Testing

Tests a single UI component, often including its interactions and rendering logic.

✅ Integration Testing

Tests the interaction between two or more components or modules.

Example: Test how a service communicates with an API.

✅ End-to-End (E2E) Testing

Simulates real user scenarios by testing the entire app flow.

Tools: Cypress, Playwright, Selenium.

✅ System Testing

Tests the complete, integrated system to verify it meets requirements.

2. By Purpose or Focus

✅ Regression Testing

Ensures new changes haven’t broken existing features.

✅ Smoke Testing

A quick set of basic tests to check if the software is stable enough for further testing.

✅ Sanity Testing

Focuses on specific functionality after changes or bug fixes.

✅ Acceptance Testing (UAT)

Verifies the software meets business or user requirements.

Often done by stakeholders or QA teams.

✅ Functional Testing

Tests specific features against defined requirements.

✅ Non-Functional Testing

Includes performance, security, usability, etc.

3. Special Types

✅ Performance Testing

Measures how the system performs under load or stress.

- Load Testing

- Stress Testing

- Soak Testing

✅ Security Testing

Validates that the application is secure from threats and vulnerabilities.

✅ Accessibility Testing

Ensures the application is usable by people with disabilities.

Tools: Axe, Lighthouse, screen readers.

✅ Usability Testing

Checks how user-friendly and intuitive the application is.

✅ Compatibility Testing

Ensures the software works across different browsers, devices, or operating systems.

✅ Localization & Internationalization Testing

Verifies correct translation, formatting, and adaptation for different regions/languages.

✅ Mutation Testing

Deliberately introduces faults (mutations) to test suite to check if tests can catch them.

✅ Snapshot Testing

Compares rendered UI output to a saved version to detect unexpected changes.

Common in React testing.

What is jest

Jest is a JavaScript testing framework developed and maintained by Facebook. It's widely used for testing React applications - but it’s not limited to React. You can use Jest to test any JavaScript or TypeScript code.

You can visit its website at jests.io.

Let’s go over some of the key features that make Jest so powerful:

- Zero configuration to get started - Jest works right out of the box for most projects.

- Snapshot testing, which helps detect unexpected UI changes.

- Built-in mocking, so you can mock functions, modules, and timers easily.

- Parallel test execution for faster test runs.

- And best of all - it has a great developer experience, with helpful error messages and a simple syntax.

Jest is trusted by thousands of developers and large companies around the world. If you’re working with React or TypeScript, Jest is often the default choice for unit and integration testing.

What is vitest

Vitest is a fast, modern testing framework built for Vite projects. It offers instant startup, native ESM support, and seamless integration with TypeScript and modern JavaScript.

Vitest is a great choice for testing in modern React, Vue, and other Vite-powered applications.

You can visit its website at vitest.dev.

Let’s go over some of the key features that make Vitest so powerful:

Lightning-Fast Testing - Vitest starts and runs tests incredibly fast

Jest-Compatible API - Uses familiar syntax like describe, it, and expect, making it easy to adopt.

First-Class TypeScript Support - Written in TypeScript, with great typings and minimal configuration.

Watch Mode & ESM Support - Automatically reruns tests on file changes and fully supports modern ES Modules.

Vitest is embraced by modern developers for its speed, simplicity, and seamless integration with Vite-powered projects.

Also, if you’ve used Jest before, Vitest will feel very familiar as its API is nearly identical.

Comparing Jest and Vitest Testing Frameworks.

What Is Compatible.

What Can Break Compatibility.

Simple Jest mocks can work in Vitest with minor changes.

You must replace jest. with vi. and check for environment-specific APIs.

Jest and Vitest mock files are mostly compatible, but not fully - especially for advanced mocking behavior.

If you want true compatibility, write mocks in a framework-neutral way or generate them with config-aware tools like 3TG that adapt the syntax.

Mocks, Stubs, and Spies

We’ll explore the critical role that mocks, stubs, and spies play in unit testing. You’ll learn when and why to use them, how they differ, and how to apply them effectively in TypeScript and React projects—both manually and using tools like 3TG.

Mocks are simulated versions of real functions or services. They're used in tests to:

•Replace real dependencies (e.g., HTTP calls, database access)

•Verify how dependencies are used (calls, arguments, order)

•Enable test determinism by producing consistent, predictable results regardless of external conditions

•Facilitate error simulation (like timeouts, server failures, or unexpected inputs)

- Improve test performance by replacing real dependencies

We’ll explore the critical role that mocks, stubs, and spies play in unit testing. You’ll learn when and why to use them. How they differ, and how to apply them effectively in TypeScript and React projects - both manually and using tools like 3TG.

Mocks vs. Stubs vs. Spies

Stubs: Return fixed responses to specific inputs.

Mocks: Like stubs, but also track how they’re used (called, with what arguments).

Spies: Wrap real functions to track usage without replacing the original behavior.

Common Challenges in TypeScript

•Typing mocked modules and functions can be verbose or tricky.

•Ensuring type safety while mocking imported functions as they can lead to broken contracts.

•Compatibility with tools like Jest or Vitest.

•Mocking React hooks like useEffect or useContext can be tricky.

•Reused functions or components may need different mocks across tests.

•Functional components with side effects are harder to isolate cleanly.

Writing clear and minimal tests

Tests must be are concise, easy to understand, and focused on a single responsibility.

Match Source File Names

Use the same name for the test file as the component it tests.

Use Behavior-Driven Naming

Tests should describe what the app should do - not how it’s built.

Common anti-patterns

1. Over-Mocking

What it is: Mocking too many dependencies or internal functions, making the test unrealistic.

Why it's bad: It removes the real behavior and increases the gap between tests and actual runtime behavior.

Example: Mocking a function that could be tested with real logic easily.

2. Snapshot Overuse

What it is: Relying heavily on expect(component).toMatchSnapshot().

Why it's bad: Snapshots can become large and noisy, and developers often auto-accept changes without review.

Best Practice: Use snapshots only for simple, stable outputs like pure functions or small components.

3. Testing Implementation Details

What it is: Asserting on internal variables or function calls rather than outputs or user-facing behavior.

Why it's bad: Makes tests fragile and tightly coupled to the code, breaking with refactors that don’t affect behavior.

React Example: Checking the internal state of a hook instead of what’s rendered on screen.

4. Not Testing Edge Cases

What it is: Only testing happy paths or default scenarios.

Why it's bad: Leaves gaps in test coverage for invalid input, boundary values, and failure states.

5. Unclear Test Names

What it is: Naming tests vaguely like should work correctly.

Why it's bad: Makes it hard to understand what the test is verifying.

Tip: Use names that reflect input, behavior, and expected output:

it("displays an error message when login fails")

6. Slow Tests

What it is: Long-running tests due to real HTTP requests, timers, or unnecessary rendering.

Why it's bad: Discourages frequent test runs and slows down CI/CD pipelines.

Solution: Use mocking only where necessary, and optimize test setup.

7. Testing Too Much in One Test

What it is: Verifying multiple unrelated behaviors in a single it() block.

Why it's bad: Hard to debug and maintain. One failure hides others.

Fix: Split into focused, single-purpose test cases.

8. Flaky Tests

What it is: Tests that sometimes pass, sometimes fail (due to async timing issues, shared state, etc.).

Why it's bad: Undermines trust in test results.

Fix: Ensure proper isolation, cleanups, and correct handling of async operations.

9. Not Using Descriptive Assertions

What it is: Writing generic assertions like expect(result).toBeTruthy().

Why it's bad: Doesn't show what was expected to happen if it fails.

Fix: Use specific and meaningful assertions like expect(result.status).toBe('success').

What is unit testing?

Unit testing is a software testing technique where individual units or components of a program are tested in isolation. A unit typically refers to the smallest piece of testable code - usually a function, method, or class. Isolation in testing involves mocking dependencies.

The goal is to validate that each unit of code performs as expected independently, without relying on external systems like databases, APIs, or the UI.

Why Unit Testing Matters?

- Detects bugs early in the development process

- Improves code quality by encouraging modular, testable code

- Facilitates refactoring without fear of breaking functionality

- Supports continuous integration (CI) pipelines

- Documents expected behavior of the code

Key Characteristics of Unit Testing

- Small and Isolated: Tests focus on a single function or module.

- Fast to Run: Since they test just one unit, they execute quickly.

- Deterministic: A unit test should always return the same result when given the same input.

- Automated: Unit tests are usually executed automatically as part of the development workflow.

What Is Not Unit Testing

- It does not test how components integrate together (that’s integration testing)

- It does not test full user flows or UI interaction (that’s end-to-end testing)

A good rule of thumb: If your test fails because of something outside the unit being tested, it’s not a true unit test.

Unit Testing Return Values vs. Side Effects

Many developers test return values but forget to verify side effects. Logging, API calls, and state updates are some of possible side effects. Always ensure your tests cover both, especially if your function changes state, calls another service, or modifies the DOM.

While return values can be directly asserted, testing side effects - like function calls or external interactions - usually requires tools like mocks and spies. This is where mocking frameworks like Jest and Vitest really shine.

Anatomy of a Unit Test in TypeScript

A typical unit test in TypeScript includes a clear test description, setup of inputs or mocks, calling the function under test, and asserting the expected result. It uses frameworks like Jest or Vitest to structure tests with functions like describe, it or test, and expect for assertions.

A False Positive Test in software testing means that the test reports a passing result, even though the code being tested is actually broken or incorrect.

What Is Component Testing?

Component Testing is the process of testing individual UI components in isolation to ensure that:

- They render correctly

- Accept the correct props/inputs

- Trigger expected outputs or behaviors (such as events or callbacks)

It is a core type of unit testing in front-end development, especially in component-based frameworks like React.

Render Testing is different from Component Testing, although they often overlap and are sometimes used interchangeably.

Rendering components and interacting with the DOM

Rendering components

In component testing, we need to render components into a virtual DOM to test their behavior.

Rendering simulates how the component appears in the browser - but inside a test environment.

React Testing Library provides the render() function for this purpose. After rendering, we use queries like getByRole() to find elements.

Interacting with the DOM

React Testing Library simulates user behavior using @testing-library/user-event.

You can simulate:

- Clicking buttons or links

- Typing in inputs

- Selecting options

- Hovering, focusing, etc.

After interaction, we often want to verify a UI change, like new text appearing.

You can also check for things like:

- Element class changes

- Attribute values

- Disabled/enabled states

Handling Async Flows, State Updates, and Side Effects

Testing in React often involves more than just rendering components and checking text. Many components interact with APIs, update local or global state, and cause side effects like logging or navigation.

Writing tests is essential - but also time-consuming, repetitive, and error-prone.

3TG was created with a developer-first mindset:

Writing tests shouldn’t feel like a burden - it should feel like progress.

Many developers avoid testing not because they don’t see its value, but because writing tests often:

- Feels time-consuming

- Lacks structure

- Requires setup repetition

- Feels disconnected from writing “real” code

3TG flips that narrative by giving developers a tool that makes test creation:

- Fast

- Clear

- Motivating

By simplifying how tests are created and what they test, 3TG helps developers shift their mindset - leading them to naturally write testable, maintainable code.

When using functional requirements files clearly defining

- Why it’s being tested

- What is being tested

- What the expected results are

developers are more likely to understand, use, and embrace testing in daily development.

How 3TG Integrates into Modern Development

3TG is designed for:

- Agile and CI/CD workflows

- Component-based architectures

- Teams using TypeScript, React, and Jest/Vitest

- Developers who value both automation and control

It provides:

- A command-line interface for power users

- A VSCode extension for a seamless GUI-driven experience

- Local-only code analysis (no remote processing)

- Scalable, customizable output that fits into real-world repositories

In modern frontend or full-stack teams, 3TG can act as a jump-start tool that transforms testing from a chore into a habit.

Choosing the Right 3TG License

To purchase a 3TG license, visit the official website at 3tg.dev. 3TG is a testing solution designed primarily for companies (B2B), helping teams streamline and scale their test creation process. After purchasing a license, you’ll gain access to the 3TG command-line tool and the VSCode extension. The website provides details about available license types and pricing to help you choose the right option for your organization. The site also includes documentation and support options.

Available License Types

A DEMO license is designed to give companies a limited-time opportunity to evaluate 3TG before committing to a full license. It includes:

-No updates

- Standard support

- One-time purchase of up to 1–3 demo licenses per company

Ideal for testing 3TG's capabilities in real environments and assessing fit within your development workflow.

A START-UP license is designed for companies seeking a cost-effective testing solution for short-term projects or with limited budgets. It includes:

•Only patch updates

•Standard support

•4% discount for purchases covering at least 12 months

•1% discount for volume purchases of at least 100 licenses

A great fit for early-stage teams, temporary initiatives, or budget-conscious development efforts.

A TEAM license is the most popular option and a perfect fit for the majority of development projects. It includes:

•Patch and feature updates

•Standard support

•7% discount for purchases covering at least 12 months

•3% discount for volume purchases of at least 100 licenses

Ideal for teams looking for a balanced mix of features, flexibility, and long-term value.

An ENTERPRISE license is designed for large teams or organizations requiring enhanced support and scalability. It includes:

•Patch and feature updates

•Priority support with faster SLA

•10% discount for purchases covering at least 12 months

•5% discount for volume purchases of at least 100 licenses

Best suited for teams needing rapid assistance or managing a high number of licenses across multiple projects.

Other Support Services

The Remote Onboarding service is designed to help teams get started quickly and confidently with 3TG.

•Up to 2 days (16 hours) of interactive sessions

•Supports up to 6 participants

•Live introduction to 3TG, including core features, configuration, and usage

•Dedicated time for questions, guidance, and practical help

Empower your developers with a strong start and ensure effective use of 3TG from day one.

Ideal for:

- Companies purchasing 3TG licenses for the first time

- Teams or departments newly adopting 3TG for their testing processes

The Assistance service offers direct, personalized help to ensure successful setup and use of 3TG.

•Delivered one-to-one

•Tailored guidance to configure and integrate 3TG into your workflow

•Hands-on support to help you use 3TG effectively for your specific project needs

•Remote and flexible scheduling to suit individual availability

Ideal for:

- Developers needing dedicated setup support

- Teams looking to optimize their testing workflow with expert help

- Users seeking help beyond the documentation or onboarding sessions

How to Order Licenses

To order licenses, you can use either the 'ORDER 3TG NOW' buttons at the beginning or end of the homepage on 3tg.dev, or any 'Order now' button in the pricing section of the homepage.

Installing 3TG CLI

The installation and setup of 3TG (TypeScript Test Template Generator) are quick and easy.

Installing 3TG VSCode Extension

The installation and setup of 3TG (TypeScript Test Template Generator) are quick and easy.

Command-line Options and Flags Explained

The 3tg utility is designed to create test templates for TypeScript (.ts) and TypeScript JSX (.tsx) files, simplifying the process of creating tests for your project. Here's a detailed description of its command-line output:

Usage

node 3tg.js [-c EXTRA_CONFIGURATION.3tg.json] [-o LOCATION] sourcecode.ts **/*.tsx

Arguments

One or more paths/globs to .ts/.tsx files

Options

-v, --version It outputs the version number of the 3tg utility.

-a, --activate It fetches a license and associates it with this device and exits.

-d, --deactivate It unlinks the current license from this device and exits.

-l, --license It displays the licensing information for the program and exits.

-L, --license-debug It displays information about the license and exits.

-q, --quiet Suppress messages that indicate the progress or status of the process.

-c, --config <.3tg.json...> Include additional configuration files besides the standard one.

-f, --for <function_name...> It generates tests for specified functions.

-C, --check-config It validates the loaded configuration files (default is false).

-i, --init-configuration <.3tg.json> It creates a sample configuration file and exits.

-u, --init-functional-requirements <FUNCTIONAL_REQUIREMENTS.3tg.md> It creates a functional requirements file for provided source code files and exits.

-m, --merge <.3tg.json> It merges provided configuration files with the -c option and exits.

-o, --output <TESTS LOCATION> Specify the location for the generated test files (choices "root", "folder", "file").

-R, --root <ROOT LOCATION> Specify the root folder used to create tests with the -o root option.

-M, --create-mock It generates mock files for the input files and exits.

-N, --mock-as-function It generates mock functions as functions instead of constants.

-U, --functional-requirements <FUNCTIONAL_REQUIREMENTS.3tg.md> It creates the configuration file for -i based on this functional requirements file.

-y, --force-overwrite Force the overwrite of existing files.

-n, --no-rule-default-true Make configuration "no-" rules value to have as default value true.

-h, --help Display help information for the command.

Example

To generate test templates for all .tsx files in your project according to the specified configurations, execute the following command:

node 3tg.js -c react.3tg.json -c custom.3tg.json -o folder **/*.tsx

Using the 3TG CLI to Generate Unit Tests

In this lesson, you’ll learn how to use the 3TG (TypeScript Test Template Generator) Command Line Interface (CLI) to efficiently generate unit tests for your TypeScript functions. We’ll walk through the basic commands, how to point 3TG to specific functions, and how to configure the output to match your project’s structure. You’ll also discover how to use functional requirement files to drive meaningful test generation. By the end of the lesson, you’ll be able to create high-quality Jest test templates using simple CLI commands—saving time and promoting test-first development.