{"id":17149722,"url":"https://github.com/morellodev/react-test-attributes","last_synced_at":"2025-11-23T08:00:43.607Z","repository":{"id":44018979,"uuid":"231669432","full_name":"morellodev/react-test-attributes","owner":"morellodev","description":"React library to add data-* attributes to DOM elements.","archived":false,"fork":false,"pushed_at":"2023-01-05T04:50:59.000Z","size":948,"stargazers_count":26,"open_issues_count":21,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-14T05:18:02.888Z","etag":null,"topics":["attributes","cypress","data","dom","e2e","javascript","reactjs","selenium","test","testing","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/morellodev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-03T21:36:36.000Z","updated_at":"2023-03-15T17:13:42.000Z","dependencies_parsed_at":"2023-02-03T10:16:51.390Z","dependency_job_id":null,"html_url":"https://github.com/morellodev/react-test-attributes","commit_stats":null,"previous_names":["dennismorello/react-test-attributes"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morellodev%2Freact-test-attributes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morellodev%2Freact-test-attributes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morellodev%2Freact-test-attributes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morellodev%2Freact-test-attributes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morellodev","download_url":"https://codeload.github.com/morellodev/react-test-attributes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245003355,"owners_count":20545598,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["attributes","cypress","data","dom","e2e","javascript","reactjs","selenium","test","testing","typescript"],"created_at":"2024-10-14T21:33:54.449Z","updated_at":"2025-11-23T08:00:43.520Z","avatar_url":"https://github.com/morellodev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Test Attributes\n\n[![Version](https://badgen.net/npm/v/react-test-attributes)](https://www.npmjs.com/package/react-test-attributes/v/latest)\n[![Last Commit](https://badgen.net/github/last-commit/dennismorello/react-test-attributes)](https://github.com/dennismorello/react-test-attributes/commits/master)\n[![Downloads](https://badgen.net/npm/dt/react-test-attributes)](https://www.npmjs.com/package/react-test-attributes/v/latest)\n[![Size](https://badgen.net/bundlephobia/minzip/react-test-attributes)](https://bundlephobia.com/result?p=react-test-attributes@latest)\n[![License](https://badgen.net/npm/license/react-test-attributes)](https://www.npmjs.com/package/react-test-attributes/v/latest)\n\n[React Test Attributes](https://github.com/dennismorello/react-test-attributes) is a library for React apps that decorates the DOM with custom attributes that can be used to uniquely indentify elements in a page. The main use case is for E2E testing using tools like [Cypress](https://www.cypress.io) or [Selenium](https://selenium.dev).\n\n## Table Of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Usage](#usage)\n  - [API](#api)\n  - [Global Configuration](#global-configuration)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Features\n\n- 🏷 **TypeScript support** - It is written in TypeScript to make it easier and faster to use the library\n- 🍃 **Lightweight** - Almost zero footprint on your project and no other dependencies required\n- 🚀 **Production mode** - `data-*` attributes are added to the DOM only when not in production mode\n- 🌳 **Tree-shakeable** - Only the parts you use will be included in your final bundle\n\n## Installation\n\nTo add this package as a dependency to your app, simply run\n\n```sh\nnpm install react-test-attributes --save\n```\n\nor, if you are using Yarn (as I strongly suggest):\n\n```sh\nyarn add react-test-attributes\n```\n\n## Quick Start\n\nImport [React Test Attributes](https://www.npmjs.com/package/react-test-attributes) to your React component (note that, since it is the default export of this package, you can name it whatever you want):\n\n```js\nimport Test from 'react-test-attributes';\n```\n\nThen simply wrap the components you want to decorate:\n\n```jsx\n\u003cTest id=\"btn-submit\"\u003e\n  \u003cbutton\u003eSumbit\u003c/button\u003e\n\u003c/Test\u003e\n```\n\nThe resulting DOM will be the following, depending on the value of `NODE_ENV` environment variable when your project is built:\n\n```html\n\u003c!-- NODE_ENV != \"production\" --\u003e\n\u003cbutton data-testid=\"btn-submit\"\u003eSubmit\u003c/button\u003e\n\n\u003c!-- NODE_ENV == \"production\" --\u003e\n\u003cbutton\u003eSubmit\u003c/button\u003e\n```\n\n### Usage\n\n#### API\n\nThe `Test` component accepts the following props:\n\n- `id` is the value of the added attribute\n- `suffix` is the string to append to `\"data-\"` when building the attribute name (default to `\"testid\"`)\n- `enableInProductionMode` indicates whether or not adding the test attribute in production mode (default to `false`)\n\nFor example, if you want to name the attribute `data-tid` and give it the value `\"link-home\"` you should write:\n\n```jsx\n\u003cTest id=\"link-home\" suffix=\"tid\"\u003e\n  \u003ca href=\"/home\"\u003eHome\u003c/a\u003e\n\u003c/Test\u003e\n```\n\nThis produces the following DOM:\n\n```html\n\u003ca href=\"/home\" data-tid=\"link-home\"\u003eHome\u003c/a\u003e\n```\n\n#### Global Configuration\n\nThe context `TestAttributesConfig` can provide a global configuration to all of its `Test` descendants.\n\nFor example, we can globally override the suffix and enable writing the test attributes also in production mode by doing this:\n\n```jsx\nimport Test, { TestAttributesConfig } from 'react-test-attributes';\n\nconst App = () =\u003e {\n  return (\n    \u003cTestAttributesConfig\n      value={{ suffix: 'tid', enableInProductionMode: true }}\n    \u003e\n      \u003cTest id=\"title\"\u003e\n        \u003ch1\u003eI am the title\u003c/h1\u003e\n      \u003c/Test\u003e\n      \u003cTest id=\"link-home\"\u003e\n        \u003ca href=\"/home\"\u003eHome\u003c/a\u003e\n      \u003c/Test\u003e\n    \u003c/TestAttributesConfig\u003e\n  );\n};\n```\n\nThis produces the following DOM:\n\n```html\n\u003ch1 data-tid=\"title\"\u003eI am the title\u003c/h1\u003e\n\u003ca href=\"/home\" data-tid=\"link-home\"\u003eHome\u003c/a\u003e\n```\n\n## Contributing\n\nIf you find any bug or if you have ideas on how to improve this project, you are more than welcome to open issues and/or making pull requests!\n\n## License\n\nProject source code is licensed under the MIT license. You are free to fork this repository, edit the code, share and use it both for non-commercial and commercial purposes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorellodev%2Freact-test-attributes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorellodev%2Freact-test-attributes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorellodev%2Freact-test-attributes/lists"}