Existing HN: Attempting out Library Visualizer

Motivation

React Attempting out Library and the total checking out library family of tools has made checking out frontends extra rigorous and a long way extra efficient than it extinct to be. Alternatively, one of the power challenges when writing these assessments is their debug-skill. When a take a look at fails, checking out library dumps the HTML into the console. Or no longer it is at all times sophisticated to parse, and obscure what made the take a look at fail. Furthermore, interactively building up assessments is sophisticated.

The purpose of this library is to develop writing and debugging assessments iteratively more straightforward by showing you what your take a look at is doing, and allowing you to have interaction with it.

Setup

Install the kit through:

npm set up checking out-library-visualizer

Whenever you happen to prefer to deserve to enjoy your app’s styling and resources readily obtainable while debugging then you would possibly want to restful create the application and build the following in a jest setup file. Whenever you happen to is more likely to be the usage of Construct React App the following can lunge into setupTests.js. Whenever you happen to attach no longer want a file that sets up the jest context, that you can specify one.

import { setup } from "checking out-library-visualizer";
import course from "course";
import { predict } from "@jest/globals";
import { camouflage, inner, fireEvent } from "@checking out-library/react";
import userEvent from "@checking out-library/user-match";

setup(course.join(__dirname, "..", "create")); // This must restful point out wherever your constructed resources are

registerCommands({ camouflage, inner, fireEvent, userEvent, predict }); // This must restful encompass any instructions you prefer to deserve to trudge. Witness the custom say portion below.

For customers the usage of Construct React App we robotically use the generated asset-manifest.json file to:

1. Decide the compiled CSS file for the application
2. Translate requests for resources (photography and so forth) so the debug behold pulls from the effective URL

Whenever you happen to is more likely to be no longer the usage of CRA these items also can no longer work out of the box. In fact feel free to attach a controversy as we would favor to toughen many different setups.

Debugging a take a look at

Once setup, debugging a take a look at is easy. In the take a look at file with the take a look at you prefer to deserve to debug add:

import { debugTest } from "checking out-library-visualizer";

Then exchange take a look at with debugTest. As an example:

import { render } from "@checking out-library/react";
import App from "./App";
import { debugTest } from "checking out-library-visualizer";

debugTest("Test App", async () => {
  render(App />);
});

Must you trudge your take a look at it is possible you’ll presumably peek printed:

Debug server is running, originate at 127.0.0.1: 3001

Trip to the URL and you would possibly want to restful peek the debug interface:

From this interface that you can trudge instructions to have interaction alongside with your take a look at. Namely, that you can trudge the following in-constructed instructions:

highlight
refresh
console

And while you configured your take a look at setup as specified above it is possible you’ll presumably presumably enjoy internet entry to to:

camouflage
inner
userEvent
fireEvent
predict

Highlight and refresh are defined by Attempting out Library Visualizer. highlight takes a HTML ingredient(s) and draws packing containers around them. Here’s a genuine come to plot terminate what ingredients you is more likely to be selecting alongside with your checking out library instructions. refresh asks for the most up-to-date pronounce of the application. Here is correct when an operation would possibly presumably prefer some time to halt, and you prefer to deserve to gape the freshest version of the component you is more likely to be checking out.

The usage of these instructions that you can create up a chunky take a look at interactively.

Errors

All errors are caught by the library and proven through the interactive editor. This lets you gape why instructions failed while building up your take a look at.

The library additionally reads from console.error and reports any errors printed out while running a say. These errors can no longer be linked to a particular line, since they happen asynchronously, nonetheless the library reports them to the user as quickly because it detects them. Here is in particular correct for catching act warnings.

Ancient previous

The library maintains the list of instructions trudge in the upper read handiest code editor. It additionally maintains a buffer of old instructions that will also be accessed in the code enter portion by the usage of ctrl+arrow up/down (alt+arrow up/down on Mac). This historical previous is kept in local storage in relate that that you can internet entry to it between take a look at runs. It is possible you’ll presumably presumably certain this historical previous by the usage of the Particular Ancient previous button.

Restarting Tests

Clicking the Reset Test button will certain the dom and rerun the take a look at code laid out in the take a look at file. This would possibly occasionally also be correct while it is possible you’ll presumably need lost observe of the pronounce of your take a look at and would favor to originate over. Cloak, this would not the truth is reason Jest to rerun the take a look at. Any modifications made to the take a look at code or underlying component is no longer going to be picked up. To internet those modifications it is possible you’ll presumably deserve to cease the take a look at by clicking the End Test button and restarting it with Jest. Furthermore, if there is any completely different pronounce in the take a look at, clicking reset take a look at is no longer going to certain that pronounce which will reason errors. (i.e. no forward of or after blocks are trudge while you reset the take a look at.)

Custom Styling

In many projects there are extra than one sources for styling. Whereas by default we gape for a manifest.json generated by Construct React App’s create process, that you can add styling from completely different sources as effectively.

To assassinate this it is possible you’ll presumably presumably deserve to add the following to your jest take a look at setup file.

import { registerStyling } from "checking out-library-visualizer";

registerStyling(/ */);

It is possible you’ll presumably presumably specify a URL hosted by a server, or a course that beneficial properties to the static constructed resources in a directory defined by the setup say above. This means that you can correct reproduction a CSS file into your create folder, and specify the course the usage of the registerStyling characteristic to take it up.

Specifying a file in the create directory would gape one thing fancy this:

registerStyling("static/css/take a look at.css")

The place the create folder has sub folders static/css and where take a look at.css is in that folder.

Specifying a URL would gape one thing fancy this:

registerStyling("http://some-url.com/css/css-file.css)

It must originate with an http or https to be conception of an absolute URL.

Custom Commands

In many projects it is possible you’ll presumably account for custom instructions that it is possible you’ll presumably deserve to trudge in the interactive debug mode. To add instructions it is possible you’ll presumably deserve to add the following to you jest setup file.

import { registerCommands } from "checking out-library-visualizer";

registerCommands({
  take a look at: () => {
    console.log("take a look at say");
  }, // Here is an instance say