Registry / typescript-transformer-jsx-remove-data-test-id

typescript-transformer-jsx-remove-data-test-id

library1.1.0jsnpmunverified

This package provides a TypeScript transformer designed to automatically strip `data-test-id` and `data-testid` attributes from JSX elements during the build process, primarily for production builds. It helps clean up the final DOM, removing attributes that are only relevant for testing and debugging, thus preventing unnecessary bloat or exposure of internal testing concerns. The current stable version is 1.1.0, released in October 2020. This project does not follow a strict release cadence, with updates being made as needed. A key differentiator is its implementation as a TypeScript transformer, offering integration into TypeScript compilation workflows (e.g., via webpack with `ts-loader`), as opposed to similar solutions built as Babel plugins.

npm install typescript-transformer-jsx-remove-data-test-id

github ↗package ↗

INSTALL

IMPORT

SIG · TYPESCRIPT-TRANSFO

typescript-transformer-jsx-remove-data-test-id

javascriptv1.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

removeDataTestIdTransformer

✓ import { removeDataTestIdTransformer } from 'typescript-transformer-jsx-remove-data-test-id';

✗ import removeDataTestIdTransformer from 'typescript-transformer-jsx-remove-data-test-id';

This is a named export, not a default export. Use destructuring for ESM imports.

removeDataTestIdTransformer

✓ const { removeDataTestIdTransformer } = require('typescript-transformer-jsx-remove-data-test-id');

CommonJS usage, typically for webpack or Node.js configuration files.

This webpack configuration demonstrates how to integrate the TypeScript transformer using `ts-loader` to remove `data-test-id` and `data-testid` attributes from production builds of React/TypeScript applications.

const { removeDataTestIdTransformer } = require('typescript-transformer-jsx-remove-data-test-id'); const path = require('path'); module.exports = { mode: 'production', entry: './src/index.tsx', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', options: { getCustomTransformers: () => ({ before: [removeDataTestIdTransformer()] }), // Ensure ts-loader uses a tsconfig.json that includes JSX configFile: path.resolve(__dirname, 'tsconfig.json') } } ] }, resolve: { extensions: ['.tsx', '.ts', '.js'], }, // Example of a tsconfig.json for this setup: // { // "compilerOptions": { // "target": "ES2018", // "module": "ESNext", // "jsx": "react", // "lib": ["DOM", "ESNext"], // "strict": true, // "esModuleInterop": true, // "skipLibCheck": true, // "forceConsistentCasingInFileNames": true // }, // "include": ["src"] // }

Debug

Known issues

gotchaTypeScript does not natively support custom transformers directly through `tsc` for project compilation. This transformer must be integrated into a build pipeline that supports custom transformers, such as webpack with `ts-loader` or `awesome-typescript-loader`, or other tools like esbuild or ts-patch.

fix

Configure your build tool (e.g., webpack) to use `ts-loader`'s `getCustomTransformers` option or an equivalent mechanism in other bundlers.

affects: >=1.0.0

breakingVersion 1.1.0 introduced explicit support for stripping `data-testid` attributes. Prior versions primarily targeted `data-test-id`. While the package name uses `data-test-id`, the latest version extends functionality to include `data-testid`, aligning with common practices in libraries like React Testing Library.

fix

Upgrade to `1.1.0` or higher to ensure both `data-test-id` and `data-testid` attributes are removed if both are present in your codebase.

affects: ==1.0.0

gotchaImproper configuration or lack of environment-specific application (e.g., applying the transformer in development builds) can lead to `data-test-id` attributes being removed prematurely, breaking tests that rely on them. Ensure the transformer is only active in production or specific non-test environments.

fix

Wrap the transformer application in conditional logic based on your environment variables (e.g., `process.env.NODE_ENV === 'production'`) within your webpack or build configuration.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: (0 , _typescriptTransformerJsxRemoveDataTestId.removeDataTestIdTransformer) is not a function

Incorrect import syntax. The `removeDataTestIdTransformer` is a named export, not a default export.

fix

Use named import syntax: `import { removeDataTestIdTransformer } from 'typescript-transformer-jsx-remove-data-test-id';` or CommonJS destructuring: `const { removeDataTestIdTransformer } = require('typescript-transformer-jsx-remove-data-test-id');`

data-test-id attributes are not being removed from my production build.

The transformer is either not correctly integrated into the build pipeline, or the build tool (e.g., webpack) is not processing the files with `ts-loader` configured to use the transformer, or it's an older version not handling `data-testid`.

fix

Verify that `ts-loader` is configured with `getCustomTransformers: () => ({ before: [removeDataTestIdTransformer()] })` in your webpack config for `.tsx` files. Ensure your `tsconfig.json` supports JSX. Check that `typescript-transformer-jsx-remove-data-test-id` is version `1.1.0` or higher for `data-testid` support.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

typescriptrequiredPeer dependency for TypeScript compilation and transformer API.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/andrewbents/typescript-transformer-jsx-remove-data-test-id ↗

packagehttps://www.npmjs.com/package/typescript-transformer-jsx-remove-data-test-id ↗