Jest | Shalini Chauhan
Post
Jest
Jest is a JavaScript Testing Framework.
Read that again! It's simply designed for JavaScript, not necessarily React!
You could use Jest to test a simple function that returned Hello World from a pure JavaScript function. Or you could use a library like we are going to with React, and test the functions that you write for the results you expect.
The key difference here is that Jest is agnostic across all JavaScript frameworks, it doesn't care if you're using Angular (but I am judging you for it), Vue, React, or just plain JavaScript.
At its core, you can just think of Jest as a pure JavaScript function runner, which:
- Takes in a function
- Runs it in an isolated environment with configuration of your choosing
- Compares the behaviour of that function with what you expect it to be.
React Testing Library
React Testing Library allows you to write code to test your React Components, and the DOM nodes within them.
This is different from Jest as it is specifically designed to run with React, and utilises the DOM Testing Library under the hood to represent React components as accurately as possible when compared to the real thing.
Okay, so why do we need both? Great question! Well, the way I like to see it is that there are two main reasons.
Jest enables us to easily run our React Testing Library tests, using the Jest Test Runner. This means we can write ___.test.js files and easily run them with the jest command on the command line.
React Testing Library enables us to query and check the DOM nodes and then use Jest's assertions to make checks on those nodes. Hopefully, you're clear on why each tool exists, and why we want to use both the tools to run tests for our Next.JS applications.
React
Pages and Layouts in Nextjs- When building projects with Next.js, we typically create an entire user interface by assembling isolated components. However, some parts of the interface require the same code snippets across multiple routes — for example, the navigation header, footer, and sidebar. To manage this, we use layouts to structure the interface in a way that contains shared code snippets. Next.js recommends starting a new project with the App Router. However, we’ll discuss how to implement layouts and nested layouts with the Pages Router for users who have yet to migrate to the new Next.js routing system.
How to Parse JSON in Dart/Flutter Parsing JSON is a very common task for apps that need to fetch data from the Internet. And depending on how much JSON data you need to process, you have two options: write all the JSON parsing code manually automate the process with code generation Encoding and Decoding JSON When a JSON response is sent over the network, the entire payload is encoded as a string. But inside our Flutter apps, we don't want to extract the data from a string manually: