How to test a Typescript app using vitest and msw
Sandro MaglioneGet in touch with me
24 November 2023•
7 min read
In this article we are going to use
vitest in combination with
msw to test a Typescript application.
In the previous article I explained step by step how to use Effect to implement a Custom Newsletter form with ConvertKit.
In this article we are going to test the final implementation:
- Setup handlers and testing server with
- Install and configure
- Learn how to mock HTTP requests
msw (Mock Service Worker) is a library that allows to mock APIs.
In this example we use
msw to intercept and mock the response of HTTP requests. Instead of sending a request to the server,
msw allows to return mock data:
- Test app without interacting with any external service
- Verify correct behavior for all possible responses
The first step is defining mocks for environmental variables and responses. We define all the mocks inside a new
With Effect we can mock
Config by using
ConfigProvider.fromMap. This allows to provide mock values for environmental variables.
We then use
Layer.setConfigProvider to build a
Layer that we will later provide to each test:
We also need to create a mock for a
SubscribeResponse. This is a simple object used to mock a response:
Our application performs some HTTP requests. While testing we do not want to send real requests, but instead we want to intercept them and return a mocked response.
This is exactly what
msw allows us to do using handlers.
We define a list of handlers in a new
Each handler is defined using
http.post: Intercepts a POST request
- The first parameter is the URL of the request to intercept (e.g.
- The second parameter is used to define a custom mocked response
mswsupports plain strings, wildcards (
*) and also regex for the URL parameter (Documentation)
The last step with
msw is creating a server from
This step is different based on the environment where we are running our tests:
- Node: Import
- Browser: Import
- React Native: Import
In our case we are running the test on a Node environment:
There is more.
Every week I build a new open source project, with a new language or library, and teach you how I did it, what I learned, and how you can do the same. Join me and other 600+ readers.
vitest is a testing framework that provides an API to define and organize tests.
It is similar to
jest, it provides the same API, with methods like
Remember to also add
"type": "module" in
In our app we are using custom Typescripts paths defined inside
We need to configure
vitest to resolve these custom paths. We install
vite-tsconfig-paths and add it as a plugin inside
We are now ready to write some tests.
msw requires to open, reset and close the server we defined above. We can do this inside
describe to organize tests for specific functions and
it to implement the actual test:
- Define a valid
layerConfigProviderMockto provide mocks for environmental variables
- Verify that the response is equal to the expected mock
In this test
msw intercepts the HTTP request and returns
subscribeResponseMock. This test passes since we provided all the valid configurations and parameters.
We can then verify also all other possible cases (missing body, wrong request method, invalid formatting, etc.):
In this second example the body is missing the required
This is all you need to test your app!
msw we have a powerful testing API at our disposal, as well as a complete API and mocking library.
We are in complete control of all the services and requests. This allows to mock and verify all possible situations and responses.
Indeed testing can be fun and definitely satisfying!
If you are interested to learn more, every week I publish a new open source project and share notes and lessons learned in my newsletter. You can subscribe here below 👇
Thanks for reading.