0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>Front-end testing is a difficult task. So, framework creators try to simplify it in every way possible. React seems to have advanced the furthest in this regard because the test framework jest was also developed by Facebook. Accordingly, the level of support is high for front-end testing, specifically for React.</p>
1
<p>Front-end testing is a difficult task. So, framework creators try to simplify it in every way possible. React seems to have advanced the furthest in this regard because the test framework jest was also developed by Facebook. Accordingly, the level of support is high for front-end testing, specifically for React.</p>
2
<h2>JS DOM</h2>
2
<h2>JS DOM</h2>
3
<p>The library called<strong>JS DOM</strong>is a pure JavaScript implementation of the DOM API for Node.js. It helps to emulate a subset of browser functions sufficient for testing and parsing sites. JS DOM is built into Jest and requires absolutely no configuration. It is easy to see if you open Hexlet tests in any practice exercise that works with a browser.</p>
3
<p>The library called<strong>JS DOM</strong>is a pure JavaScript implementation of the DOM API for Node.js. It helps to emulate a subset of browser functions sufficient for testing and parsing sites. JS DOM is built into Jest and requires absolutely no configuration. It is easy to see if you open Hexlet tests in any practice exercise that works with a browser.</p>
4
<p>Speaking of usage, it looks like we have document and window available right in the test itself:</p>
4
<p>Speaking of usage, it looks like we have document and window available right in the test itself:</p>
5
<p>It begs the question: why use JS DOM when there are drivers that work with real browsers? There are several answers:</p>
5
<p>It begs the question: why use JS DOM when there are drivers that work with real browsers? There are several answers:</p>
6
<ol><li>JS DOM is much faster than browsers because it's just a headless JavaScript library</li>
6
<ol><li>JS DOM is much faster than browsers because it's just a headless JavaScript library</li>
7
<li>JS DOM consumes significantly less memory to run</li>
7
<li>JS DOM consumes significantly less memory to run</li>
8
<li>JS DOM and the tested code work within a single Node.js interpreter. In practice, this causes any errors within the code to show up with an exception and display a stack trace. This behavior makes debugging much easier</li>
8
<li>JS DOM and the tested code work within a single Node.js interpreter. In practice, this causes any errors within the code to show up with an exception and display a stack trace. This behavior makes debugging much easier</li>
9
</ol><p>The only serious disadvantage is that JS DOM is not a browser. In other words, tests may work perfectly well in JS DOM but not in a browser, and vice versa.</p>
9
</ol><p>The only serious disadvantage is that JS DOM is not a browser. In other words, tests may work perfectly well in JS DOM but not in a browser, and vice versa.</p>
10
<p>In addition, JS DOM is far behind the development of most browsers. Not all old features work in the JS DOM, and new features appear with a delay. The use of polyfills alleviates the problem, but if you use something very exotic, it may not work. So, we can at least say that it's manageable, and polyfills do save the day.</p>
10
<p>In addition, JS DOM is far behind the development of most browsers. Not all old features work in the JS DOM, and new features appear with a delay. The use of polyfills alleviates the problem, but if you use something very exotic, it may not work. So, we can at least say that it's manageable, and polyfills do save the day.</p>
11
<h2>The react-test-renderer package</h2>
11
<h2>The react-test-renderer package</h2>
12
<p>Since React generates a virtual DOM, you can take advantage of this. The react-test-renderer package provides the ability to render a React component without interacting with a browser:</p>
12
<p>Since React generates a virtual DOM, you can take advantage of this. The react-test-renderer package provides the ability to render a React component without interacting with a browser:</p>
13
<p>This package makes it easy to use snapshot testing in Jest. It is sufficient to pass the result of the toJSON function call to expect.</p>
13
<p>This package makes it easy to use snapshot testing in Jest. It is sufficient to pass the result of the toJSON function call to expect.</p>
14
<h2>The react-testing-library</h2>
14
<h2>The react-testing-library</h2>
15
<p>This library is for full React application testing, and its main idea is to ignore component implementation details and test the application as a real user would use it. This library uses JS DOM internally and is widely used in tests here on Hexlet:</p>
15
<p>This library is for full React application testing, and its main idea is to ignore component implementation details and test the application as a real user would use it. This library uses JS DOM internally and is widely used in tests here on Hexlet:</p>
16
16