React.js lab with Vitest

Build dynamic React.js labs integrated with Vitest for live component testing

Coding labs is a powerful feature of Fermion. Using coding labs in your platform, you can increase user retention, provide hands-on experience to them, and make them learn-by-doing.

Let’s take a look at how you can setup a React.js interactive coding lab in this guide.

Step 1 - Creating the Lab

• Add a new item lab in your course curriculum page

• A new lab item gets added. Edit the lab using the controls:

• A lab item in a course can be attached to an existing lab you created in the past. If not, you can create a new lab with this Edit interface:

• You should now be able to write a quick lab name and press on “Create Lab” button. Once you do, press on Attach to course item button. Once that is done, click the three dots again and click on “Edit” to edit the lab.

Step 2 - Lab Instructions

Once you click on Edit button a new page will open. On this page you need to setup instructions for lab. These instructions would be visible to the user when they’re attempting the lab. Therefore, include all the helper material, lab setup instructions here.

Step 3 - Lab Defaults

Lab defaults section include how your lab environment boots. It is one of the most important parts because a wrong default environment might confuse your students. Therefore it is important to set it up properly.

When a playground boots, it can setup a filesystem for user by default. You can specify what the starting files could be, by specifying a git repository and a branch name:

For React playground, we recommend you to fork the following repository and use it as a starter template: React vite playground starter

Avoid using webpack to setup React.js playgrounds as vite is much faster.

You will find a .cdmrc file in the repository given to you above. It is highly recommend, at this point, that you go through the .cdmrc guide and how to use .cdmrc in playgrounds to understand what .cdmrc file exactly is. Once you understand how to work with .cdmrc come back to this area.

Step 4 - Evaluation script

Evaluation script is actually what runs when the user on the playground clicks on “Run Tests” button.

Remember that we’re using React Vite playground setup. This means we can assume that we already have vite installed.

However, we still need to setup a lot of things: jsdom, vitest, and react-testing-library. Therefore, we can write our evaluation bash script to install all of this and run our tests. Here’s how the React vitest script looks like:

#!/bin/bash
set -e 1

# Assumes you are running a react vite playground

# Install vitest and testing util
cd /home/damner/code
yarn add vitest@0.32.2 jsdom@22.1.0 @testing-library/jest-dom@5.16.5 @testing-library/react@14.0.0 --dev
mkdir -p /home/damner/code/.labtests

# Move test file
mv $TEST_FILE_NAME /home/damner/code/.labtests/reactcheck.test.jsx

# setup file
cat > /home/damner/code/.labtests/setup.js << EOF
import '@testing-library/jest-dom'
EOF

# vitest config file
cat > /home/damner/code/.labtests/config.js << EOF
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react()],
    test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: '/home/damner/code/.labtests/setup.js',
    }
})
EOF

# process.js file
cat > /home/damner/code/.labtests/process.js << EOF
import fs from 'node:fs'
const payload = JSON.parse(fs.readFileSync('./payload.json', 'utf8'))
const answers = payload.testResults[0].assertionResults.map(test => test.status === 'passed')

fs.writeFileSync(process.env.UNIT_TEST_OUTPUT_FILE, JSON.stringify(answers))
EOF

# package.json
cat > /home/damner/code/.labtests/package.json << EOF
{
    "type": "module"
}
EOF

# run test
(yarn vitest run --config=/home/damner/code/.labtests/config.js --threads=false --reporter=json --outputFile=/home/damner/code/.labtests/payload.json || true)  | tee /home/damner/code/.labtests/evaluationscript.log

# Write results to UNIT_TEST_OUTPUT_FILE to communicate to frontend
cd /home/damner/code/.labtests
node process.js

You might need to have a little understanding of bash scripting. Let us understand how the evaluation bash script is working:

• With set -e 1 we effectively say that the script should stop on any errors
• We then navigate to user default directory /home/damner/code and then install the required NPM packages. Note that this assumes we already have vite installed. If you’re using a different react setup (like create-react-app), you might have to install vite as well.
• You can install additional packages here if you want. They would only be installed the first time user runs the test. On subsequent runs, it can reuse the installed packages (since they are not removed at the end of testing)
• Then we create a .labtests folder inside of the /home/damner/code user code directory. Note that .labtests is a special folder that can be used to place your test code. This folder will not be visible in the file explorer user sees, and the files placed in this folder are not “backed up to cloud” for user.
• We move the test file you wrote earlier (in last step) to /home/damner/code/.labtests/reactcheck.test.jsx. Note that it is important to give it an extension of .test.jsx for vitest to pick it as a JSX test file.
• We then create another setup file /home/damner/code/.labtests/setup.js with just jsdom as the import. This is because vitest can then use JSDOM to parse the DOM without browser. More information about this setup file can be found in vitest docs here.
• We then also create a custom vite config file as config.js. This is because we don’t want to override your (or users’) custom vite.config.js file if present. This file only loads jsdom and marks the globals: true hence importing describe, test, etc. automatically available without importing. More information about the configuration can be found here in vitest docs.
• We then create a process.js file that can be used to process our results into a single file of boolean values. This is important because on the playground page, the way challenges work, is that they get green or red based on a JSON boolean array written inside the file in environment variable: $UNIT_TEST_OUTPUT_FILE
• For example, once the test run succeeds, and if you write [true,false,true,true] inside $UNIT_TEST_OUTPUT_FILE, it would reflect as PASS, FAIL, PASS, PASS for 4 challenges available inside playground UI (as shown below)

• Then we run the actual test using yarn vitest run command, specifying the output as JSON (read by process.js) and in a single thread (as we want ordered results).

• Finally we run the process.js file that writes the correct JSON boolean array on $UNIT_TEST_OUTPUT_FILE which is then read by the playground UI and marks the lab challenges as pass or fail.

Note: You can setup a full testing environment in this block of evaluation script (installing more packages, etc. if you want). However, your bash script test file will be timed out after 30 seconds. Therefore, make sure, all of your testing can happen within 30 seconds.

Next step is to setup test file for this lab.

Step 5 - Test file

In the same Evaluation tab, you’ll see another section called “Custom test file”. You can use this test file to add custom code for testing user work.

When you click on it, a new window will open. This is a test file area.

You can write anything here. Whatever script you write here, can be executed from the Test command to run section inside the evaluation tab we were in earlier.

The point of having a file like this to provide you with a place where you can write your evaluation script.

For React.js labs, you can use the React (Vitest) evaluation script:

import '@testing-library/jest-dom'
import * as React from 'react'
import { render, fireEvent, screen, waitFor } from '@testing-library/react'

// Import the user component if you want
import App from '/home/damner/code/src/App'

describe('Test runner suite', () => {
	// Sample test - each "test" block will be linked to individual challenge
	test('App should mount correctly', async () => {
		const { container } = render(<App />)
		expect(container.querySelector('main')).toBeInTheDocument()
	})
})

Let us understand what is happening here exactly:

• Remember that we can code anything in this file and then execute it later. In this example, we’re writing a React.js Vitest test script from scratch. Check out vitest docs if you’re new to vitest.
• Remember that we will install vitest and other required utilities in the evaluation script section below. Therefore, you can try to import and use anything and everything here you want.
• The rest of the code is just importing the default user code, and testing it through standard unit testing procedures.

• The number of test(...) blocks inside your describe suite must match the number of challenges added in the creator area.

• Note: If your number of test blocks are less than challenges added back in the UI, the “extra” UI challenges would automatically stay as “false”. If you add more challenges in test file, the results would be ignored. Therefore, it is important that the results.length is same as the number of challenges you added in the challenges UI.

• We then also add jQuery and chai for assisting with testing. Although it is not required as long as you can populate the results array properly.

This completes your evaluation script for the lab. Your lab is now almost ready for users.

Step 6 - Add challenges

Finally, in the UI below, add friendly name of challenges that must be visible to the user. Note that the order of challenges is important here and must match the boolean array you write using the bash script + test file above.