Thank you so much Bruno for your amazing tutorials. I have waited for you will show MSW mocking in testing series. Pls. Next would be Cypress with msw and new cypress component testing feature
@@BrunoAntunesPT I found what I was looking for and I swear to God that your series saved my job in the company I don't know how to thank you ... May God protect you ... THANKS A LOT .... th-cam.com/video/6FKSqWmZ5Ec/w-d-xo.html&ab_channel=BrunoAntunes
When I add rest.get("/api/photos", (req, res, ctx) => {}), TypeScript tells me that Photo[] does not satisfy the constraint 'PathParams'. Index signature for type 'string' is missing in type 'Photo[]'. Why can I not annotate the type here?
Awesome video lessons)) Mr. Bruno, I see you use Windows OS. Can you do a comparison video between Windows, Mac, and Linux? Just interested in your opinion))
Thanks you very much 😍😍 Honestly, I like the 3 🙂 I change quite often between them. I recently bought a Mac mini with m1 chip and I'm enjoying it quite a lot 🙂 Sadly, my windows laptop died and I needed something good and cheap, so I bought this Mac mini which is faster than my old laptop for like 1000 dollars (16gb ram 512gb disk) 🙂 If you need a computer today I would highly recommend an m1 or m1 pro today 🙂
Good lesson, why do you nest describe blocks? I never saw people do that before, is it possible to do this with no more than single level deep describe blocks? With nested describe blocks tests look chaotic and complex.
I prefer it that way, because it's easier to read and understand. This way tests make more logical sense to me. That being said I'm aware some people might have a different opinion and that's absolutely fine 🙂 Answering your question, I have good news for you: you don't even need to use describe blocks in tests, they are 100% optional 🙂
Great content and I love your energy. Thanks a lot Bruno 🤙 Can I use a real API endpoint for my handler instead of api directory of next js for example Rick and morty API?
Hey Bruno! I noticed that you use void operator before some function calls. Never seen such pattern before, where can I read about it? Tried to google but haven't found any exact explanation))
That's a eslint rule. It's a very very handy eslint rule to have in your production projects, to check if you catch all the errors from your promises or not 😊 when you are sure you don't want to catch errors from a specific promise you put void and the rule knows you did that on purpose not because you forgot to handle errors 😊 github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-floating-promises.md
Viva Bruno tudo bem? :D First of all, a huge thank you for the great content, I love how you explain the subjects. Bruno, I'm trying to get MSW to work with axios interceptors but I can't get it to work properly. We've created an IIFE (Immediately Invoked Function Expression) So we have defined some defaults: export const httpClient = (function () { const axiosInstance = axios.create(); axiosInstance.defaults.baseURL = backendUrl; // localhost axiosInstance.defaults.headers.common['Content-Type'] = 'application/json'; axiosInstance.defaults.withCredentials = true; We have a axiosInstance.interceptors.response.use(...) where, in case of an error, we check for the error and we do something, not really important here. return { backendUrl, axiosInstance: axiosInstance, get: (path: string, params: any = {}) => axiosInstance .get(path, { params, paramsSerializer }) .then((res) => res.data), ... // more http verbs }: })() Then, we have a function to fetch some endpoints export const getRoutes = () => httpClient.get('api/routes', { page: -1, size: -1 }); In our components we are using React Query so we are doing const { data } = useQuery(['getRoutes'], getRoutes); I then have a handler for this route export const routeHandlers: RequestHandler[] = [ rest.get('/api/routes', (req, res, ctx) => res(ctx.status(200), ctx.json(routesMock)) ), ]; Then I've set up the server import { routeHandlers } from 'mocks/handlers'; import { setupServer } from 'msw/node'; export const server = setupServer(...routeHandlers); But this endpoint /api/routes never gets intercepted. I'm not sure what I'm doing wrong, I've checked your repo and I'm doing the same thing as you.
You have no idea of how this video saved me a huge headache! Thank you so much! 🙏
Amazing video Bruno!! And super detailed!
Thank you very much Telmo ❤️❤️
I'm very happy to see you here! We need to do something together one day 😉😉
Your content is fantastic. Thank you so much for your efforts!!!!!
Thank you very very much Harune 😍😍❤️
Thank you so much Bruno for your amazing tutorials. I have waited for you will show MSW mocking in testing series.
Pls. Next would be Cypress with msw and new cypress component testing feature
Thank you very much ❤️
I have a few videos left in this series before I think in the next one 😅
Thanks! :) Keep them coming!
Thank you 😊😊🙏
Brumo, you are my only hope now, i need to learn testing redux toolkit query, plz if u could make a 10000000 hrs video i'll be more than happy lol
Thank you so much Bruno, your content is amazing!
loved your content and way of explaining concepts..thanks a lot Bruno..
HUGE helps. Thank you!
Thank you 😍
Nice content Man, save my day !
Awesome 😍
TOP 👌🏽...dependent dropdown in react js 🙏
Thank you ❤️
Do you want to learn how to do one dependent dropdown? Or learn how to test one dependent dropdown? 😊
@@BrunoAntunesPT I found what I was looking for and I swear to God that your series saved my job in the company I don't know how to thank you ... May God protect you ... THANKS A LOT ....
th-cam.com/video/6FKSqWmZ5Ec/w-d-xo.html&ab_channel=BrunoAntunes
You put a big big smile on my face 😍 I'm very happy my videos can help ❤️ thank you for your words 😊🙏
Parabéns pela didática cara, um abraço aqui do Brasil.
When I add rest.get("/api/photos", (req, res, ctx) => {}), TypeScript tells me that Photo[] does not satisfy the constraint 'PathParams'. Index signature for type 'string' is missing in type 'Photo[]'. Why can I not annotate the type here?
If you can share your repository, I'll have a look why you are facing that error, but without running code is very hard to help 🙂
@@BrunoAntunesPT I wonder if the signature changed in a newer version. Things seem to be working now if I do rest.get(...)
Awesome video lessons))
Mr. Bruno, I see you use Windows OS.
Can you do a comparison video between Windows, Mac, and Linux? Just interested in your opinion))
Thanks you very much 😍😍
Honestly, I like the 3 🙂 I change quite often between them.
I recently bought a Mac mini with m1 chip and I'm enjoying it quite a lot 🙂
Sadly, my windows laptop died and I needed something good and cheap, so I bought this Mac mini which is faster than my old laptop for like 1000 dollars (16gb ram 512gb disk) 🙂
If you need a computer today I would highly recommend an m1 or m1 pro today 🙂
Good lesson, why do you nest describe blocks? I never saw people do that before, is it possible to do this with no more than single level deep describe blocks? With nested describe blocks tests look chaotic and complex.
I prefer it that way, because it's easier to read and understand. This way tests make more logical sense to me. That being said I'm aware some people might have a different opinion and that's absolutely fine 🙂
Answering your question, I have good news for you: you don't even need to use describe blocks in tests, they are 100% optional 🙂
voltaste! Boa! :D
❤️❤️❤️
Great content and I love your energy. Thanks a lot Bruno 🤙 Can I use a real API endpoint for my handler instead of api directory of next js for example Rick and morty API?
Hey Bruno! I noticed that you use void operator before some function calls. Never seen such pattern before, where can I read about it? Tried to google but haven't found any exact explanation))
That's a eslint rule. It's a very very handy eslint rule to have in your production projects, to check if you catch all the errors from your promises or not 😊
when you are sure you don't want to catch errors from a specific promise you put void and the rule knows you did that on purpose not because you forgot to handle errors 😊
github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-floating-promises.md
@@BrunoAntunesPT, appreciate your explanation, thanks!
can use it with getstaticProps or getserversideProps?
Yes, it can
in fact on apps I use msw also as the mock server, not only for tests but for development, including server and client 🙂
Super confusing. I need something simplified.
This is the easiest way to confidently mock an http call 🙂
Viva Bruno tudo bem? :D
First of all, a huge thank you for the great content, I love how you explain the subjects.
Bruno, I'm trying to get MSW to work with axios interceptors but I can't get it to work properly.
We've created an IIFE (Immediately Invoked Function Expression)
So we have defined some defaults:
export const httpClient = (function () {
const axiosInstance = axios.create();
axiosInstance.defaults.baseURL = backendUrl; // localhost
axiosInstance.defaults.headers.common['Content-Type'] = 'application/json';
axiosInstance.defaults.withCredentials = true;
We have a axiosInstance.interceptors.response.use(...) where, in case of an error, we check for the error and we do something, not really important here.
return {
backendUrl,
axiosInstance: axiosInstance,
get: (path: string, params: any = {}) =>
axiosInstance
.get(path, { params, paramsSerializer })
.then((res) => res.data),
... // more http verbs
}:
})()
Then, we have a function to fetch some endpoints
export const getRoutes = () => httpClient.get('api/routes', { page: -1, size: -1 });
In our components we are using React Query so we are doing const { data } = useQuery(['getRoutes'], getRoutes);
I then have a handler for this route
export const routeHandlers: RequestHandler[] = [
rest.get('/api/routes', (req, res, ctx) =>
res(ctx.status(200), ctx.json(routesMock))
),
];
Then I've set up the server
import { routeHandlers } from 'mocks/handlers';
import { setupServer } from 'msw/node';
export const server = setupServer(...routeHandlers);
But this endpoint /api/routes never gets intercepted.
I'm not sure what I'm doing wrong, I've checked your repo and I'm doing the same thing as you.