DEV Community

Marco
Marco

Posted on

[WIP] Test UI?

There are different solutions on test UI

  • Jest unit testing
  • Jest Snapshots
  • Integration testing
  • Image comparison testing
  • Accessibility reports
  • Manual testing

When to us what? In my experience a big project will end up using all of them.

Let start with the first

Jest unit testing

Unit testing is a type of software testing that focuses on individual units or components of a software system.

Nice... but let also mention that:

we want to test behavior and not implementation

The goal is I can change 100% the implementation and the test will still pass

How? the style is called "Black box testing" and it focus on behavior not on testing each function input output

Jest Snapshots

As the official docs tell

Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly

The idea is, I take a copy of the rendered component ( only the generated HTML) in a scenario X and I will compare each time I run the test. If it's different... Well, we know something has changed

... to be continued

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post β†’

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❀️