Web-Frontend of [dom-preview](https://npmjs.com/packages/dom-preview).
MIT License
This README is generated via ./scripts/build-readme.js
vitest-preview is a great help for debugging our test-cases, but some things are missing.
vitest
or jest
depending on which package you use.This is an attempt to improve this behavior and make it more convenient to make screenshots of your tests.
I started out with a simple solution that does not need any dependencies, but it has gotten a little more complicated.
There are three components
debug()
function that dumps the current DOM and sends it to the server.npm install dom-preview
Run the server
npx dom-preview
Open http://localhost:5007/__dom-preview__/
In your test, call the debug function
import { screen } from "@testing-library/dom";
import { userEvent } from "@testing-library/user-event";
import { debug } from "dom-preview";
test("input fields", async () => {
const user = userEvent.setup();
document.body.innerHTML = `
<label for="firstname">First name:</label><input id="firstname" type="text" value="" />
<label for="lastname">Last name:</label><input id="lastname" type="text" value="" />
`;
debug("empty inputs");
await user.type(screen.getByLabelText("First name:"), "Max");
debug("firstname entered");
await user.type(screen.getByLabelText("Last name:"), "Mustermann");
debug("form complete");
});
If you want nicely styled previews, you need to make sure that your test-framework emits css into the DOM. In vitest, you can do this by setting
test: {
css: true;
}
(see https://vitest.dev/config/#css for details)
Sometimes your previews show images or use other files that would usually be delivered by your web-server.
Since the dom-preview
server is framework independent, it does not have information about those assets.
It does not have access to your build configuration.
As a workaround, the server has the ability to proxy all requests that do not go to the /__dom-preview__/
-path
to another URL. You can do this by using the option --proxy-to=<url>
:
npx dom-preview --proxy-to-http://localhost:4000
A preview can have context. dom-preview
does not make assumptions about what it is. It is just a string.
In the UI it is used to group tests together.
The intended use is to store the name of the currrent test. In vitest, you can use configure a "setupFile":
test: {
css: true,
globals: true,
setupFiles: ["./src/setupTests,js"]
}
and then create "setupTests" like this:
import { setDomPreviewContext } from "dom-preview";
beforeEach(() => {
setDomPreviewContext(expect.getState().currentTestName);
});
Another convenient way is to use npm-run-all to run vite dev-server, tests in watch mode:
"scripts": {
"dev:server": "vite --port=5173",
"dev:unit": "vitest --ui",
"dev:dom-preview": "dom-preview --proxy-to=http://localhost:5173",
"dev": "run-p dev:*",
}
In my view, this is the ideal setup for doing test-driven development in frontend projects
This project is licensed under the MIT License
I want to be honest. There is just to much going on in my life at the moment and I might not have much time maintaining this project. I wanted to do it anyway. I tried to design this project to make it easily maintainable.
If you like to help me maintain and update dependencies, please contact me.
You can also send me money, if you like my work: