Prettier, Jest & Playwright Plugins — Part 2

110 Plugins for JavaScript/TypeScript Testing (end-to-end and unit), Code Formatting.

Prettier — code formatting
General Functionality
File Types
Framework-Specific Plugins
HTML
Language-Specific Plugins
Related Tools and Integrations

Jest — unit testing
Accessibility and Best Practices
CI Integration
Component and UI Testing
HTML Reporters
JSON Schema
Matchers and Assertions
Minimal & Simple Reporters
Mocking & Stubbing
Performance & Progress
Reporting in Pipelines
Reporting and Logging
Runners
Testing Utilities and Frameworks
Transformers
Watch Plugins
Community and Resources

Playwright — end-to-end testing
Playwright AI
Accessibility and Best Practices
Enhancements and Extensions
Integrations and Frameworks
Utilities and Tools
Community and Resources

Prettier

ESLint is a static code analysis tool that identifies and fixes problems in JavaScript and TypeScript code.

Prettier focuses solely on code formatting, ensuring a consistent style throughout your codebase. It addresses aesthetic aspects like:

• Line length
• Spacing
• Indentation

Both tools owe some of their success to their plugin architectures, which enable developers to add custom functionality. Prettier, like ESLint, boasts a wide range of plugins to tackle various scenarios.

Prettier can be found here.

Prettier · Opinionated Code Formatter · Prettier

General Functionality

1. prettier-plugin-jsdoc: Formats JSDoc comments.
2. prettier-plugin-organize-imports: Organizes and sorts import statements.
3. prettier-plugin-packagejson: Formats package.json files.
4. prettier-plugin-sh: Adds support for formatting shell script files.

File Types

1. prettier-plugin-toml: Formats TOML configuration files.
2. prettier-plugin-ini: Formats INI configuration files.
3. prettier-plugin-properties: Formats .properties files.
4. @prettier-plugin-xml: Formats XML files.

Framework-Specific Plugins

1. prettier-plugin-tailwindcss: Sorts Tailwind CSS classes.
2. prettier-plugin-svelte: Adds support for Svelte components.
3. @prettier/plugin-pug: Formats Pug (formerly Jade) templates.
4. prettier-plugin-sql: Formats SQL queries.
5. prettier-plugin-glsl: Formats GLSL (OpenGL Shading Language) code.
6. prettier-plugin-twig: Formats Twig templates.
7. prettier-plugin-marko: Formats Marko templates.
8. prettier-plugin-astro: Formats Astro components.

HTML

1. prettier-plugin-organize-attributes: Organize your HTML attributes automatically with Prettier.

Language-Specific Plugins

1. prettier-plugin-java: Adds support for formatting Java files.
2. @prettier/plugin-php: Formats PHP code.
3. @prettier/plugin-ruby: Adds support for formatting Ruby files.
4. prettier-plugin-apex: Formats Salesforce Apex code.
5. prettier-plugin-solidity: Formats Solidity code used for smart contracts.
6. prettier-plugin-elm: Formats Elm code.

Related Tools and Integrations

1. eslint-config-prettier: Disables ESLint rules that conflict with Prettier. If you are using current versions of ESLint, this would not be needed.
2. stylelint-prettier: Runs Prettier on CSS/SCSS/Less and integrates with Stylelint.
3. prettier-eslint: Runs Prettier, then ESLint, fixing formatting and linting issues.
4. prettier-stylelint: Runs Prettier, then Stylelint.
5. pretty-quick: Runs Prettier on staged files before committing (using Git hooks).
6. lint-staged: Runs linters (including Prettier) on staged files.
7. editorconfig-checker: Helps maintain consistent coding styles across different editors.

Jest

Jest is a JavaScript unit testing solution, with a focus on simplicity.

Jest works with Babel, TypeScript, Node, Angular and more.

Get Bill Musgrave’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

While Jest doesn’t have a plugin system, it does have an ecosystem of related packages to extend Jest’s abilities.

jest

Accessibility and Best Practices

1. jest-axe: Integrates axe-core for accessibility testing.

CI Integration

1. jest-junit: Generates JUnit XML reports for CI integration.
2. jest-junit-reporter: A JUnit test reporter for Jest.
3. jest-sonar: Converts the generated report into Sonar’s Generic Execution format.

Component and UI Testing

1. @testing-library/vue: Provides utilities for testing Vue components.
2. @testing-library/angular: Provides utilities for testing Angular components.
3. jest-image-snapshot: Enables snapshot testing for images.
4. jest-plugins: A package that aims to simplify the use of Jest plugins (though its popularity has waned).
5. jest-preset-angular: A preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects.
6. jest-styled-components: A set of utilities for testing Styled Components with Jest.

HTML Reporters

1. jest-html-reporter: Generates an HTML summary of test results.
2. jest-html-reporters: Jest test results processor for generating a summary in HTML.
3. jest-stare: A configurable HTML reporter with filtering, snapshot diffs, and more.

JSON Schema

1. jest-json-schema: JSON schema matcher.

Matchers and Assertions

1. @testing-library/jest-dom: Custom matchers for asserting on DOM nodes.
2. @emotion/jest: Matcher for testing Emotion components.
3. @testing-library/jest-native: Matchers for React Native.
4. expect-puppeteer: Matchers for Jest & Puppeteer.
5. jest-chain: Allows chaining Jest matchers for more readable assertions.
6. jest-enzyme: Assertion library for enzyme.
7. jest-extended: Provides additional matchers for more expressive assertions.
8. jest-generator: Matcher for testing generator functions.
9. jest-openapi: Matchers for asserting HTTP responses against OpenAPI

Minimal & Simple Reporters

1. jest-simple-dot-reporter: A minimal reporter that prints a dot for each test.
2. jest-summary-reporter: Simple reporter to summarize the failing tests at the END of a test run.

Mocking & Stubbing

1. identity-obj-proxy: Useful for mocking CSS modules or other file imports in Jest tests.
2. jest-canvas-mock: Mocks the HTML5 canvas element for testing canvas-based components.
3. jest-date-mock: Mocks the date and time in tests.
4. jest-fetch-mock: Mocks the fetch API.
5. jest-localstorage-mock: Mocks the localStorage API.
6. jest-location-mock: Mocks the window.location object.
7. jest-mock-extended: Type safe mocking extensions for Jest.
8. jest-shell-matchers: Test shell scripts while mocking specific commands.
9. jest-when: Simplifies mocking return values based on arguments.

Performance & Progress

1. @jest-performance-reporter: Creates reports with execution times to help identify performance bottlenecks.
2. jest-progress-bar-reporter: Adds a progress bar to the test output.
3. jest-slow-test-reporter: Identifies and reports the slowest tests in your codebase.

Reporting in Pipelines

1. jest-ado-reporter: Reports Jest test suite progress information to the pipeline step in Azure DevOps.

Reporting and Logging

1. jest-clean-console-reporter: Collects and groups console messages.
2. jest-console-group-reporter: Groups console messages and provides filtering options.
3. jest-console-reporter: Custom Jest reporter to reduce console spam.

Runners

1. jest-runner-eslint: Runs ESLint as part of your Jest test suite.
2. jest-runner-mocha: Allows running Mocha tests with Jest.
3. jest-runner-prettier: Formats your code with Prettier as part of your Jest workflow.
4. jest-runner-stylelint: Integrates Stylelint into Jest.

Testing Utilities and Frameworks

1. @testing-library/react: Simple and complete React DOM testing utilities.
2. @traceloop/jest-opentelemetry: Matchers and runner for end-to-end tests with Jest & OpenTelemetry.
3. jest-environment-webdriver: Connect Jest tests to Selenium WebDriver.
4. jest-preset-angular: A preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects.
5. jest-puppeteer: Integrates Jest with Puppeteer for end-to-end testing.

Transformers

1. babel-jest: A transformer that allows you to use Babel with Jest (often used for transpiling JSX or newer JavaScript syntax).
2. ts-jest: A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.
3. jest-transform-stub: Stubs imports for non-code assets (e.g., CSS, images).
4. jest-webpack-resolver: A plugin for changing jest resolving behavior to webpack resolver through any webpack config.

Watch Plugins

1. jest-watch-typeahead: Improves the watch mode by allowing you to filter tests by file name or test name.

Community and Resources

1. jest-cheat-sheet: lots of testing examples.
2. Configuring code coverage Correctly.
3. Jest Community.

Playwright

Playwright is an open source automation testing framework from Microsoft, used for end to end testing of web applications. It works with all major browsers (Chromium, WebKit, Firefox); write 1 script, run across any supported browser. Playwrights home page is here, and it can be downloaded and installed from here.

playwright

Playwright assertions are based on Jest’s, with custom matchers from Playwright. Note that you can also use other assertion libraries such as Chai or Mocha.

Additional Tools included with Playwright:

Codegen. Generate tests by recording your actions. Save them into any language.

Playwright inspector. Inspect page, generate selectors, step through the test execution, see click points and explore execution logs.

Trace Viewer. Capture all the information to investigate the test failure. Playwright trace contains test execution screencast, live DOM snapshots, action explorer, test source and many more.

Playwright AI

1. auto-playwright: Automating Playwright steps using ChatGPT. A new addin based on ZeroStep. Introduction here.
2. @zerostep/playwright: Supercharge your Playwright tests with AI. Zerostep offers both a low use free account and a higher volume for $20/month per user.

Revolutionizing Microsoft Playwright Testing with the Power of AI

Accessibility and Best Practices

1. @axe-core/playwright: This plugin provides a simple way to integrate the axe-core library with your Playwright tests.
2. axe-playwright: This plugin is a wrapper around the axe-core library and provides a simple API for integrating accessibility checks into your Playwright tests.

Enhancements and Extensions

1. playwright-extra: A popular library that extends Playwright with plugins from the Puppeteer ecosystem (like stealth and recaptcha solving).
2. puppeteer-extra-plugin-stealth: Helps evade anti-bot detection measures.
3. puppeteer-extra-plugin-recaptcha: Automates solving reCAPTCHA and hCaptcha challenges.
4. playwright-fluent: Provides a more fluent and chainable API for Playwright.
5. playwright-elements: Offers enhanced page object implementation with features like element locators and auto-waiting.
6. playwright-lighthouse: Developed by Google, it analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.
7. playwright-test-coverage: Collects code coverage information from Playwright tests.
8. playwright-performance: Helps measure and analyze web application performance within Playwright tests.
9. playwright-cleanup: Simplifies test cleanup by automatically undoing changes to the testing environment.

Integrations and Frameworks

1. @alex_neo/playwright-azure-reporter: Playwright Azure DevOps Reporter.
2. expect-playwright: Provides utility matchers for Jest in combination with Playwright.
3. jest-playwright-preset: Integrates Playwright with the Jest testing framework.
4. playwright-pytest: Integrates Playwright with the pytest framework in Python.
5. playwright-github-action: A GitHub Action for setting up and running Playwright tests in CI/CD.
6. playwright-chrome-recorder: Exports Playwright tests from Google Chrome DevTools recordings.

Utilities and Tools

1. Try Playwright: An interactive online playground for experimenting with Playwright.
2. Moon: A tool for running Playwright tests in parallel on a Kubernetes cluster.
3. chrome-aws-lambda: Enables running Playwright on AWS Lambda and Google Cloud Functions.
4. eslint-plugin-playwright: An ESLint plugin for enforcing best practices in Playwright tests.

Community and Resources

1. Awesome Playwright: A curated list of lists of awesome Playwright tools and resources on GitHub. ***** Highly recommended.
2. Playwright on Stack Overflow: A platform for asking and answering Playwright-related questions.
3. Playwright on Discord: A community for discussing Playwright and getting help.

I hope you find this helpful. Please let me know your experiences or questions you may have.

Other Plugin Articles
1 —ESLint: 100 ESLint Plugins (over 1,900 rules) for Code Quality, Security, Testing, Performance & More.
3 — Visual Studio Code: 36+ AI Assistant Extensions plus 85+ Extensions for JavaScript/TypeScript/Angular and more.
4 — Stylelint: Lints CSS and CSS-like languages like SCSS, Sass, Less Sass, and more.
5 — Chrome Extensions: Web Development, Debugging, Layout, Testing, and Accessibility Tools.
6 — Azure DevOps Extensions: 40+ Extensions for your Boards, Repos, and Pipelines.

I share lessons from decades in software delivery — from CI/CD to architecture governance. If you’re tackling similar challenges and want a seasoned perspective, I’m available for consulting at https://www.musgrave.com .