14

I understand that Jest is a unit testing tool for developers used for JavaScript. Is Jest a browser based testing tool similar to Selenium or a functional testing tool?

Willi Mentzel
  • 27,862
  • 20
  • 113
  • 121
gtlkanth
  • 161
  • 1
  • 1
  • 4

3 Answers3

5

Yes, you can use Jest Preview (https://github.com/nvh95/jest-preview) to debug your Jest test in a browser like Google Chrome.

Jest preview in action

You don't have to debug a long HTML text when using Jest Preview anymore.

Read more at https://www.jest-preview.com/docs/getting-started/intro

nvh95
  • 456
  • 6
  • 11
3

As you mention, Jest is meant to be a unit testing tool. Normally you'd write small tests for parts/components of a web-page. I'm not exactly sure what you mean by "Is Jest can be used as Browser based Testing tool?" but I've found there are two relevant areas where Jest can come into contact with browser based testing

  1. You can use a virtual DOM (like JSDOM) to render your components and test them in an environment similar to a browser. These are still unit tests but you'll have access to window and document and can test things like document click, window navigation, focused element etc.

  2. You can debug your Jest tests in browser. Follow the instructions here if that is what you want. I've tried this but it was really slow and not very useful for me so I wouldn't recommend it

You can probably render your entire application and test it with Jest, but I wouldn't recommend that either. Jest tests should be designed to run fast and should only tests small units of your code. If you try and build tests that take a long time to run then there is an argument stating that your unit tests will become useless and developers will eventually not run them anymore.

If you are looking for tests that start an actual browser and click around like a user then have a look at Selenium which I would think is the most common approach these days

Peter
  • 1,006
  • 7
  • 15
  • An example of where you might want to do this is if you are building an online code editor or a site to practice code problems for interviews for front end frameworks such as react and want a way to test the code someone is writing in the browser without sending it to a server for evaluation / testing. Many example of this: codepen, code sandbox, w3schools, rallycoding...and of course my own https://contrived.herokuapp.com/ – cbutler Mar 01 '22 at 11:22
  • As an example, I can run all my `mocha` tests right in the browser too. I just have to load mocha into a simple test HTML file that I open in the browser, and mocha will run all tests and display all results in HTML elements it creates right on the page. `mocha` has native support to be run right inside a browser. This way, I can test my library on node and through a simple test HTML file I can run the exact same tests - unless they use node.js specific imports of course - right inside the browser, without adding anything myself. -- Example: https://stackoverflow.com/q/42857778/544779 – Mörre Jul 15 '23 at 11:58
2

This npm library can be integrated with your jest tests to run them in a browser :) : https://www.npmjs.com/package/jest-browser

I can't say how good it is/what the cons are but it looks like it is worth a try!

Jack Wilkinson
  • 77
  • 5