Add option to strip certain JSX attributes when transforming

[KL13NT]

Description

When testing components we usually assign certain JSX attributes such as data-testid. I'd like to have an option to specify certain attributes to be stripped during the transform stage. There are babel plugins that accomplish this and can be easily integrated into this pipeline.

Suggested solution

babel-plugin-react-remove-properties can be used to configure which attributes to remove.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[KL13NT]

Okay I just realized I can pass a custom babel config to this plugin. My config now looks like this:

import { resolve } from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig(({ mode }) => ({
	plugins: [
		react({
			babel: {
				plugins:
					mode === "production"
						? [
								[
									"react-remove-properties",
									{
										properties: ["data-testid"],
									},
								],
						  ]
						: [],
			},
		}),
	],
	resolve: {
		alias: {
			"~": resolve(__dirname, "./src"),
		},
	},
}));

Works like a charm :)