I had a chance to talk with Nick Nisi about Jest Preview on JS Party Podcast. In this episode, Nick shared his experience attending JSNation and React Summit in Amsterdam. Our discussion about Jest Preview starts at 38:15. I briefly introduced what Jest Preview is and what problems it is trying to solve. I also shared about Best Practice to use Jest Preview when you write tests, and how it can boost your productivity by 300%. Finally, I explained how the library works under the hood (hint: it's very simple).
I hope you enjoy this episode.
Bellow you can find the transcript of this episode.
Nick Nisi: So I am here with Hung. Hung, how are you doing?
nvh95: I'm doing great. How are you doing?
Nick Nisi: I'm doing fantastic. So we're both back from React Summit,but actually you weren't at React Summit. You attended online. I didn't know that when I was at the conference because one of the really cool things that they had in person was kind of a tweet wall where they were showing tweets about the conference up on a screen right next to the speakers. And I saw your name up there a couple of times, and then I recognized your name from the site too, talking about the Open Source Awards. And so I just thought you were there, and I kind of reached out to you on Twitter but then found out that you were attending online.
So yeah, I want to ask you how was the online experience?
nvh95: Yes. At the end of May that I surprisingly received an email from the React Summit team. They informed me that my project get nominated in The Most Exciting Use of Technology category in the React Open Source Awards, and they invited me to the React Summit. I think it's not real but turns out it is. Unfortunately, I haven't got the visa to fly to the Netherlands in time, so I attended the conference virtually.
Even though I didn't get the chance to join the conference in-person, I learned a lot and I made a lot of new friends. It's a very exciting and interesting experience for me.
Nick Nisi: Awesome. Yeah, that's really cool. And that's how we got connected. It did work out well, and I really appreciated kind of multiple ways to attend the conference. If you can't or if you're not comfortable attending in person, you can attend online. And yeah, that was really nice because you still get a lot of that experience and being able to connect with people. So let's talk about your project. You did mention that it was nominated for The Most Exciting Use of Technology category in the Open Source Awards. What's your project called?
nvh95: It's Jest Preview.
Nick Nisi: From that name, I can get an idea that it's kind of around testing and around Jest specifically, but what does it do?
nvh95: Yeah, Jest Preview is a library that boosts the productivity of front engineer by at least 300%.
And when you write an e2e test, you can see the UI.
Like cypress, you have a dashboard you can see step by step. But when you write unit tests and integration tests, you do not know how the UI looks like.
If you use React Testing library, you have some tools like screen.debug(), but the output is a loooong HTML in the terminal, and it's painful to read and debug. It bugs me for years.
Now, I am a full time open source contributor.
But before that, I am a lead front end engineer for almost five years.
It's not just my problem because it slowed down my team's productivity.
So I need to have some kind of solution to boost the productivity of my team.
So I asked myself a question that when I run screen.debug(), I can see the whole HTML, but can I put that HTML into the browser? It's just my idea, I try to make it happen and turns out it's possible and it helped me a lot.
The first version and the current version of Jest Preview are completely two different libraries.
But because I am using my own package, I can improve it and add more features to it over time.
And because you have the ability to "see" your application UI in the browser, you can save a lot of time when testing a web application.
In the past, sometimes, you try to click on a button, but nothing happened because of a loading spinner. Now you can see the loading spinner before you can write the test code to click that button. So it's going to save you time. It makes your life easier and improves the quality of web application in general by encouraging you to write more tests.
Nick Nisi: Yeah, so I can just immediately just looking at the docs for this, (fantastic docs by the way), but just looking at this, I can immediately see that it's useful and I just kind of want to walk through what I'm seeing right in the introduction in kind of a little repeating GIF to give an idea of what it's doing and how easy it is to set up.
So you mentioned what I do right now with my Jest tests, which it works, but it's still very hard.
I just do the screen.debug() and I look at the markup that gets printed to the terminal.
Not the easiest thing, but it does give mean idea, usually it's like: oh, my suspense wrapper is still waiting right there. So that does help me a little bit.
But looking at this, it looks like what you do is you just import preview from 'jest-preview', and then I could change my screen.debug() to preview.debug(). And that's pretty much it right alongside also running Jest Preview.
nvh95: Yeah. But in recent version, I released a feature Automatic Mode. You don't even need to import preview from 'jest-preview'.
Nick Nisi: Really?
nvh95: Yes, it automatically previews if your test fails. You don't have to do anything else, just run the jest-preview CLI and whenever your test fails, it's going to preview the app into your browser automatically.
It's amazing. You don't have to call debug() anymore.
Nick Nisi: Okay, that is incredible. That makes it so much easier because you don't have to do any modifications to your test.
nvh95: Yeah, you just have to install jest-preview and configure it a little bit.
Nick Nisi: Okay, so you config it and then do you basically run jest-preview instead of just to run your test?
nvh95: No, actually, that you have to run two commands.
The first one is your test command, for example: jest --watch. The second command is jest-preview.
That command initiates a node server that serves Jest Preview Dashboard.
And that dashboard will preview your UI in Jest. So, yeah, basically you have to run two commands.
Nick Nisi: That is incredible because it just makes it so much easier and you don't even have to modify the test. I'm thinking to myself like could I test this out without getting buy in from the rest of my team and just use it kind of on my own locally to get started. And it seems like I could if I just could install it globally and then set up a config file and then start running it. And so when it's running, it's opening up a browser. And in your example here, you're like finding an element in the component like a button or finding get by text with screen and then clicking it and you can see that it's clicking every time. You can see exactly what it's doing in the browser. And so it gives you that kind of visual debugging experience that is very much lacking from writing component tests with Jest.
nvh95: Actually in the documentation. There is some best practice I haven't had time to write how to use it properly. I can think of two use cases you would like to use jest preview.
The first one is you debug an existing test when you just plug the debug command whenever you want so you can see the exact UI in the browser.
The second one is when you write a new test, you put the debug() at the end of the it/ test's callback block. Whenever you write a new line of code and hit Save, the UI previews in the browser immediately.
And it's very fast for you to write a test.
Before jest preview, for example, I write tests for the whole new feature. It takes me 20 hours, but now it's just taking me 5 hours.
Nick Nisi: Wow. So it's a big productivity booster for you.
nvh95: And you can imagine for a company with thousands of engineers, if they can save that amount of time, how much money we can save?
Nick Nisi: Yeah, that is amazing. Now I want to ask a little bit about the underlying tech that it's using. Did I hear you say that it's using Cypress to power that experience?
nvh95: No.
Nick Nisi: No? what's it using?
nvh95: The implementation is dead simple. It's just one line of code.
The idea is very simple: when we run the test in Node because in the Node environment there is no DOM.
So we have to use some kind of JSDOM, like jsdom or happy-dom or something like that.
So we can have access to window, document. Even though it's not a real DOM, but it's pretty close to the real one.
And the DOM has a property outerHTML.
I just do a very simple thing like console.log(document.body.outerHTML) and I save it to a file on a disk. Then I make a node server to serve the file. And whenever the file changes, the web page automatically reloads by a WebSocket connection.
It's very simple. Just one line code.
Nick Nisi: Yeah. Okay. I was thinking it was something like Playwright or something like that, kind of driving the browser, but that is much simpler.
nvh95: Super simple.
Nick Nisi: Yeah, I like that.
nvh95: I invite you to read the source code on my GitHub. It's very simple. It's not some kind of crazy technical thing. It's just a few lines of code.
Nick Nisi: Okay, awesome.
nvh95: The most difficult thing when I work with Jest Preview is related to the CSS. Because if we just bring the HTML to the browser, it's very easy. But to support CSS, it takes about 90% of my time working with Jest Preview, because there are a lot of CSS strategies and standards to write them. Like vanilla CSS. Some techniques require PostCSS, like TailwindCSS, CSS Modules. Some use CSS-in-JS, like styled-component, Emotion, Stiches and the one that Airbnb just adopts recently, Linaria.
Proceeding each one is very different to each other. So I spent a lot of time writing Jest code transformations to transform the CSS, so you can display the style in the Jest Preview Dashboard.
Nick Nisi: Nice.
nvh95: If you have ever configured Jest from scratch before, you see: whenever we hit the CSS file, we just return the string in the Jest Code Transformation. But if I want to make the preview looks the exact same way as it's on production, you have to write a custom CSS code transformation. And it's the hardest part when working with Jest Preview.
Nick Nisi: Yeah, I can imagine. That was one thing I was going to ask about, was how that works. So that's really cool. So, yeah, definitely check out Jest Preview. We'll have a link in the show notes. We'll also have a link to your Twitter, and people can reach out to you if they have any questions or want to learn more. Is there anything else that you want to drop or plug in here?
nvh95: Yeah. I'm happy to support anyone. If you have any questions or you have any trouble integrating Jest Preview into your application, just simply hit me on Twitter.
Nick Nisi: Excellent. Well, thank you so much for coming on. Again, check out Jest Preview. It was the nominee for The Most Exciting Use of technology in the React Open Source Awards, and I cannot wait to try it out and learn more. So I appreciate it and thanks for stopping by.
nvh95: Yes, thank you very much, Nick.