A Beginner’s quick setup of a basic JavaScript project, and linking a Jest Test file. A kata template no less!

This post will help you learn some important Linux commands to setup a basic JavaScript project, and a corresponding Jest test file. It’ll mean you can quickly use it as a template for katas, tech tests, and so on.

We’re all on a journey of learning, so if you have any constructive feedback on this post, I’d welcome that!

And if this post helps, you can: give me a follow on Medium (Lucy Ironmonger), up to 50 claps 👏, and catch me on twitter :)

Some important commands

Some useful Linux commands to use in command line (the terminal) before we jump in — you can chain these together which I’ll show you as we go through.

Getting to the right place

I’ll use VS Code in this example, but you can use any IDE of your choice, the Linux commands will be the same.

We’re going to be using Linux commands to move through the folders on your computer, starting from the Home Directory. We’ll get to where we want to create the project (in my case, the Katas folder)

My folder structure looks like this — yours will be different!

• Open VS Code, and in the top menu go:
  File -> New Window
• From the new window, open a new terminal:
  Terminal -> New Terminal (again from the top menu.)
• Now in the terminal, type ls (list what’s in the folder you’re in right now.)
  This will give you your bearings on where in the file structure you are. You should start in your Home directory.

Now is a good time to introduce ~ . This is called a ‘tilde’ if you want to google it, which is the symbol for the computer’s ‘Home directory’. You may see it in your terminal at this point.

Ever want to go back home? If you ever just type cd and hit enter, it will take you straight back to the Home directory (~).

Assuming you are in the Home directory, we want to navigate to the folder where the coding projects are.

• To do this, it’s process of typing ls (and hit enter) to see what folders are there for you to jump into, then cd foldername (hit enter) to jump into that folder. Rinse and repeat — ls, have a look, cd foldername

Tab is your friend! Don’t feel you need to type out the whole word, you could type cd Docu and then hit tab, it should autocomplete it, e.g. cd Documents.

• If you accidentally go into the wrong folder, you can type cd .. to come back up a folder level.
• At the point at which I’m inside my main BoilerPlate folder (and you’re inside a similarly suitable folder), it’s time to create a new folder for this project.

Setting Up the Project

We’re gonna make a basic FizzBuzz kata project to get things started.

Initialise the project & node modules

• mkdir fizzbuzz (this makes a new folder called fizzbuzz)
• Type: cd fizzbuzz (this goes into that newly made folder)
• Once in it, type: npm init -y . This creates your node packages and sets up your package.json file, and will auto-answer ‘yes’ to the setup questions. If you want to answer the questions, don’t add the -y flag.
• Then type: npm i jest -D (this installs the Jest testing framework and adds it as a development environment dependency). This may take a minute or so to download, so be patient.
• Once it’s done, type: code package.json which will open the package.json file.

Configure the package.json to launch Jest

Within the package.json file, you want to find this bit:

“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1"
},

• Change this to say jest instead — this means when you run your tests (npm run test), it will trigger jest to run. It should look like this after your changes:

“scripts”: {
“test”: "jest"
},

You’ll notice in the package.json that “main” on line 5 is linked with index.js, this is done by default when doing npm init -y step earlier.

Index.js is set as the main entry into the program. As we’re going to be creating fizzbuzz.js as our main project file, we can change index.js to be fizzbuzz.js.

Adding folders and files

Check you are still in the fizzbuzz project root folder (remember ls).

You should be able to view: ‘package.json’, ‘package-lock.json’ and ‘node_modules’ folders at this level.

If you’ve gone up 1 level by accident, you can type cd fizzbuzz to come back into the folder. If you’ve accidentally gone into a folder such as node_modules, you can come up a level by typing cd ..

• Type: mkdir src (make a folder called src (short for source)).
• Then, type cd src to take you into the src folder.
• Once there, type touch fizzbuzz.js. This creates a file called fizzbuzz.js.
• Then, type cd .. which will bring you out of the src folder and back up a level.

We’re now going to do a similar process, but this time making the test section of the project folder.

• Type mkdir tests to make another folder
• Then, cd tests which will take you into this folder.
• Finally type touch fizzbuzz.test.js. It is common practice to do this as a naming convention, to add ‘.test.js’ on the end of the filename of the file you’re testing.

Great, you’ve made all your files!

Now for a cool command to string together what we’ve learnt:

• Whilst still within the tests folder, type: cd ../src

What do you think this does?! If you guessed that it brings you up a level from the tests folder, then into the src folder, you’d be right!

Now we want to launch our fizzbuzz.js code file by typing code fizzbuzz.js. This is where we will start the fun of getting your test file linked to your main js file.

Setup: Linking your Jest and your code file together

The next thing we need to consider, is that our test file isn’t currently hooked up to our code file. It can’t see any of the code on the code file. So what we need to do is a 2-part process:

In the code file we’ve opened, we need to export the code to our test file.

1. In our code file fizzbuzz.js let’s setup a basic ES6 arrow function. Try typing this out for yourself:

2. Now we want to export this function fizzBuzz that we’ve written. We do this by adding to the bottom of the code:

module.exports = fizzBuzz

You should leave it looking something like this (for clarity I’ve also added a simple console.log() within our fizzBuzz function).

Over in the test file, we need to import this code in order to test it. We do this through the require function.

So — let’s hop over to the test file, by using the terminal — assuming we have the terminal open in our fizzbuzz.js file that we’re in, we’d type:

• cd ../tests to bring us into our tests folder.
• And then, code fizzbuzz.test.js which will launch the fizzbuzz.test.js file which is in our tests folder.

Once the test file has launched, we want to use the require function to, well, require the function we’ve written, and save this to a variable stored in our test file. We’d use something like this:

const thisCanBeAnyName = require("../src/fizzbuzz")

The thisCanBeAnyName variable will store the results of what is exported from the fizzbuzz file.

Things people always tend to get wrong on this:

• Not using “ ” within the require( ) function.
• Not adding enough .. on the source path. We know how many to add (2!) as we’ve been up and down the folder tree a few times!
• Note the path is to the filename fizzbuzz — we don’t need a .js in this.
• Also notice we are requiring the filename, not for the title of the function that we’re exporting, eg fizzBuzz.
• Although in this example we’ve called the variable thisCanBeAnyName, it’s good practice to name it similarly to the original filename. So for example we might have done:

const fizzbuzz = require("../src/fizzbuzz")

But actually, for this demo I’m gonna name it ‘fizzy’ just to distinguish it and hopefully make the other parts of this post clearer later on.

Destructuring

Let’s take a quick pause here to consider — what if we’re exporting more than 1 function from the code file? Have no fear — we can still tap into them all.

Let’s say we setup another function in our code project, called hiThere.

We can change our module.exports on the bottom line to now encompass both functions by using the { } brackets — remember the comma too!

This means both functions will be exported, and can be imported by the test file.

module.exports = { fizzBuzz, hiThere }

Over in our test file, we keep it exactly as we had before — remember — we are importing the file, which encompasses the individual functions in it that we have set to export.

This means that we can tap into those functions by using the dot notation in the test file, and invoke them.

So in this we’re basically saying:

• Look in the fizzy variable (which is the fizzbuzz code file): fizzy
• Tap into this and into the function fizzBuzz: .hiThere
• Invoke the function fizzBuzz: ()

And the same for the fizzBuzz function. We can see when we then run npm test in the Terminal to run our test suites, it’ll error (as we’ve not written any proper tests yet!) but it’ll print to the console:

Awesome! We’re connected!

To summarise, we have now setup a basic JavaScript project, with a linked Jest test file. You also know how to export one or more functions across to the test file, and how to import them on the test file.

If you enjoyed this, check my next post on the classic FizzBuzz kata in JavaScript in which I go into a lot more detail on writing tests in Jest.

Once again, if you found this useful, please hit follow, and you can give up to 50 claps 👏 and hopefully the algorithm will work favourably to help more beginners find this post!

Have a great day, and happy coding.

@lucyironmonger on twitter