DEV Community: Pedro Marungo

React testing with Jest

Pedro Marungo — Tue, 16 May 2023 06:29:44 +0000

Running test with Jest

There is a number of javascript test frameworks. To test vanilla javascript applications, a popular choice is Mocha. Jest is another popular choice for react developers. Jest was developed by facebook like react and is an open source project. Jest comes preinstalled when you generate a react project using the

create-react-app //command line tool.

If you generated a react project using the command above all you have to do to run the test is use the command

npm test

Several things will occur when npm test is executed.

Jest is executed: create-react-app by default uses Jest as a testing framework.
Test files are located: Jest will automatically search for test files in the project directory. It searches for files with the .test.js or .spec.js extension in the src directory and its subdirectories,this is a common convention used to indicate that the file contains test code for the corresponding JavaScript file..
Test are executed: Jest will execute all test files & runs the test cases defined within those files. It will provide a test runner that displays results in the console, showing which test pass & which have fail. It will also provide failing assertions or errors during the test execution.
Test watch mode: Jest runs watch mode by default when you run npm test, but it is optional. Watch mode means that Jest will keep running & watches for changes in your test file or source code. When it detects any modifications it re-runs the affected tests automatically.
Code coverage: By default create react app is configured to generate code coverage reports. When npm test is executed, Jest will also collect information about how much your code is covered by the tests. It will generate a coverage report that provides insights into areas of your code that are tested & those that are not tested.

The npm test command will also execute the test script in the package.json file in your project directory. create-react-app sets up a default configuration where the test script is associated with the command to run the test suite using Jest. This configuration includes a predefined command that is associated with the test script in the project's package.json file. The test script is like a shortcut or a predefined command that you can run using npm test.

The default test script in package.json of a Create React App project typically looks like this:

//json

"scripts": {
  "test": "react-scripts test"
}

This script, in turn, runs the command associated with it, which is typically react-scripts test. Behind the scenes, npm test typically invokes react-scripts test to execute the test scripts defined in the project. So both npm test and react-scripts test can be used interchangeably to run tests in a Create React App project.

Example of Jest test

test("displays the text 'hello world'", () => {
  render(<Article />);

  expect(screen.queryByText("hello world")).toBeInTheDocument();
});

The test example above is doing the following:

render: The render method is used to render a React component inside the testing environment or virtual DOM. Since the Jest test don't run in a actual browser but instead run inside JSDOM which mimics the behavior of a browser's DOM. JSDOM allows Jest to simulate a browser like environment within node. This enable test to interact with & manipulate the DOM. You can also use DOM related APIs such as document, window, querySelector in your test script. By default Jest sets up JSDOM for each test file.
expect: The expect method used to define assertions and make comparisons between values. You can use various matchers with the expect method to check if a certain condition is met. For example in the code above we are using the custom JSDOM matcher toBeInTheDocument which checks if the element is present in the DOM. You can use this matcher to verify if an element if rendered & exist in the current document.
screen: The screen object is used to interact with the rendered components. It also provides helper methods to query the DOM for elements we expect to have been rendered. screen allows convenient way to access elements without having to rely on the document object directly. In the above example the line screen.queryByText('hello world') searches the virtual DOM for some element that has the text content "hello world". If no element is found, it will return null.

Conclusion

In conclusion, React testing with Jest provides a powerful and efficient way to ensure the quality of your application. With Jest's comprehensive testing framework and Reacts testing utilities, you can easily write and execute tests to validate the behavior and functionality of your React components. - Happy testing!

Introduction to NPM

Pedro Marungo — Sun, 14 May 2023 19:10:06 +0000

NPM stands for Node Package Manager. It is a tool used to manage and share reusable packages of code for Node.js. It is a command-line utility that installs, updates and uninstalls packages.

NPM is installed automatically with Node.js. It is used to install packages globally or locally in a particular folder.

Installing packages with npm

Notes on installing packages with npm:

During the project development process, there may be a need to add specific packages.
To install packages, navigate to the project directory and run the command npm install <package_name>.
This command will add the package as a dependency in the project's package.json file.
It is essential to have a correctly structured package.json file for the installation to work.
If the package.json file is missing or incorrectly structured, the installation will fail.
npm provides a built-in command, npm init, which can be used to create the package.json file.
npm init allows you to initialize a new project and generate a package.json file with the required structure.
With the generated package.json file, you can then proceed to install additional packages using npm install. Remember to always maintain a properly structured package.json file and use the appropriate npm commands to install and manage packages within your project.

To install a package globally, you can use the following command:

npm install -g {package name}

To install a package locally, you can use the following command:

npm install {package name}

Package.json

NPM also allows you to manage dependencies for a project. You can create a package.json file which contains the list of dependencies for your project. To create this file, you can run the following command:

npm init

This will prompt you to enter the details of your project such as the name, version, description, and author. Once you have entered the details, it will create a package.json file for you.

To install all the dependencies listed in your package.json file, you can run the following command:

npm install

Notes on package.json and npm:

The package.json file is used to specify the required packages for a JavaScript application.
It lists out each package's name and version number.
When the command npm install is run in a directory with a package.json file, npm reads the dependencies listed in package.json.
It downloads the packages from npmjs.com, the hosting platform for npm packages.
The installation process also involves resolving dependencies for each package.
Each package may have its own package.json file with its specific dependencies, forming a dependency tree.
npm ensures that all dependencies, including nested ones, are fetched and installed.
In a local environment, running npm install creates a folder called "node_modules."
The node_modules folder contains all the downloaded packages necessary for the application. Remember to regularly update your package.json file to manage and track the required packages and their versions accurately.

Installing, updating, removing packages

NPM also allows you to update and uninstall packages. To update a package, you can use the following command:

npm update {package name}

To uninstall a package, you can use the following command:

npm uninstall {package name}

In conclusion, NPM is a powerful tool that allows you to manage and share packages of code for Node.js. It simplifies the process of installing, updating and uninstalling packages and managing dependencies.

Publishing packages with npm

Another important feature of NPM is that it allows you to publish your own packages to the NPM registry, which can be used by other developers. To publish a package, you need to first create a package.json file, which includes the details of the package such as name, version, and dependencies. You can then use the following command to publish the package:

npm publish

NPM also provides a way to manage multiple versions of the same package, which is useful when you need to maintain compatibility with different versions of Node.js or other dependencies. You can specify the version of a package when you install it by using the @ symbol followed by the version number, like this:

npm install {package name}@{version}

Mastering array iteration

Pedro Marungo — Sun, 14 May 2023 08:19:36 +0000

Introduction:
JavaScript's array iteration methods are useful for working with arrays. They offer simple and efficient ways to manipulate arrays, making your code cleaner, easier to understand, and faster. Learning these methods is important for effectively manipulating arrays in JavaScript. Let's explore these methods and learn how to unleash the full potential of your array operations!

1. forEach():
The forEach() method in JavaScript allows you to perform actions on each item in an array. It simplifies iterating over an array and performing tasks on each element.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number);
});

2. map():
The map() method in JavaScript creates a new array by applying a function to each element of the original array. It's useful for transforming and extracting specific values from arrays.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

3. filter():
The filter() method in JavaScript creates a new array by selecting elements that meet certain conditions. It helps in refining and organizing data by picking specific elements.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

4. reduce():
The reduce() method in JavaScript combines all elements of an array into a single value. It's useful for performing calculations or aggregating data.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // Output: 15

5. find():
The find() method in JavaScript searches an array and returns the first element that matches a specific condition. It helps in finding specific elements in an array.

const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find((number) => number > 3);
console.log(foundNumber); // Output: 4

6. some() and every():
The some() and every() methods in JavaScript evaluate elements in an array based on a given condition. They help in determining if elements match specific criteria or if all elements satisfy a certain condition.

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((number) => number % 2 === 0);
console.log(hasEvenNumber); // Output: true

const allNumbersPositive = numbers.every((number) => number > 0);
console.log(allNumbersPositive); // Output: true

Conclusion:
JavaScript's array iteration methods provide efficient ways to manipulate arrays. They improve code readability and performance. Mastering these methods is crucial for effective array manipulation in JavaScript.

JavaScript Arrays

Pedro Marungo — Fri, 28 Apr 2023 08:42:42 +0000

Creating Arrays (data-list)

An array in JavaScript is basically an order list. Every item inside the array list is place in a position known as an index.

Arrays begin at index 0 for the first item and then the following index position 1 for the next item in the array,and so on.

Creating an Array literal

One way to create an array in javascript is to use an array literal (wrapping items inside of square brackets ['item1', 'item2']. Each item inside the array is known as an individual element. Each element is wrapped in quotes single or double if the data type is string or backticks if you are using template literals for data interpolation.

Arrays data types

Arrays can store any data types. All primitive data types from Boolean, Null, Undefined, Number, String, Symbol. Though it is not recommended to use Null and Undefined because they can cause some quirks.

Example of quirks storing undefined inside an array literal. In the example below we can see that we are console logging some of the array elements by using bracket notation and passing in the index value we want to log to the terminal.

Towards the end of the array we try to log an element at index 5, but there is no element at index 5 so the output returns undefined. So basically undefined is use to display values that are yet not defined. So it is best to follow good practice and not define variables with a value of undefined or store an array element in the same way.

Examples of Array data types

As mentioned above arrays can hold any data types as elements they are place inside an array and are separated by a comma ,. Here is a example of an array with different data types store as elements

The example above has some different data types including string, number, boolean, object. We even see another empty array inside our array. (arrays are known and consider to be a special kind object in javascript.

Accessing Array elements

Each element stored inside the array has a numbered position known as an index. Remember array indexes start at 0 not 1. We can access stored elements inside the array using their corresponding index.

In the example above we retrieved the 2nd element index at spot 2 inside our array. We do this by referencing the array name or better known as an identifier, followed by bracket notation [2]. The console.log returns the value mango which is stored in index 2 inside the fruits array.

Storing array elements to variables

If we wanted to store individual element values that are stored inside our array to variable we are able to do that

If an array is store in a const variable we are still able to modify elements inside that const variable array. This is known as mutable. Meaning we can change the elements inside that array even if it was defined with a const variable.

Updating or changing elements

If for some reason we wanted to change an element of our array we can do so by using bracket notation as mentioned above and the index of the element we want to modify, followed by the assignment operator = and the new value. Again can be any data type.

Returning the number of elements in an array

If we want to know how many elements are in our array or any given array we can use a built in array property length. The length array property returns the number of elements in an array. We access the length property with dot notation array.length .

Adding elements to an array

If we wanted to add new elements to an array dynamically using a built in JavaScript method we could do so with the .push() built in method.

We use the push method by using dot notation and then the method name, followed by invocation operators (). The push method can take as many arguments as you like but a large numbers of arguments can cause performance and memory usage issues for your application.

An Important thing to know is that the .push() method is known in JavaScript as an destructive array method that will change and modify the original initial array.

Removing the last element in an array

Just like the .push() method that allows us to add elements to the end of an array. The .pop() method removes the last item in an array. The .pop() method does not take any arguments and is also known as a destructive array method.

The .pop() method also has a return value that we can capture with a variable for later use, the .pop() method returns the last element in the array that was removed.

Removing the first element in an array

If we wanted to remove the first element in an array we can use yet another built in JavaScript method .shift(). The .shift() method does not take any arguments and is also known as a destructive array method.

Adding an element at the start of an array

Let's say we wanted to add a new element to the start of the array. Well you guess it! there is a built in array method for that as well. The .unshift()method takes any amount of arguments we would like to add as elements to the start of the array and is also known as a destructive array method.

Extracting a portion of elements of an array

If we want to remove a portion of elements from a given array we can use another built in method .slice(). The slice method takes 2 arguments the starting index (where to start the extraction) and the ending index (where to end the extraction), if the ending index is not given .slice() method will extract starting from the starting given index to the end of the array. The .slice() method is a non-destructive array method it instead will extract the elements and return a new array.

We must save the .slice() method statement in a variable to be able to see the new array with the extracted elements. If we console.log() the new array it will only output the arrays extracted from start to ending index. If we console.log the original array it will output all values, as it was not modified.

Search for a particular element index in an array

If we wanted to search for a particular index of an element, we can use the .indexOf() method. The .indexOf() method takes in 1 argument the element we are looking for and an optional second argument the starting index of where to start the search. The .indexOf() method is a non-destructive array method it instead will extract the element and return a new array which we save to a variable.

If we provide an element that does not exist in the array or if we start at an index that is passing the the index of the element we want, the .indexOf() method will return -1 for both of these occurrences.

Variable Scope Pollution

Pedro Marungo — Fri, 28 Apr 2023 01:55:02 +0000

When writing JavaScript programs as a beginner we tend to define lots of variables in our program. Now we can freely create as many variables as we like using var, let, const.

I think by now we all know that using var is not recommended unless we are maintaining some legacy program code. We also know that using var can we lead some weird quirks like variable hoisting and redeclaration.

Overall though this article is not about var or its weird legacy quirks instead this article is here to bring forth another quirk that not only affects variables declared with var but also let.

Global vs local scope (Variables)

When we define variables in JavaScript we usually define them in the global scope of our programs. For example review the screenshot below

This is fine for simple programs or if we are just sandboxing some code. But in more complex and professional programs we might want to actually avoid defining variables in the global scope. You might be wondering why?

Well if we define variables in the global scope we allow access to those variables from anywhere in our JavaScript code and now those variables can be reassigned (let & var) and redeclared specially if we use the var keyword to create those variables. This can lead to unexpected results and hard to track bugs in a larger program.

For example review the snapshot below which inside the function we reassigned the global variable value. In the global scope the variable has a value of 2003 and inside the function we reassigned the value to 2004. When we console.log the value of the variable inside the function and then invoke the function call we see the result of 2004 inside the text editor terminal console. We also see if we console log the previously global scope variable mySpaceFounded it will also output the value 2004, which means that the global variable value was altered and changed throughout the whole JavaScript program.

So what is the solution or best practice?

We can avoid defining global variables unless we are certain that we want to allow all of our code access to those global variables. So instead we can define our variables only inside block statements like the example below.

This practice of defining variables inside block statements is known as local scope or local context for variables. This makes sense since we don't want the random number variable in the global scope and later on we make the mistake of changing the variables value and affect other parts of our program.

Scope Pollution

The term scope pollution may not seem that popular for beginners but it should be a concept that is taught because it will lead to bad practices amongst beginner developers. Scope pollution is the idea that too many variables or functions are defined in the global scope of our programs.

This may seem not too concerning at all but when working with 3rd party or open source libraries we can run into issues, specially if those libraries or outside code have their own global variables hidden in different parts of the program, again this can lead to confusing and hard to track down bugs which can cause both time and money for a company. Defining our functions or variables in global scope will place our globally defined variables and functions into the global namespace object which is is available to us and any outside code we pull inside our programs.

Free up memory

Defining variables in the global scope will make our JavaScript program retain used up memory for those variables or functions. The memory will not be release until our program crashes or comes to a complete end or by our web page being closed or refreshed. On the other the hand if you define your variables inside local scope. Well when you program runs and those block statement get call or executed a new execution context is created, which will include a local environment. This environment will include all the variables and functions defined inside that function or block statement including any arguments passed into the function. When the the function or block statement finishes executing, its execution context is destroyed, At this point, the JavaScript engine may choose to free the memory used by the local variables.

Self Taught Developer Journey 2023

Pedro Marungo — Sun, 05 Mar 2023 05:40:25 +0000

The start of my Journey

In late 2011 I remember glancing over at my TV and a movie was playing called The Social Network. During this time, Facebook was at the top as the most used and beloved social network on the market. But sadly for me, I had been a MySpace user. After watching a piece of the,

The Social Network

I've decided why not try to create the next myspace social network version.? With this idea in mind I decide to ask my tech knowledgeable brother on how to go about this new project idea I had. He soon explain I needed to learn how to write programming code and it would take a long time but it was possible!.

The learning challenge

Now if you are new to this coding/programming world. Well then you don't know how lucky you are, back then if you wanted to learn how to program/code you kinda had to figure it out on your own. Yes you could go to stack-overflow or some coding forum but the people in there weren't so nice and would tell you to find your own learning resources. Years after knowing how long and difficult it was for me to scatter the web and piece together resources. I understood the tough love I receive from these programmers online. Learning how to program/code is not easy, it takes time and dedication.

Following my dreams...

Since 2012, I have wrote code for a small time MMORPG in C# and converter their XHTML to HTML5. This gave me some serious insight into what it takes to learn and create projects. Soon after in 2016 I launch my first Android application written in Java

(https://play.google.com/store/apps/details?id=rottenkittenstudio.com.buddhatheawakenedone&hl=en&gl=US&pli=1.

Well thanks again to brother who taught and help me learn some Java code. My brother who wrote and created his first android application in 2014 that got over 100k downloads and made a hefty $5K a month.

Though seeing the success of my brother's application downloads and hefty cash deposits. I was not in it for the money, to me creating something bigger was my goal. I still had the itch for creating a social network and platforms where people can interact and connect. Not to say that money was not needed!. But it was not the driving force for my learning and coding journey.

Early struggles and current situation

Though I don't like to share much of my personal life with strangers. From 2010 to about 2015, me and my brother did not have a place to call home and experience homelessness. Coding from broken down computers and stealing wifi from neighbors, we eventually use some of the earnings my brother made to help our living situation. I only share this story cause it prevent me from having a steady learning process in my journey to self taught developer, but also taught me to be humble patient and resilient.

I am now currently enroll in Flatiron School - Online Bootcamp to complete and receive a certification for full-stack engineer. I would love to work and help companies grow and create good meaningful software, while still investing and creating personal projects in my free time to achieve my dream of launching a tech startup in Chicago IL and putting a dent in the universe.