Unit testing. Just hearing those words might send a shiver down your spine.

Maybe it reminds you of a time when you confidently wrote tests, only to watch them fail spectacularly and question your entire existence.

Or maybe you just pretend unit testing doesn’t exist and hope your code never breaks (spoiler: it will).

Well, its not as inmpossible as it might feel..

Lets look at some simple setups for testing with React and Angular.

🛠️ Why Unit Testing Matters (Yes, It Really Does!)

• Catches bugs early – Saves you from future nightmares.
• Improves refactoring confidence – Make changes without fear.
• Encourages better code – Forces you to write modular, testable code.
• Makes onboarding easier – New devs can read tests to understand the codebase.

⚡ Setting Up Testing in Angular

1️⃣ The Testing Stack

Angular comes with Jasmine (for writing tests) and Karma (for running them). It’s like Batman and Robin but for unit tests.

To get started:

1
2
3

ng new my-angular-app --strict
cd my-angular-app
ng test

Boom! You now have a fully functional testing environment.

2️⃣ Writing Your First Test (It’s Not That Scary!)

A simple Angular component test looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Not too bad, right? You’re just setting up the component, creating an instance, and making sure it actually exists.

3️⃣ Mocking Dependencies with TestBed

Real services in tests? Nope. We mock those bad boys.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import { MyService } from '../services/my.service';
import { of } from 'rxjs';

describe('MyComponent', () => {
  let myServiceStub: Partial<MyService>;

  beforeEach(() => {
    myServiceStub = {
      getData: () => of(['Test Data'])
    };

    TestBed.configureTestingModule({
      providers: [{ provide: MyService, useValue: myServiceStub }]
    });
  });
});

And boom! No more flaky API calls in tests.

⚡ Setting Up Testing in React

1️⃣ The Testing Stack

For React, the holy trinity of testing tools is:

• Jest – The test runner.
• React Testing Library – A better way to test components.
• Mock Service Worker (MSW) – Mocks API calls.

To set up:

1
2
3
4

npx create-react-app my-react-app --template typescript
cd my-react-app
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
npm test

2️⃣ Writing Your First Test (Piece of Cake!)

1
2
3
4
5
6
7

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders the component', () => {
  render(<MyComponent />);
  expect(screen.getByText('Hello World')).toBeInTheDocument();
});

That’s it! No complex setup, no unnecessary mocks, just testing the output.

3️⃣ Mocking API Calls in React

For API calls, Jest and MSW are your friends.

Mocking Fetch with Jest

1
2
3
4
5
6

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

global.fetch = jest.fn(() =>
  Promise.resolve({ json: () => Promise.resolve(['Test Data']) })
) as jest.Mock;

Or, even better, use Mock Service Worker (MSW):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.get('/api/data', (req, res, ctx) => {
    return res(ctx.json(['Test Data']));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

🏆 Best Practices for Both Angular and React

✅ Write small, isolated tests – Each test should focus on one thing.

✅ Mock dependencies – Keep tests fast and reliable.

✅ Use meaningful test names – it('should render a button') is better than it('test1').

✅ Avoid testing implementation details – Test behavior, not internals.

✅ Run tests automatically – Set up CI/CD to catch bugs before deployment.

🔑 Key Ideas

📚 References

• Jasmine Official Docs
• Jest Official Docs
• Angular Testing Guide
• React Testing Library
• Mock Service Worker (MSW)