The beauty of MSW

Victor — Fri, 18 Oct 2024 03:34:53 +0000

Why We Love MSW

Back in the day, when we were trying to create a new project, we considered the possibility of not depending heavily on the backend. Our idea was to receive mocks for the backend's current work and then proceed in parallel. This approach would allow us to have the necessary data ready when the backend completed its work, so we wouldn't need to make any changes. Once the backend was deployed, we could simply disable the mocks in the development server and switch to the real endpoints.

I'm sure many tools exist that enable you to create mocks and replace them later with real endpoints. However, we found a great solution: Mock Service Worker (MSW).

What is MSW?

MSW is a powerful tool that allows you to intercept and mock network requests. It works both on the client-side and server-side, making it incredibly versatile. With MSW, you can create realistic mocks for your API endpoints, enabling you to develop and test your application without relying on the actual backend.

Benefits of Using MSW

Local Development

MSW helps to avoid making numerous calls to the backend during local development. This reduces load on the backend services and speeds up the development process. Here's an example of how you can set up MSW for local development:

// src/mocks/handlers.js
import { rest } from 'msw';

export const handlers =
  [
    http.get(
      URL,
      ({
        request,
      }) => {
        return HttpResponse.json(
          {
            title:
              'Mock Data',
          },
        );
      },
    ),
  ];

// src/mocks/browser.js
import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker =
  setupWorker(
    ...handlers,
  );

// src/index.js
if (
  process.env
    .NODE_ENV ===
  'development'
) {
  const {
    worker,
  } = require('./mocks/browser');
  worker.start();
}

QA Testing

MSW helps QA teams test the UI without making actual calls to the backend. This is especially useful when the backend is unstable or under heavy development. QA engineers can work with predefined mock data, ensuring that the frontend works as expected.

Automated Testing

For automated testing, MSW avoids the need to intercept each call manually. With a basic configuration, you can mock responses for various scenarios, making your tests more reliable and easier to write. Here’s an example of setting up MSW in a test environment:

// src/mocks/server.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server =
  setupServer(
    ...handlers,
  );

// src/setupTests.js
import { server } from './mocks/server';

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

How to Handle Handlers

You can organize your handlers by grouping them into separate files and combining them as needed. For example:

// src/mocks/handlers.js
import { userHandlers } from './user';
import { productHandlers } from './product';

export const handlers =
  [
    ...userHandlers,
    ...productHandlers,
  ];

Each handler can have multiple scenarios for testing purposes. Here's an example of how to define and use scenarios:

Scenarios in Handlers

A scenario is a predefined set of responses that simulate different conditions, such as success or error states. This allows you to easily switch between different mock responses.

// src/mocks/user.js
import { rest } from 'msw';

const USER_URL =
  'http://pii.dev.localhost:3200/api/v1/userV2/current';

const scenarios = {
  success: [
    http.get(
      URL,
      ({
        request,
      }) => {
        return HttpResponse.json(
          {
            title:
              'Mock Data',
          },
        );
      },
    ),
  ],
  error: [
    http.get(
      USER_URL,
      () => {
        return HttpResponse.json(
          {
            error:
              'Unauthorized',
          },
          {
            status: 401,
          },
        );
      },
    ),
  ],
};

const scenarioName =
  new URLSearchParams(
    window.location.search,
  ).get(
    'scenario',
  ) || 'success';
export const userHandlers =
  scenarios[
    scenarioName
  ] || [];

Explanation of Scenarios

Scenarios allow you to easily test different conditions your application might encounter. By changing the scenario query parameter in the URL, you can simulate different responses without changing the code.

For example, to test the success scenario, you would navigate to:

http://yourapp.localhost/?scenario=success

And for the error scenario:

http://yourapp.localhost/?scenario=error

This approach allows you to dynamically switch between different mock responses, making your development and testing process more flexible and efficient.

By using MSW, we have a seamless way to handle mock data and API responses in both development and testing environments. It allows us to focus on developing features and writing tests without worrying about the backend's availability or stability. With MSW, we can confidently create realistic mock scenarios and ensure our application works correctly before integrating with the real backend.

I'm still discovering how MSW works. If you have any better solutions, please feel free to tell me.

If you want to check the best practices, feel free to check the documentation.

The Crucial Role of Theory in Senior JavaScript Interviews: Beyond Problem Solving

Victor — Sun, 03 Sep 2023 02:50:22 +0000

Securing a senior-level role in the ever-evolving world of web development can be an exhilarating challenge. In these high-stakes interviews, you'll likely encounter questions that probe your theoretical knowledge of JavaScript, covering concepts like hoisting, event bubbling, event loop, stack, and the core workings of JavaScript. In this article, we'll explore why theoretical knowledge is so vital for senior JavaScript roles and how combining it with practical experience can set you on the path to success.

Strong Foundation in JavaScript Fundamentals

At the senior level, employers expect you to possess a profound understanding of the core concepts that underpin JavaScript. These include hoisting, which determines how variable and function declarations are processed, and the event loop, responsible for handling asynchronous operations. A comprehensive grasp of these fundamentals is essential because they influence how you approach complex problems and design efficient solutions.

Event Bubbling and Event Delegation Mastery

Event bubbling and event delegation are critical topics for senior JavaScript developers. Understanding how events propagate through the DOM and how to efficiently manage event listeners can significantly impact the performance and maintainability of web applications. Demonstrating your knowledge of these concepts can showcase your ability to create scalable and robust user interfaces.

Deeper Insight into the Call Stack and Execution Context

To excel in senior JavaScript interviews, you should not only know what the call stack is but also how it operates. You should be able to explain how JavaScript manages execution contexts and the order in which functions are called and resolved. This knowledge is crucial for optimizing code execution and diagnosing complex issues.

Theoretical vs. Practical Problem Solving

While practical problem-solving skills are essential, theoretical knowledge provides the foundation upon which you build your problem-solving abilities. For instance, understanding the event loop and how it works enables you to write efficient asynchronous code and troubleshoot performance bottlenecks effectively.

Experience and Problem-Solving Complement Theory

Your unemployment period provides an excellent opportunity to gain hands-on experience and hone your problem-solving skills. Undertake personal projects, contribute to open-source initiatives, and participate in coding challenges. This practical experience will not only bolster your resume but also allow you to apply the theoretical knowledge gained during your preparation.

Embrace Technical Interviews

Technical interviews, which delve deep into your knowledge of JavaScript concepts and require you to apply them to real-world scenarios, are increasingly favored by tech companies. These interviews offer a chance to showcase your theoretical knowledge, practical skills, and creativity in solving complex problems. Embrace them as opportunities to shine.

In senior JavaScript interviews, theory and practical experience are two sides of the same coin. While your practical skills are undoubtedly important, having a strong theoretical foundation in JavaScript concepts such as hoisting, event bubbling, and the event loop is equally crucial. This knowledge not only demonstrates your expertise but also equips you to tackle intricate problems with confidence.

If you believe there are additional concepts worth mentioning or have other valuable insights to share, please feel free to leave them in the comments below. Your input can further enrich the discussion and help aspiring developers prepare more effectively for senior JavaScript roles in the dynamic world of web development.

DEV Community: Victor