{"id":16190601,"url":"https://github.com/linusborg/vue-cli-plugin-test-attrs","last_synced_at":"2025-04-21T11:33:30.381Z","repository":{"id":33278679,"uuid":"155115607","full_name":"LinusBorg/vue-cli-plugin-test-attrs","owner":"LinusBorg","description":"A small plugin vor vue-cli 3 that adds a compiler plugin to remove data-test attributes when desired","archived":false,"fork":false,"pushed_at":"2023-01-07T04:47:54.000Z","size":4846,"stargazers_count":64,"open_issues_count":30,"forks_count":9,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-04-01T12:54:35.877Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LinusBorg.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":"2018-10-28T21:05:54.000Z","updated_at":"2025-01-07T19:40:53.000Z","dependencies_parsed_at":"2023-01-15T00:30:41.660Z","dependency_job_id":null,"html_url":"https://github.com/LinusBorg/vue-cli-plugin-test-attrs","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusBorg%2Fvue-cli-plugin-test-attrs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusBorg%2Fvue-cli-plugin-test-attrs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusBorg%2Fvue-cli-plugin-test-attrs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusBorg%2Fvue-cli-plugin-test-attrs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LinusBorg","download_url":"https://codeload.github.com/LinusBorg/vue-cli-plugin-test-attrs/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250048101,"owners_count":21366176,"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":[],"created_at":"2024-10-10T07:43:42.223Z","updated_at":"2025-04-21T11:33:30.064Z","avatar_url":"https://github.com/LinusBorg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-cli-plugin-test-attrs\n\n\u003e A plugin for vue-cli that adds a compiler module to vue-loader\n\u003e that can remove predefined data attributes from your SFC templates at build time\n\n## Why\n\nWhen testing your component, you frequently need to select some dom element to check if it is present, has the right properties and so forth.\n\nUsing classes and ids for this is not a good idea, as [explained in this excellent blog post](https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269) by the great Kent C. Dodds. While written with React in mind, the same problems apply to Vue components.\n\nThe proposed solution: Use data attributes instead, which are not linked to your styles and don't pollute your csss class namespace.\n\nBut we don't want these properties to make it into our production code, right? Besides looking amateurish it will increase the size of our render functions.\n\nIn React, this can be solved with a babel plugin, but in Vue, we compile our .vue files with webpack \u0026 vue-loader. But we can solve this challenge with a [compiler module](https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options) for vue-loader.\n\nThis vue-cli-plugin adds such a compiler module to vue-cli's webpack config and exposes a few configuration options in vue.config.js for your convenience.\n\n## Installation\n\n\u003e This library requires @vue/cli \u003e=3\n\nwith @vue/cli:\n\n```bash\nvue add test-attrs\n```\n\nor manually:\n\n```bash\nnpm install -D vue-cli-plugin-test-attrs\n\nyarn add -D vue-cli-plugin-test-attrs\n```\n\n## Usage\n\nby default, this plugin adds the compiler module to vue-loader's config, so the `data-test` attributes will be removed and not end up in the bundle that you serve.\n\nIt does _not_ add the compiler module (and consequently, it keeps the `data-` attributes) when:\n\n- `process.env.NODE_ENV === 'test'` or\n- `!!process.env.VUE_CLI_KEEP_TEST_ATTRS`\n\nThis means:\n\n1. For `vue-cli-service serve` and `vue-cli-service build` commands, the test attributes will be removed by the compiler module.\n2. For unit tests with `jest` or `mocha` (`vue-cli-service test:unit`), the `data-test` attributes will be present because `NODE_ENV ==== 'test'` (and in the case of jest, vue-loader isn'T used at all anyway)\n\n3. For other environments (e.g. e2e tests), you can use the `VUE_CLI_KEEP_TEST_ATTRS` environment variable to skip adding the compiler module so `data-test` attributes are persisted.\n\n## Options\n\nthe plugin's options can be configured in `vue.config.js`:\n\n```javascript\n// vue.config.js\nmodule.exports = {\n  pluginOptions: {\n    testAttrs: {\n      // you can enable and disable it yourself,\n      // i.e. with an environment variable:\n      enabled: process.env.MY_COOL_ENV,\n      // you can also define which `data-` attributes should\n      // should be removed.\n      attrs: ['test'], // default: removes `data-test=\"...\"`\n    },\n  },\n}\n```\n\n### Jest\n\nAs explained above, the plugin should work out of the box\n\n### Mocha\n\nAs explained above, the plugin should work out of the box\n\n### Cypress\n\nE2E tests with Cypress usually run in `'production'` mode, so by default this plugin would remove all `data-test` atributes. To keep them in your code for your e2e tests, you can set the `VUE_CLI_KEEP_TEST_ATTRS` environment variable:\n\n```\n\"test:e2e\": \"VUE_CLI_KEEP_TEST_ATTRS=true vue-cli-service test:e2e\"\n```\n\nHowever, I would personally suggest to use a custom environment:\n\n```\n# .env.e2e\nNODE_ENV=production\nVUE_CLI_KEEP_TEST_ATTRS=true\n```\n\n```\n\"test:e2e\": \"vue-cli-service test:e2e --mode e2e\"\n```\n\n### Nichtwatch\n\n\u003e I haven't tested this plugin with nightwatch yet, so if you can contribute instructions, please go ahead and open a PR.\n\n### Rollup\n\n\u003e to follow.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinusborg%2Fvue-cli-plugin-test-attrs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinusborg%2Fvue-cli-plugin-test-attrs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinusborg%2Fvue-cli-plugin-test-attrs/lists"}