{"id":20000436,"url":"https://github.com/knpwrs/vue-node","last_synced_at":"2025-05-04T15:32:21.642Z","repository":{"id":72021094,"uuid":"81634076","full_name":"knpwrs/vue-node","owner":"knpwrs","description":"Load vue components in node.","archived":false,"fork":false,"pushed_at":"2017-08-29T13:48:30.000Z","size":23,"stargazers_count":61,"open_issues_count":4,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-19T09:39:33.192Z","etag":null,"topics":["node","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/knpwrs.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-02-11T05:56:25.000Z","updated_at":"2024-09-25T08:23:10.000Z","dependencies_parsed_at":"2024-01-02T23:40:07.917Z","dependency_job_id":"ba9d079e-59c8-4ea4-82da-a9bdd8c50d9a","html_url":"https://github.com/knpwrs/vue-node","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/knpwrs%2Fvue-node","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knpwrs%2Fvue-node/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knpwrs%2Fvue-node/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knpwrs%2Fvue-node/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knpwrs","download_url":"https://codeload.github.com/knpwrs/vue-node/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252356118,"owners_count":21734885,"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":["node","testing","vue"],"created_at":"2024-11-13T05:14:45.148Z","updated_at":"2025-05-04T15:32:21.402Z","avatar_url":"https://github.com/knpwrs.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","叫研发工具组","Components \u0026 Libraries","Dev Tools","Dev Tools [🔝](#readme)"],"sub_categories":["Testing","试验","Dev Tools","Test"],"readme":"# vue-node\n\n[![Dependency Status](https://img.shields.io/david/knpwrs/vue-node.svg)](https://david-dm.org/knpwrs/vue-node)\n[![devDependency Status](https://img.shields.io/david/dev/knpwrs/vue-node.svg)](https://david-dm.org/knpwrs/vue-node#info=devDependencies)\n[![Build Status](https://img.shields.io/travis/knpwrs/vue-node.svg)](https://travis-ci.org/knpwrs/vue-node)\n[![Npm Version](https://img.shields.io/npm/v/vue-node.svg)](https://www.npmjs.com/package/vue-node)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n[![Badges](https://img.shields.io/badge/badges-6-orange.svg)](http://shields.io/)\n\nA require hook for loading single-file vue components in node. Useful for\ntesting without having to spin up web browsers!\n\n## Impending Deprecation Notice\n\n[The Vue team is going to be creating official testing tools][vue-test-utils]\nbased on [`avoriaz`] which already has complete examples of how to test Vue\ncomponents in node-based testing frameworks without spinning up web browsers. My\nsuggestion is for users of this library to migrate to [`avoriaz`] and then to\nthe official testing tools once those are available. Once the official testing\ntools are available, I will mark this package as deprecated on npm.\n\nUsage of this library will also require changes to your `vue-loader`\nconfiguration starting with version `^12.0.0`. See [issue #9] for more details.\n\n## Usage Example\n\nHere is an example of using `vue-node` with [AVA]. The process should be similar\nfor whatever node testing framework you want to use.\n\nFirst, make sure you have `vue-node` and [`browser-env`] installed as\ndevelopment dependencies. If you are running an environment with `vue-loader`\nand `webpack@2` then you will already have all required peer dependencies:\n\n```sh\nnpm i -D vue-node browser-env\n```\n\nNow create a setup file called `test/helpers/setup.js`. Putting it in the\n`test/helpers` directory will let [AVA] know that this file is not a test.\n\n```js\nconst browserEnv = require('browser-env');\nconst hook = require('vue-node');\nconst { join } = require('path');\n\n// Setup a fake browser environment\nbrowserEnv();\n// Pass an absolute path to your webpack configuration to the hook function.\nhook(join(__dirname, 'webpack.config.test.js'));\n```\n\nNow you can configure AVA to require this file in all test processes. In\n`package.json`:\n\n```json\n{\n  \"ava\": {\n    \"require\": [\n      \"./test/helpers/setup.js\"\n    ]\n  }\n}\n```\n\nNow you can `require` / `import` `.vue` files and test like you would in a\nbrowser! If you need to test DOM updates, you can use `Vue.nextTick` along\nwith `async` / `await`.\n\n```js\nimport Vue from 'vue';\nimport test from 'ava';\nimport TestComponent from './test.vue';\n\ntest('renders the correct message', async (t) =\u003e {\n  const Constructor = Vue.extend(TestComponent);\n  const vm = new Constructor().$mount();\n  t.is(vm.$el.querySelector('h1').textContent, 'Hello, World!');\n  // Update\n  vm.setName('Foo');\n  await Vue.nextTick();\n  t.is(vm.$el.querySelector('h1').textContent, 'Hello, Foo!');\n});\n```\n\nSee the `test` directory in this project for more examples!\n\n## Common Questions\n\n### How does this work?\n\nNode allows developers to hook `require` to load files that aren't JavaScript or\nJSON. Unfortunately, require hooks have to be synchronous. Using `vue-loader` on\nthe other hand, is inherently asynchronous. `vue-node` works by synchronously\nrunning webpack in a separate process and collecting the output to pass to\nnode's module compilation system. The compilation is done completely in memory\nwithout writing to the filesystem. It also modifies your webpack configuration\nto automatically build for node and commonjs with all dependencies of your\ncomponent externalized. This means that the built component modules are as small\nas possible with dependency resolution left up to node.\n\n### What if I am using vueify?\n\nI am personally more familiar with webpack than browserify, so for the time\nbeing this will only work in combination with webpack. I will gladly accept a\npull request to implement browserify functionality.\n\n### What about testing in web browsers?\n\nUnit testing in web browsers is a very heavy process with many tradeoffs.\nConfiguration and tooling is tricky as is getting browsers to run in CI. I\npersonally like saving browsers for end-to-end testing with things like\n[`Nightwatch.js`].\n\n## License\n\n**MIT**\n\n[`avoriaz`]: https://github.com/eddyerburgh/avoriaz \"avoriaz\"\n[`browser-env`]: https://github.com/lukechilds/browser-env \"Fake browser environment for node.\"\n[`Nightwatch.js`]: http://nightwatchjs.org/ \"Node.js powered End-to-End testing framework\"\n[`p-immediate`]: https://github.com/sindresorhus/p-immediate \"Returns a promise resolved in the next event loop\"\n[AVA]: https://github.com/avajs/ava \"AVA: Futuristic Test Runner\"\n[issue #9]: https://github.com/knpwrs/vue-node/issues/9 \"issue #9\"\n[vue-test-utils]: https://github.com/vuejs/vue-test-utils/issues/1 \"vue-test-utils\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknpwrs%2Fvue-node","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknpwrs%2Fvue-node","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknpwrs%2Fvue-node/lists"}