{"id":21095578,"url":"https://github.com/johnsusek/vue-test-declarative","last_synced_at":"2025-05-16T14:34:20.728Z","repository":{"id":53411860,"uuid":"195576071","full_name":"johnsusek/vue-test-declarative","owner":"johnsusek","description":"Declarative unit testing for Vue components.","archived":false,"fork":false,"pushed_at":"2021-03-30T22:45:47.000Z","size":119,"stargazers_count":10,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T12:02:52.023Z","etag":null,"topics":["declarative","testing","testing-tools","unit-testing","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnsusek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-06T19:29:40.000Z","updated_at":"2020-08-31T02:25:20.000Z","dependencies_parsed_at":"2022-08-27T19:00:37.616Z","dependency_job_id":null,"html_url":"https://github.com/johnsusek/vue-test-declarative","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnsusek%2Fvue-test-declarative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnsusek%2Fvue-test-declarative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnsusek%2Fvue-test-declarative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnsusek%2Fvue-test-declarative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnsusek","download_url":"https://codeload.github.com/johnsusek/vue-test-declarative/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225435284,"owners_count":17473897,"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":["declarative","testing","testing-tools","unit-testing","vue"],"created_at":"2024-11-19T22:27:38.883Z","updated_at":"2024-11-19T22:27:39.558Z","avatar_url":"https://github.com/johnsusek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction\n\nVue unit testing EZ-mode.\n\n# Installation\n\n```js\nvue add @vue/unit-jest\nvue add @vue/unit-mocha\nyarn add --dev vue-test-declarative babel-register babel-polyfill browser-env\n```\n\n# Usage\n\n1) Create a file `HelloWorld.vuetest` in `tests/declarative`:\n```xml\n\u003ctests for=\"@/components/HelloWorld.vue\"\u003e\n  \u003ctest name=\"Contains welcome message\"\u003e\n    \u003cexpect text to-match=\"Welcome\" /\u003e\n  \u003c/test\u003e\n\u003c/tests\u003e\n```\n\n2) Run `npm run test:declarative` \n\nMore details are available in the [API Docs](https://github.com/johnsusek/vue-test-declarative/blob/master/docs/API.md).\n\n## Examples\n\n### Props\n\nFor this example, we'll test the `HelloWorld` component from the [default vue-cli template](https://github.com/vuejs/vue-cli/blob/master/packages/@vue/cli-service/generator/template/src/components/HelloWorld.vue) that we've all seen when starting a new project. \n\nCreate a `HelloWorld.vuetest` file in the `tests/declarative` directory with these contents:\n\n```vue\n\u003ctests for=\"@/components/HelloWorld.vue\"\u003e\n  \u003ctest name=\"Render message correctly\" :props=\"props\"\u003e\n    \u003cexpect text to-match=\"Success!\" /\u003e\n  \u003c/test\u003e\n\u003c/tests\u003e\n\n\u003cscript\u003e\nlet context = {\n  props: {\n    msg: 'Success!',\n  }\n};\n\u003c/script\u003e\n```\n\nThis simple test __expects__ for the component __text to match__ \"Welcome!\" in the rendered HelloWorld component. This component uses a prop named msg to display a welcome message, so we pass one in using our script section.\n\nSee all tags and options in the [API docs](https://github.com/johnsusek/vue-test-declarative/blob/master/docs/API.md).\n\n### Interactions\n\nHere is a test for the official TodoMVC example that shows how interactions (`set`/`trigger`) work:\n\n```vue\n\u003ctest name=\"add a todo\"\u003e\n  \u003cset selector=\".new-todo\" value=\"First\" /\u003e\n  \u003ctrigger selector=\".new-todo\" event=\"keyup.enter\" /\u003e\n  \u003cexpect text-of=\".todo-list li\" to-match=\"First\" /\u003e\n  \u003cexpect text-of=\".todo-count\" to-match=\"1 item left\" /\u003e\n\u003c/test\u003e\n```\n\n## Run tests\n\n`npm run test:declarative`\n\nThis command will generate and run mocha tests for all `.vuetest` files in your test path (defaults to `tests/declarative`).\n\n`npm run test:declarative -- --keep`\n\nThis command is the same as above but will not delete the generated mocha tests after running.\n\n## vuetest.setup.js\n\nSometimes your tests will require you to import and register components you are using (like vuetify or element-ui), or run other setup before a test. If you need this functionality, create a `vuetest.setup.js` file in the `tests/declarative` directory that defines a variable called `localVue`. This will be used instead of the default Vue instance when running your tests.\n\n```javascript\nimport ElementUI from 'element-ui';\nimport { createLocalVue } from '@vue/test-utils';\n\nlet localVue = createLocalVue();\nlocalVue.use(ElementUI);\n```\n\nAny additional javascript required by your tests can be added to this file, and it will be executed before your tests are run. \n\n**In general, any test/component-specific javascript should go into your .vuetest `\u003cscript\u003e` section, while anything global to all tests should go into your vuetest.setup.js file.**\n\n# Configuration\n\nCreate a `vuetest.config.json` file in your project root. This file may contain options to configure vue-test-declarative. The following options are supported:\n\n### `testsPath`\n\nvue-test-declarative defaults to looking for tests in `tests/declarative`. Use this config setting if you want to place your .vuetest and vuetest.setup.js files somewhere else.\n\n### `webpackConfigPath`\n\nvue-test-declarative tries to find your webpack config automatically if you are using a vue-cli template. If your webpack.config.js file is in another location, set its path here.\n\n# Documentation\n\n👉 [API Docs](https://github.com/johnsusek/vue-test-declarative/blob/master/docs/API.md)\n\n👉 [TodoMVC Example Test Suite](https://github.com/johnsusek/vue-test-declarative/blob/master/docs/examples/Vuex-TodoMVC.vuetest)\n\n# Tips\n\n💡 Set the syntax highlighting in your editor to vue, vue-html, or xml when working with .vuetest files.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnsusek%2Fvue-test-declarative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnsusek%2Fvue-test-declarative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnsusek%2Fvue-test-declarative/lists"}