Self-paced

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Search from all Lessons


LoginGet Started
← Back to Lessons
Weekly Coding Challenge

Every week, we pick a real-life project to build your portfolio and get ready for a job. All projects are built with ChatGPT as co-pilot!

Start the Challenge
Podcast: Code Sets You Free

A tech-culture podcast where you learn to fight the enemies that blocks your way to become a successful professional in tech.

Listen the podcast
Edit on Github

Building React Tutorials with LearnPack

Unit Testing

If you want to create a Javascript/Node coding tutorial, you have to use the @learnpack/react plugin in order to compile and test your exercises. Go to Compiler Plugins to see how to install the plugin.

In addition, the main file should be named app.jsx, and the file for the tests, should be named tests.js.

Unit Testing

For testing, you should install Jest with the version "24.8.0". You can install it by running the following command: npm install jest@24.8.0 -g

When testing react exercises, the most common tests are related to the component's structure, you can test that or that the file app.jsx have a specific sentence inside.

If you are not so familiar with Jest, here are the most common tests that you will use when testing a React exercise tutorial:

Testing the component has the right structure and tags

1// tests.js 2 3import ReactDOM from "react-dom"; 4import { WhatToRender } from "./app.jsx"; 5import renderer from "react-test-renderer"; 6 7test("The component should return the exact HTML", () => { 8 const tree = renderer.create(ReactDOM.render.mock.calls[0][0]).toJSON(); 9 expect(tree).toMatchInlineSnapshot(` 10 <h1> 11 Hello 12 <strong> 13 World! 14 </strong> 15 </h1> 16 `) 17})

Testing the file has specific sentences with regular expressions

1// tests.js 2 3const fs = require('fs'); 4const path = require('path'); 5 6const app_content = fs.readFileSync(path.resolve(__dirname, './app.jsx'), 'utf8'); 7 8test("You should use "{singleAnimal.label}" to get the animal name", () => { 9 expect(app_content).toMatch(/{\s*singleAnimal.label\s*}/g); 10})

Examples

The following link is a React coding tutorial: