Use the Blazing fast 🔥 Parcel Bundler 📦 to Build and Test a React App

Parcel, React, Jest, and Enzyme

By the end of this article, you will know how to create a React application using the Parcel bundler, and Jest and Enzyme to test your components.

What is Parcel?

Parcel is a “zero configuration web application bundler”. It has out of the box support for JS, CSS, HTML, file assets, and more (perfect for React). Plus, it has a hot module replacement development server to auto-update your app as you make changes.

For React, we can use Parcel as our application bundler, and development server.

Let’s see how quick it is to set up a React application with the Parcel bundler!


1. Setup

First, install the parcel command line interface, and the jest cli. Then make sure both were installed correctly:

$ npm install -g parcel-bundler jest-cli
$ parcel --version
$ jest --version

After your command line prints the nice version numbers for you, make the new project directory. A good name is `parcel-react-jest` since this immediately says what the project is about, but call it anything you want:

$ mkdir parcel-react-jest
$ cd parcel-react-jest

Then create your new node project and install dependencies:

$ npm init -y
$ npm i — save react react-dom
$ npm i — save-dev parcel-bundler babel-preset-env babel-preset-react
$ npm i — save dev jest enzyme enzyme-adapter-react-16

Now make a babel run commands file, called .babelrc, which tells babel to translate the es6 and React code:

2. Application Code

Then, create the core application code. Make an index.html, index.js, and index.css file:

3. Start the Application

Now head to the package.json file, and go the scripts section. Add the “start” script. This will run the parcel bundler, and point it to index.html:

“scripts”: {
“start”: “parcel index.html”,
“test”: “echo \”Error: no test specified\” && exit 1"
},

Then run the start script with npm. Parcel will look at the index.html and automatically build the dependencies based on the `.js scripts` of the html file and `imports` of the .js files:

$ npm start

Visit: `http://localhost:1234/`

Excellent! And just like that, the React application starts up with the Parcel dev server! Notice that parcel also generated a .cache directory. This allows parcel to save compiled results of the app, so that it starts even more quickly when you run `npm start` again.

Check out the hot module replacement feature. Try making a change, like changing the color to `red` in the index.css file.

4. Test the Application

To test the React application, we’ll use a combination of Jest and Enzyme.

Enzyme needs an adapter to become compatible with React. To create the adapter, make a `setupTests.js` file:

Anw now, after the scripts section, tell Jest to look at this setupTests file when running the tests:

“jest”: {
“setupTestFrameworkScriptFile”: “./setupTests.js”
},
“repository”: { …

Now create an App.test.js file. In this file, a unit test checks whether the App component renders the title correctly:

Finally, update the test script in the `scripts` section within the package.json file. Note the — watch option of Jest, which will listen for changes in testing files and re-run them automatically:

“test”: “jest --watch”

Now, run the test:

$ npm run test

Awesome! The test fires, and if nothing went wrong, you should see a successful test run in the command line!

With that, you’ve created a complete setup for a React application with a live development server, and test setup!

Check out the completed source code at: https://github.com/15Dkatz/parcel-react-jest


Hopefully this inspired you to consider Parcel for your next React application. If you enjoyed this quick walkthrough, please clap the article so other people will find it! Thanks! ❤


David is a software engineer in San Francisco. He loves making educational content on software. He 11 online courses, with over 140,000 students from around the world. Make sure to check them out!

Highlights:

Also, feel free to connect with him at davidtkatz.com