DEV Community

Omar Baabouj
Omar Baabouj

Posted on

Build, Test, and Publish an NPM package

Hello World 👋

In this article, we are going to build, test, and publish an npm package to check whether a string is an email address or not. So if you want to know how we will do it, put on your seat belt, and let’s go 🚗

Prerequisites :

  • Have Nodejs installed on your machine (If not, you can download it here).
  • Have an npm account, if not, you can create one at npmjs.com.
  • And a little bit of JavaScript knowledge.

🛠️ Build

First, we need a directory to hold our code, so create one and open it with your terminal, then initialize a new Nodejs project by running the command :

npm init -y
Enter fullscreen mode Exit fullscreen mode

this command will generate a package.json file with default values, which we will edit later.

Next, inside our directory, let’s create a new directory and name it src, then inside src, let’s create an index.js file that will contain our code.

Now that our root directory has the following file structure:

.
└─src
│ └ index.js
│ package.json

Enter fullscreen mode Exit fullscreen mode

let’s get inside the src/index.js file and export a function that takes a string as an argument and checks whether it’s an email address. And to do so, we will be using Regular Expressions(regex)
 and test if the given string matches the regex pattern of an email address:

// ./src/index.js

const isEmailAddress = (string) => {
  const regex =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return regex.test(String(string).toLowerCase());
};

module.exports = isEmailAddress;

Enter fullscreen mode Exit fullscreen mode

Great! Now that we have created our package, let’s move on to the next step.

🚨 Test

To test our package, we will be using Jest as our testing framework. and to do so let’s first install Jest as a development dependency using the command :

npm install —-save-dev jest
Enter fullscreen mode Exit fullscreen mode

then create a new directory inside our root directory and name it test, and inside it create an index.test.js file which will contain our tests.

Now the file structure of our root directory will be the following :

.
└─src
│ └ index.js
└─test
│ └ index.test.js
│ package.json

Enter fullscreen mode Exit fullscreen mode

inside test/index.test.js, let’s import the function we exported from src/index.js and write our tests :

// ./test/index.test.js

const isEmail = require("../src");

describe("isEmail", () => {
  it("should return false if the email is not valid", () => {
    expect(isEmail("123")).toBe(false);
    expect(isEmail("email")).toBe(false);
    expect(isEmail("example.com")).toBe(false);
    expect(isEmail("email@example")).toBe(false);
  });

  it("should return true if email is valid", () => {
    expect(isEmail("email@example.com")).toBe(true);
    expect(isEmail("email123@example.com")).toBe(true);
    expect(isEmail("email-12@example.com")).toBe(true);
    expect(isEmail("email+az@example.com")).toBe(true);
  });
});

Enter fullscreen mode Exit fullscreen mode

To run our tests, let’s go to the package.json file and edit the test script to use jest:

- "test": "echo \\"Error: no test specified\\" && exit 1”
+ "test": "jest"

Enter fullscreen mode Exit fullscreen mode

then run the following command:

npm run test

Enter fullscreen mode Exit fullscreen mode

and you should see our tests passed 🎉

🚀 Publish

To publish our package, we will need to make a few changes to the package.json file and we will start with the package name, I will simply name it is-email-address, but before you name your package, you first need to make sure that your package name is unique and doesn't exist in the npm registry otherwise you will get an error when you try to publish it.

I will add a little description as well and set the entry point of our package to src/index.js and I will add some keywords to help people discover our package as it's listed in npm search (You can learn more about the specifics of npm's package.json handling from here).

Now the package.json file looks like this:

{
  "name": "is-email-address",
  "version": "1.0.0",
  "description": "check whether a string is an email address",
  "main": "src/index.js",
  "scripts": {
    "test": "jest"
  },
  "files": [
    "src"
  ],
  "keywords": [
    "email",
    "is-email-address",
    "is-email"
  ],
  "author": "Omar Baabouj <baabouj.dev@gmail.com>",
  "license": "ISC",
  "devDependencies": {
    "jest": "^28.0.3"
  }
}
Enter fullscreen mode Exit fullscreen mode

Back to the terminal, let’s first login to npm by running the command:

npm login
Enter fullscreen mode Exit fullscreen mode

you’ll be asked to enter your username, password, and email. Once you add them, you are successfully signed in!

Now to the last step, let’s run the command to publish our package:

npm publish
Enter fullscreen mode Exit fullscreen mode

And Voilà! You just published an npm package 🎉

If you have any thoughts or have noticed any mistakes please message me @baabouj_ on Twitter.

You can find the source code of this article in this repo, or check it out on npm

Thank You 😁

Top comments (0)