How we made JavaScript testing 15x faster

Pinterest Engineering
5 min readbeginner
--
View Original

Overview

This article discusses how Pinterest improved its JavaScript testing framework, reducing test execution time from 15 minutes to just 1 minute. The new framework, named Affogato, leverages jsdom and optimized test execution strategies to enhance speed and reliability.

What You'll Learn

1

How to optimize JavaScript testing using jsdom

2

Why using fixtures can improve test reliability

3

How to implement an XHR recorder for network requests in tests

4

When to use parallel test execution to speed up testing

Prerequisites & Requirements

  • Understanding of JavaScript testing frameworks and concepts
  • Familiarity with jsdom and Mocha(optional)

Key Questions Answered

How did Pinterest reduce JavaScript testing time from 15 minutes to 1 minute?
Pinterest achieved a significant reduction in JavaScript testing time by implementing a new framework called Affogato, which utilizes jsdom for faster execution and optimizes test execution through parallel processing and chunking tests. This approach led to performance improvements of 5-20x for most tests.
What strategies were used to improve the reliability of tests?
To enhance test reliability, Pinterest used fixtures to avoid costly data lookups and network transfers, and implemented an XHR recorder to capture and replay network requests. This approach minimized flaky tests caused by network issues and improved overall test trustworthiness.
What is the role of fixtures in the new testing framework?
Fixtures are files containing JSON data that describe objects to be tested. They allow the testing framework to create mock objects easily, enabling various object states to be tested without the need for extensive boilerplate code, thus improving test efficiency.
How does the new framework handle multiple experiments in testing?
The new framework wraps the Mocha testing framework with syntactic sugar to easily target multiple experiments in a single test. This design accommodates the dynamic nature of experiments affecting various code paths, simplifying the setup process for developers.

Key Statistics & Figures

Test execution time
1 minute
Reduced from 15 minutes to 1 minute after implementing the new testing framework.
Performance improvement for tests
5-20x
Internal benchmarks showed this range of speed increases for most tests after switching to jsdom.
Reduction in test runtimes
30%
Average reduction achieved by using the XHR recorder.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Backend
Jsdom
Used to implement a lightweight DOM environment for faster JavaScript testing.
Testing Framework
Mocha
Wrapped with additional features to simplify the testing of multiple experiments.
Testing Library
Sinon.js
Used for sandboxing and cleaning up the global environment after tests.

Key Actionable Insights

1
Implementing jsdom in your testing framework can significantly speed up test execution.
By using jsdom, which focuses on DOM manipulation without the overhead of a full browser, you can achieve performance gains of 5-20x, especially for DOM-heavy tests.
2
Utilizing fixtures can streamline your testing process and improve reliability.
Fixtures allow you to create mock objects without repetitive code, reducing the chances of errors and making tests easier to maintain.
3
Consider using an XHR recorder to handle network requests in tests.
An XHR recorder can capture responses for later playback, helping to avoid flaky tests caused by network issues and speeding up test execution by an average of 30%.
4
Adopting a parallel test execution strategy can optimize resource usage.
By breaking tests into smaller chunks and utilizing multiple processor cores, you can efficiently manage resources and reduce overall testing time.

Common Pitfalls

1
Relying too heavily on network requests in tests can lead to flaky results.
Network issues can cause tests to fail unpredictably, so it's essential to minimize their use or implement strategies like XHR recording to mitigate this risk.
2
Not utilizing fixtures can lead to cumbersome and error-prone test setups.
Without fixtures, developers may find themselves writing repetitive boilerplate code, which can introduce errors and make tests harder to maintain.