HTML Diff
0 added 0 removed
Original 2026-01-01
Modified 2026-02-21
1 <p>Imagine a function that takes some HTML as input, extracts all the links from it, and returns them as an array:</p>
1 <p>Imagine a function that takes some HTML as input, extracts all the links from it, and returns them as an array:</p>
2 <p>The piece of HTML at the beginning of the test looks scary. It's large and consists of a massive load of tags. Of course, you can try to format it, but you'll have to do it all manually. For any editor, it's just a line in JavaScript. But it's not just about formatting, this way of working with large chunks of data has other disadvantages:</p>
2 <p>The piece of HTML at the beginning of the test looks scary. It's large and consists of a massive load of tags. Of course, you can try to format it, but you'll have to do it all manually. For any editor, it's just a line in JavaScript. But it's not just about formatting, this way of working with large chunks of data has other disadvantages:</p>
3 <ul><li>It's very easy to make a mistake when preparing updates, and they're difficult to detect visually. The editor can't help here either.</li>
3 <ul><li>It's very easy to make a mistake when preparing updates, and they're difficult to detect visually. The editor can't help here either.</li>
4 <li>The more such data in tests, the harder it is to read and separate the logic from the data itself.</li>
4 <li>The more such data in tests, the harder it is to read and separate the logic from the data itself.</li>
5 </ul><p>It would be much more convenient if HTML was stored as normal HTML in its own file. It isn't hard to do. In this case, the test will look like this:</p>
5 </ul><p>It would be much more convenient if HTML was stored as normal HTML in its own file. It isn't hard to do. In this case, the test will look like this:</p>
6 <p>The data needed during test runs are called fixtures. It isn't necessarily text data. Fixtures can be images, JSON- and XML-files, database records, and more. Sometimes code can also be part of the fixture, but this is quite rare.<a>Such fixtures</a>are needed when testing different code analyzers, such as ESLint or Babel.</p>
6 <p>The data needed during test runs are called fixtures. It isn't necessarily text data. Fixtures can be images, JSON- and XML-files, database records, and more. Sometimes code can also be part of the fixture, but this is quite rare.<a>Such fixtures</a>are needed when testing different code analyzers, such as ESLint or Babel.</p>
7 <p>Usually, fixtures are stored in separate files in their own directory. In Jest, it's recommended to create a __fixtures__ directory in the root of the project for this purpose. They're then read and used as and when.</p>
7 <p>Usually, fixtures are stored in separate files in their own directory. In Jest, it's recommended to create a __fixtures__ directory in the root of the project for this purpose. They're then read and used as and when.</p>
8 <p>An example:</p>
8 <p>An example:</p>
9 <p>When there's more than one fixture, many similar calls that read files will start to appear in the test code:</p>
9 <p>When there's more than one fixture, many similar calls that read files will start to appear in the test code:</p>
10 <p>In this case, it is better to bring the construction of the path in a separate function, and at the same time use the correct way of gluing paths:</p>
10 <p>In this case, it is better to bring the construction of the path in a separate function, and at the same time use the correct way of gluing paths:</p>
11  
11