-
-
Notifications
You must be signed in to change notification settings - Fork 66
Add testing framework #431
Description
For an [Eleventy (11ty)](https://www.11ty.dev/) site using [Nunjucks](https://mozilla.github.io/nunjucks/), the best testing frameworks generally fall into two categories: Unit/Integration Testing for checking your JavaScript logic or rendered HTML fragments, and End-to-End (E2E) Testing for verifying the final generated site in a browser environment. [1, 2]
Top 5 Testing Frameworks
- [Playwright](https://playwright.dev/) (Best for E2E and Cross-Browser Testing): Developed by Microsoft, it is a top choice for 2026 due to its native support for Chromium, Firefox, and WebKit (Safari engine). It is highly reliable for testing static sites because it includes auto-waiting, which ensures elements are fully rendered before interacting with them.
- [Cypress](https://www.cypress.io/) (Best for Developer Experience): A leading E2E framework known for its fast setup and real-time debugging. It runs directly in the browser, providing a "time-travel" feature that allows you to see exactly what happened at each step of your test.
- [Jest](https://jestjs.io/) (Best for Unit and Snapshot Testing): Maintained by Meta, Jest is the most popular framework for testing JavaScript logic. In an Eleventy context, it is excellent for snapshot testing, where it captures the rendered HTML output of a Nunjucks template and alerts you if it changes unexpectedly.
- [Vitest](https://vitest.dev/) (Best for Speed and Modern Workflows): A "blazing-fast" test runner that is gaining significant popularity in the JavaScript ecosystem. It uses a syntax compatible with Jest but is much faster for local development cycles. It is even used by the official Eleventy repository for some of its client-side tests.
- [AVA](https://github.com/avajs/ava) (The Eleventy Choice): Notably, Eleventy's own internal test suite primarily uses AVA. It is designed for concurrency, running tests in parallel to maximize speed, which is beneficial for large static sites with many template variations. [1, 2, 3, 4, 5, 6, 7, 8, 9]
Recommended Testing Strategy for Eleventy
- Template Verification: Use Jest or Vitest to render specific Nunjucks templates and verify the output HTML matches your expectations.
- Visual and Functional Checks: Use Playwright or Cypress to run your full Eleventy build and browse the site automatically to check for broken links or layout issues.
- Lightweight Sanity Checks: If you prefer minimal dependencies, you can use the native Node.js test runner (available in Node 18+) to perform basic sanity checks on your build artifacts without installing a third-party framework. [3, 4, 7]
Would you like a sample Playwright configuration specifically for testing an Eleventy _site output folder?
[1] [https://www.baserock.ai](https://www.baserock.ai/blog/best-javascript-testing-framework)
[2] [https://saucelabs.com](https://saucelabs.com/resources/blog/top-5-javascript-test-automation-frameworks)
[3] [https://kittygiraudel.com](https://kittygiraudel.com/2026/03/12/adding-tests-to-an-eleventy-site/)
[4] [https://www.wildnetedge.com](https://www.wildnetedge.com/blogs/end-to-end-testing-frameworks-you-should-try)
[5] [https://maestro.dev](https://maestro.dev/insights/end-to-end-web-testing-tools)
[6] [https://romeerez.hashnode.dev](https://romeerez.hashnode.dev/best-nodejs-test-framework-with-benchmarks)
[7] [https://www.baserock.ai](https://www.baserock.ai/blog/best-javascript-testing-framework)
[8] [https://github.com](https://github.com/11ty/eleventy#:~:text=ava%20JavaScript%20test%20runner%20%28assertions%20docs%29%20%28primary,in%20packages/client/test/%20%29%20Benchmark%20for%20Performance%20Regressions.)
[9] [https://www.syncfusion.com](https://www.syncfusion.com/blogs/post/javascript-unit-test-frameworks)
Metadata
Metadata
Labels
Type
Projects
Status