majestic: A TypeScript repository from theoutlander

⚗ Zero config UI for Jest ⚗

What is Majestic?

Majestic is an electron app for running tests with Jest. Majestic is a tool built for providing great developer experience when you write tests with Jest.

Jest CLI itself is one of the best CLI experience you can get out there today. But Majestic tries to bring that CLI experience in a form of a UI app.

Features

Run the whole project, a file or a particular test with a click
Watch the whole project, a file or a test
Update specific snapshots with a click
Inline coverage reports
Zero configuration (Sorry, I had to)
Support for typescript projects
Support for Create-react-app out of the box
Quick search to search across all your test (It) statements
Failure summary shows all test failtures in a single screen. Useful when you have failures across multiple files.
Locate a specific test in your editor with a click of a button

Download the app

OS X
Windows

External Jest configuration file

Ok, I lied partially about the zero config part.

Majestic is a zero config tool if you keep all your jest configuration in the package.json file.

If you have an external jest config file, you should have a jestConfig key in the package.json pointing to the file as shown below.

{
  "name": "my-awesome-proj",
  "version": "0.1.0",
  "description": "..",
  "jestConfig": "./jest-custom.config.js"
}

Enabling coverage report

Majestic displays coverage reports generated by Jest. So make sure to have HTML coverage report configured so Majestic can display them.

Configuring Jest with Html coverage report

It's really simple.

{
  "collectCoverage": true,
  "coverageReporters": ["html"]
}

Configuring coverage in a create-react-app project

- "test": "react-scripts test --env=jsdom",
+ "test": "react-scripts test --env=jsdom --coverage",

Contribute

Majestic relies on jest-editor-support, a module from jest, which allows to execute jest programatically.

git clone https://github.com/facebook/jest.git
cd jest
yarn install

# link jest-editor-support
cd packages/jest-editor-support
yarn link

Now let's setup majestic.

git clone https://github.com/Raathigesh/majestic.git
cd majestic

# this would install and would do a yarn link for jest-editor-support
yarn install

# start the app
yarn dev

Inspiration

This tool is inspired by https://wallabyjs.com/. Check them out.

Thanks

Thank you @orta for building VSCode Jest and doing the heavy lifting.

Contributors

_Raathigeshan 💻 📖 💬 👀 🤔 🎨

This project follows the all-contributors specification. Contributions of any kind are welcome!

theoutlander/majestic