React

To create a new assignment in React, click into one of your courses, and then click Add assignment. Choose React from the drop-down list of available frontend frameworks and set the the rest of your assignment's parameters (deadline, etc.). Once the assignment is created, a new folder will be created in the private GitHub/GitLab template repository for the course in which you are added this assignment. This folder will contain a standard React project structure.

Automated test-suite setup

If you would like to add tests that are automatically run by CodeScreen against each candidate's solution to your assessment, you can add these as unit tests or end-to-end tests.

All unit tests files must use the Jest or Vitest test framework, and all end-to-end tests must use the Cypress E2E test framework.

All unit test filenames must end with .test.js, .test.jsx, .test.ts or .test.tsx, and unit test files with filenames that end with .hidden.test.js, .hidden.test.jsx, .hidden.test.ts or .hidden.test.tsx will not be visible to the candidate.

All end-to-end test filenames must end with .cy.js or .cy.ts, and end-to-end test files with filenames that end with .hidden.cy.js or .hidden.cy.ts will not be visible to the candidate.

If you want to add files that your hidden unit tests use and hence are also not visible to the candidate, the names of these files must begin with hidden (case-insensitive), e.g., hiddenFoo.json, hiddenFoo.csv, HiddenFoo.js, etc.

You can use either Create React App or Vite as your project build tool.

GitHub Action & GitLab CI/CD

AssignmentOS uses either GitHub Actions or GitLab CI/CD (depending on whether you use with GitHub or GitLab) to run automated unit tests. We provide the following GitHub Action & GitLab CI/CD file for React assignments. Note that this file is added dynamically to the repo of each student taking your assignment, so please do not include it in your template repo. This file also cannot be changed.

GitHub Action .yml fileGitLab CI/CD .yml file
name: React CI

on: push

jobs:

  unit:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v3

    - name: Install dependencies
      run: npm install

    - name: Run unit tests
      run: npm test -- --passWithNoTests
      env:
        CI: false

  e2e:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v3

    - name: Install dependencies
      run: npm install

    - name: Check Cypress tests exist
      id: check_cypress_tests
      uses: andstor/file-existence-action@v1
      with:
        files: "cypress/e2e/"

    - name: Install and run Cypress tests
      uses: cypress-io/github-action@v5
      if: steps.check_cypress_tests.outputs.files_exists == 'true'
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      with:
        build: npm run build --if-present
        start: npm start
        wait-on: 'http://localhost:3000'

Coming soon!

PreviousAngularJSNextReact Native

Last updated