Forem: Bruno Antunes

(Unit/Integration) Testing React.js Forms with React Testing Library

Bruno Antunes — Mon, 04 Oct 2021 16:44:30 +0000

In this video we will learn how to test React Forms using React Testing Library. Our React forms can be implemented using formik or react hook form and our tests will work for both libraries.

The tests will take no assumption on the "library" used, so independently of you using react hook form or formik, those tests will work in both libraries.

GitHub repository: https://github.com/bmvantunes/youtube-react-testing-video8-forms-react-testing-library
All the videos in this series (React.js Testing Tutorial): https://www.youtube.com/playlist?list=PLYSZyzpwBEWTBdbfStjqJSGaulqcHoNkT

Please don't mock SWR, Fetch or Axios in your unit/integration tests

Bruno Antunes — Fri, 10 Sep 2021 13:43:46 +0000

Please don't mock SWR, Fetch or Axios in your unit/integration tests.

In this video you will learn how to test components that use "useSWR" without doing jest.mock("swr") or jest.mock("axios") or jest.spyOn(window, 'fetch') in order to give you more confidence on your tests :)

We are going to use MSW (Mock Service Worker) in order to mock the HTTP call itself, not your favorite fetching library

XSS Attack - Is your Application Vulnerable? - npm packages can make you vulnerable!!!

Bruno Antunes — Wed, 09 Jun 2021 19:32:32 +0000

In this video I'll show you a XSS attack and how you can protect your applications.

Cross-Site Scripting (XSS) attacks are a type of injection, in which malicious scripts are injected into otherwise benign and trusted websites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user. Flaws that allow these attacks to succeed are quite widespread and occur anywhere a web application uses input from a user within the output it generates without validating or encoding it.

Fully automated npm publish using GitHub Actions and Semantic Release

Bruno Antunes — Wed, 12 May 2021 21:21:15 +0000

From their docs:
Fully automated release!!! semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes and publishing the package.

This removes the immediate connection between human emotions and version numbers, strictly following the Semantic Versioning specification.

semantic-release is meant to be executed on the CI environment after every successful build on the release branch. This way no human is directly involved in the release process and the releases are guaranteed to be unromantic and unsentimental.

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub.

Publish to NPM: React component library - the easy way

Bruno Antunes — Thu, 06 May 2021 13:16:50 +0000

If you have ever thought about publishing a react/typescript package to NPM and found it a complicated task, this video is for you :)

In this video I show the easiest and fastest way I know to create and publish a react component library to NPM. The "magic" sauce for this is tsdx!

React.js TypeScript Conditional Props - Props that depend on other Props

Bruno Antunes — Wed, 31 Mar 2021 10:16:54 +0000

Ever wondered how to make one prop depend or affect the value of another prop in React.js and TypeScript?

You can find the answer in this video 😊

Next.js API Routes Validation with YUP

Bruno Antunes — Thu, 11 Mar 2021 11:10:16 +0000

In this video we will add validation to our Next.js API Routes using YUP. In order to achieve that in a simple and reusable way we will create a validation middleware that uses YUP for schema validation.

Because we are using YUP, we can now share our validations across front-end and back-end. Form libraries like formik and react-hook-form work very well with YUP.

I hope you enjoy the video :)

React File Upload with drag-n-drop and progress bar

Bruno Antunes — Thu, 25 Feb 2021 12:46:20 +0000

I published a video explaining how to create a multiple file upload using react.

In the video I explained some of the common problems people face when deploying to vercel, netlify, aws lambda and heroku.

To solve those problems I recommend some solutions in the video like Amazon S3, Azure blob storage, cloudinary, imgx, etc.

We will use cloudinary because they offer a free demo account, which is great! :)

Nextjs Image Component

Bruno Antunes — Thu, 24 Dec 2020 12:31:04 +0000

Hello developers :)

I launched a new video with my favourite feature in Nextjs 10, the Nextjs Image Component.

With this new Next.js Image component we can resize and optimize images. We can also serve images in newer and more optimized formats, like webp!

In the video I also explain srcset and sizes - very important for how this Next.js Image component works, by using the srcset and sizes from the "img" HMTL tag

React.js and TypeScript (Components + Props)

Bruno Antunes — Tue, 06 Oct 2020 18:06:27 +0000

In this video I'll show you how to take advantage of TypeScript to improve your productivity creating/consuming components.

This is an introduction video to TypeScript in React.js

I hope you find it helpful.

Let me know what you think :)

Next.js Incremental Static Regeneration - ISR

Bruno Antunes — Sat, 22 Aug 2020 10:17:34 +0000

New video about Incremental Static Regeneration a new feature in Next.js 9.5 :)

In this video, we will create a dynamic dropdown dependent on another dropdown value

Bruno Antunes — Sat, 16 May 2020 10:45:39 +0000

When the "make" dropdown changes, an HTTP call is performed to load all the models available for the selected "make" dropdown. With the result of the HTTP call, we populate the model dropdown.

We are going to use Formik and SWR.

I hope you find this helpful. Please let me know any feedback you may have :)