Hey fellow devs! 👋
In modern JavaScript and TypeScript development, we are constantly balancing two opposing forces: the desire for Code Brevity (writing concise, minimal code) and the need for Clean Testing (writing code that is easy to isolate and verify).
Often, the code that is fastest to write is the hardest to test.
Conversely, code designed for testability often looks "boilerplate-heavy" at first glance.
Let's explore this trade-off through real-world examples, moving from common patterns to the mindset required for architecting long-term scalable systems.
Round 1: The Environment Variable Dilemma
This is a classic debate that often appears in code reviews. How do you access environment variables like API keys or feature flags provided by Vite, Webpack, or Node?
The "Brief" Approach (Static Constants)
The fastest way is to read the variable directly and store it in a constant. It's one line of code. It's simple.
// config.ts
export const IS_PRODUCTION = import.meta.env.PROD;
export const API_URL = import.meta.env.VITE_API_URL;
// myFeature.ts
import { IS_PRODUCTION } from './config';
if (IS_PRODUCTION) {
// do scary real things
}
The Hidden Cost
This code is brief, but it is tightly coupled to the build system's global state.
When you write a unit test for myFeature.ts, the IS_PRODUCTION constant is evaluated immediately when the test file loads. Once that constant is set to true or false, it is extremely difficult to change it within the same test suite run.
To test both scenarios, you often have to resort to "stubbing globally" , telling your test runner (like Vitest or Jest) to fundamentally alter how the JavaScript runtime behaves.
// ❌ Messy Global Testing
vi.stubEnv('PROD', 'true');
// Now EVERY test thinks it's prod until you remember to unstub it.
// If you forget, other tests break mysteriously.
The "Testable" Approach (Getter Functions)
The alternative is to wrap the access in a function. It adds boilerplate. It feels slightly redundant.
// config.ts
// It's just a function returning a value
export const getIsProduction = () => import.meta.env.PROD;
// myFeature.ts
import { getIsProduction } from './config';
// We call the function now
if (getIsProduction()) {
// do scary real things
}
The Benefit: Creating a "Seam"
From a Senior Engineering perspective, we have just created a Seam.
A Seam is a concept (popularized by Michael Feathers) referring to a place where you can alter the behavior of your program without editing the source code.
In our tests, we no longer need to hack the global environment. We just need to spy on a standard JavaScript function.
// ✅ Clean Isolated Testing
import * as Config from './config';
test('does scary things only in prod', () => {
// Create the seam just for this test block
const spy = vi.spyOn(Config, 'getIsProduction');
spy.mockReturnValue(true);
// run expectations...
spy.mockReturnValue(false);
// run other expectations...
});
The testable approach trades brevity for isolation and control.
Round 2: Dealing with Time
Another common area where brevity hurts testing is handling current time.
The "Brief" Approach (Direct Access)
Imagine a function that determines if a discount code is expired.
// discount.ts
export const isDiscountExpired = (expiryDate: Date): boolean => {
// Brevity wins here:
const now = new Date();
return now > expiryDate;
}
This code is incredibly short. But it is non-deterministic.
If you write a test today that says "Expires tomorrow should return false", that test will pass today. But if you run that same test suite tomorrow, it will fail.
To test this, you again have to rely on heavy-handed global tool hacks like "Fake Timers" to freeze the system clock of the test runner.
The "Testable" Approach (Dependency Injection)
To make this testable, we need to take control away from the function itself and inject the dependency (time).
We can do this via a defaulted parameter (a lightweight form of Dependency Injection).
// discount.ts
// We allow 'now' to be passed in, but default to current time
export const isDiscountExpired = (
expiryDate: Date,
now: Date = new Date() // Default value makes it easy to use in app code
): boolean => {
return now > expiryDate;
}
Now the test is trivial and deterministic. We don't need to freeze system time; we just pass in a fixed date.
// ✅ Clean Testing
test('checks expiration', () => {
const fixedNow = new Date('2024-01-01T10:00:00Z');
const tomorrow = new Date('2024-01-02T10:00:00Z');
// We inject our fixed time, guaranteeing the result forever
expect(isDiscountExpired(tomorrow, fixedNow)).toBe(false);
});
The Senior Engineer's Mindset
When you are a junior or mid-level developer, your primary metric is often "velocity" , how fast can I ship this feature? Brevity helps velocity in the short term.
As you advance to senior or principal roles, your primary metrics shift to maintainability, stability, and risk reduction.
Shift Left
We want to "shift left" on bugs , finding them during unit tests on a developer's machine, rather than in QA or production.
If code is brief but relies on global state (like import.meta.env or new Date()), developers will instinctively avoid writing tests for it because writing those tests is difficult and painful.
By introducing slight amounts of boilerplate , creating getter functions, injecting dependencies, creating seams , we lower the friction required to write a test.
Conclusion
Choose Brevity for throwaway prototypes, simple scripts, or incredibly confined UI components that have zero logic.
Choose Testability for business logic, configuration, helpers, and anything that your application relies on to function correctly over time.
It looks like more code today, but it buys you peace of mind tomorrow.
If this helped, give it a heart!
Hash
SOCIAL SHARE CARD GENERATOR