How to Add Docker to Create React App(CRA) + Run Unit Tests

In this tutorial, we’ll be learning how to add a docker to Create-React App and run the unit tests.

kirti kaushal
May 16 · 5 min read

Before we start please find below important technologies definitions.

1. Docker —

Official links for Docker

2. What is Kubernetes vs Docker?

3. What is the difference between VM and Docker?

Prerequisites :

Download software’s

After installing all software’s

Getting Started

Verify Docker has been installed

docker --version
Docker version 20.10.6, build 370c289

Set up a React App

npx create-react-app create-react-app-docker-unit-test
cd create-react-app-docker-unit-test
yarn start
Open the App.test.js - The content will appear like below 

4) Verify the Test are running with yarn test command

yarn test

Getting started with Docker Setup

3) Creating a docker file in your project directory

FROM node:12.18.3LABEL version="1.0"LABEL description="This is the base docker image for the react app "LABEL maintainer = ["kirtikau@gmail.com"]RUN mkdir /srv/exampleWORKDIR /srv/exampleCOPY package.json yarn.lock ./RUN yarn && yarn cache cleanCOPY . .

Add below code for react test in docker-compose.yml

version: '3'services:dev:build:context: .ports:- 3000:3000command: yarn startvolumes:- "./src:/srv/example/src"test:build:context: .environment:- CI=truecommand: yarn test

8) Final Step

docker-compose build dev
docker-compose run test
docker-compose up dev

Official links for Docker for more details

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

kirti kaushal

Written by

Front End Developer| Microsoft Certified Azure | Leading SAFe® ( Helping to teach React Js & exploring new ideas) https://www.linkedin.com/in/kirti-kaushal/

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

kirti kaushal

Written by

Front End Developer| Microsoft Certified Azure | Leading SAFe® ( Helping to teach React Js & exploring new ideas) https://www.linkedin.com/in/kirti-kaushal/

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store