DEV Community

Cover image for Introducing Majestic, A Zero Config GUI for Jest
Raathi
Raathi

Posted on

Introducing Majestic, A Zero Config GUI for Jest

Jest really made testing painless and, like many tools in the Javascript ecosystem, the default interface to interact with Jest is via the CLI. And it's one of the best CLI out there. But what if Jest comes with a GUI interface as well?

πŸ•‘ A while ago

A year ago I released an open-source side project of called Majestic, A GUI for Jest. It was an electron app which interacted with the Jest CLI on behalf of you. It worked as a proof of concept but it was far away from what a tool like that could be. But I learned a lot about the technical and design decisions made and wanted to star over from scratch.

πŸŽ‰ An all-new Majestic

Today I'm extremely happy to introduce you to the all-new Majestic and it's just a single command, npx majestic, away.

Majestic 1.0

Majestic is no longer an electron app but a npm module. Go into your project which has Jest configured and run npx majestic in your terminal and you will see the UI open in your default browser.

The all-new Majestic would allow you to

  • βœ… Run all the tests or a single file
  • ⏱ Toggle watch mode
  • πŸ“Έ Update snapshots
  • ❌ Examine test failures as they happen
  • ⏲ Console.log() to the GUI for debugging
  • πŸ” Search tests

All these with almost zero additional configuration.

🀝 Help us make it better

GitHub logo Raathigesh / majestic

⚑ Zero config GUI for Jest


Majestic is a GUI for Jest

  • βœ… Run all the tests or a single file
  • ⏱ Toggle watch mode
  • πŸ“Έ Update snapshots
  • ❌ Examine test failures as they happen
  • ⏲ Console.log() to the UI for debugging
  • πŸš” Built-in coverage report
  • πŸ” Search tests
  • πŸ’Ž Works with flow and typescript projects
  • πŸ“¦ Works with Create react app

Majestic supports Jest 20 and above

Get started

Run majestic via npx in a project directory

cd ./my-jest-project # go into a project with Jest
npx majestic # execute majestic
Enter fullscreen mode Exit fullscreen mode

or install Majestic globally via Yarn and run majestic

yarn global add majestic # install majestic globally
cd ./my-jest-project # go into a project with Jest
majestic # execute majestic
Enter fullscreen mode Exit fullscreen mode

or install Majestic globally via Npm and run majestic

npm install majestic -g # install majestic globally
cd ./my-jest-project # go into a project with Jest
majestic # execute majestic
Enter fullscreen mode Exit fullscreen mode

Running as an app

…

If you are interested in contributing or just wondering what powers Majestic under the hood,

  • Majestic frontend is written in React JS and Appolo qrahphQL
  • The local backend runs a NodeJS qrahphQL server and spins up Jest as a child process and interacts with it

Give it a try. If you have a feature request or ran into an issue, either create an issue in the github repository or drop by our community chat https://spectrum.chat/majestic

Cheers

Top comments (1)

Collapse
 
stereoplegic profile image
Mike Bybee • Edited

Noice! Starred.