├── .circleci └── config.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .flowconfig ├── .github ├── COMMIT_CONVENTIONS.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE │ ├── 1-bug.md │ ├── 2-feature.md │ ├── 3-cleanup.md │ └── 4-docs.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .nvmrc ├── .prettierignore ├── .prettierrc.json ├── .vscode └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── .eslintrc ├── .vuepress │ ├── config.js │ ├── public │ │ ├── _redirects │ │ ├── favicon.png │ │ └── vueschool.css │ └── theme │ │ ├── Layout.vue │ │ └── index.js ├── README.md ├── api │ ├── README.md │ ├── components │ │ ├── README.md │ │ └── RouterLinkStub.md │ ├── config.md │ ├── createLocalVue.md │ ├── createWrapper.md │ ├── enableAutoDestroy.md │ ├── mount.md │ ├── options.md │ ├── render.md │ ├── renderToString.md │ ├── selectors.md │ ├── shallowMount.md │ ├── wrapper-array │ │ ├── README.md │ │ ├── at.md │ │ ├── contains.md │ │ ├── destroy.md │ │ ├── exists.md │ │ ├── filter.md │ │ ├── is.md │ │ ├── isEmpty.md │ │ ├── isVisible.md │ │ ├── isVueInstance.md │ │ ├── setChecked.md │ │ ├── setData.md │ │ ├── setMethods.md │ │ ├── setProps.md │ │ ├── setValue.md │ │ └── trigger.md │ └── wrapper │ │ ├── README.md │ │ ├── attributes.md │ │ ├── classes.md │ │ ├── contains.md │ │ ├── destroy.md │ │ ├── emitted.md │ │ ├── emittedByOrder.md │ │ ├── exists.md │ │ ├── find.md │ │ ├── findAll.md │ │ ├── findAllComponents.md │ │ ├── findComponent.md │ │ ├── get.md │ │ ├── getComponent.md │ │ ├── html.md │ │ ├── is.md │ │ ├── isEmpty.md │ │ ├── isVisible.md │ │ ├── isVueInstance.md │ │ ├── name.md │ │ ├── overview.md │ │ ├── props.md │ │ ├── setChecked.md │ │ ├── setData.md │ │ ├── setMethods.md │ │ ├── setProps.md │ │ ├── setSelected.md │ │ ├── setValue.md │ │ ├── text.md │ │ └── trigger.md ├── fr │ ├── README.md │ ├── api │ │ ├── README.md │ │ ├── components │ │ │ ├── README.md │ │ │ └── RouterLinkStub.md │ │ ├── config.md │ │ ├── createLocalVue.md │ │ ├── createWrapper.md │ │ ├── enableAutoDestroy.md │ │ ├── mount.md │ │ ├── options.md │ │ ├── render.md │ │ ├── renderToString.md │ │ ├── selectors.md │ │ ├── shallowMount.md │ │ ├── wrapper-array │ │ │ ├── README.md │ │ │ ├── at.md │ │ │ ├── contains.md │ │ │ ├── destroy.md │ │ │ ├── exists.md │ │ │ ├── filter.md │ │ │ ├── is.md │ │ │ ├── isEmpty.md │ │ │ ├── isVisible.md │ │ │ ├── isVueInstance.md │ │ │ ├── setChecked.md │ │ │ ├── setData.md │ │ │ ├── setMethods.md │ │ │ ├── setProps.md │ │ │ ├── setValue.md │ │ │ └── trigger.md │ │ └── wrapper │ │ │ ├── README.md │ │ │ ├── attributes.md │ │ │ ├── classes.md │ │ │ ├── contains.md │ │ │ ├── destroy.md │ │ │ ├── emitted.md │ │ │ ├── emittedByOrder.md │ │ │ ├── exists.md │ │ │ ├── find.md │ │ │ ├── findAll.md │ │ │ ├── findAllComponents.md │ │ │ ├── findComponent.md │ │ │ ├── get.md │ │ │ ├── getComponent.md │ │ │ ├── html.md │ │ │ ├── is.md │ │ │ ├── isEmpty.md │ │ │ ├── isVisible.md │ │ │ ├── isVueInstance.md │ │ │ ├── name.md │ │ │ ├── overview.md │ │ │ ├── props.md │ │ │ ├── setChecked.md │ │ │ ├── setData.md │ │ │ ├── setMethods.md │ │ │ ├── setProps.md │ │ │ ├── setSelected.md │ │ │ ├── setValue.md │ │ │ ├── text.md │ │ │ └── trigger.md │ ├── guides │ │ ├── README.md │ │ ├── common-tips.md │ │ ├── dom-events.md │ │ ├── getting-started.md │ │ ├── testing-async-components.md │ │ ├── useful-libraries-for-testing.md │ │ ├── using-with-typescript.md │ │ ├── using-with-vue-router.md │ │ └── using-with-vuex.md │ └── installation │ │ ├── README.md │ │ ├── semantic-versioning.md │ │ ├── using-other-test-runners.md │ │ └── using-with-jest.md ├── guides │ ├── README.md │ ├── common-tips.md │ ├── dom-events.md │ ├── getting-started.md │ ├── testing-async-components.md │ ├── useful-libraries-for-testing.md │ ├── using-with-typescript.md │ ├── using-with-vue-router.md │ └── using-with-vuex.md ├── installation │ ├── README.md │ ├── semantic-versioning.md │ ├── using-other-test-runners.md │ └── using-with-jest.md ├── ja │ ├── README.md │ ├── api │ │ ├── README.md │ │ ├── components │ │ │ ├── README.md │ │ │ └── RouterLinkStub.md │ │ ├── config.md │ │ ├── createLocalVue.md │ │ ├── createWrapper.md │ │ ├── mount.md │ │ ├── options.md │ │ ├── render.md │ │ ├── renderToString.md │ │ ├── selectors.md │ │ ├── shallowMount.md │ │ ├── wrapper-array │ │ │ ├── README.md │ │ │ ├── at.md │ │ │ ├── contains.md │ │ │ ├── destroy.md │ │ │ ├── filter.md │ │ │ ├── is.md │ │ │ ├── isEmpty.md │ │ │ ├── isVisible.md │ │ │ ├── isVueInstance.md │ │ │ ├── setChecked.md │ │ │ ├── setData.md │ │ │ ├── setMethods.md │ │ │ ├── setProps.md │ │ │ ├── setValue.md │ │ │ └── trigger.md │ │ └── wrapper │ │ │ ├── README.md │ │ │ ├── attributes.md │ │ │ ├── classes.md │ │ │ ├── contains.md │ │ │ ├── destroy.md │ │ │ ├── emitted.md │ │ │ ├── emittedByOrder.md │ │ │ ├── exists.md │ │ │ ├── find.md │ │ │ ├── findAll.md │ │ │ ├── findAllComponents.md │ │ │ ├── findComponent.md │ │ │ ├── html.md │ │ │ ├── is.md │ │ │ ├── isEmpty.md │ │ │ ├── isVisible.md │ │ │ ├── isVueInstance.md │ │ │ ├── name.md │ │ │ ├── props.md │ │ │ ├── setChecked.md │ │ │ ├── setData.md │ │ │ ├── setMethods.md │ │ │ ├── setProps.md │ │ │ ├── setSelected.md │ │ │ ├── setValue.md │ │ │ ├── text.md │ │ │ └── trigger.md │ ├── guides │ │ ├── README.md │ │ ├── common-tips.md │ │ ├── dom-events.md │ │ ├── getting-started.md │ │ ├── testing-async-components.md │ │ ├── using-with-typescript.md │ │ ├── using-with-vue-router.md │ │ └── using-with-vuex.md │ └── installation │ │ ├── README.md │ │ ├── choosing-a-test-runner.md │ │ ├── testing-single-file-components-with-jest.md │ │ ├── testing-single-file-components-with-karma.md │ │ └── testing-single-file-components-with-mocha-webpack.md ├── pt │ ├── README.md │ ├── api │ │ ├── README.md │ │ ├── components │ │ │ ├── README.md │ │ │ └── RouterLinkStub.md │ │ ├── config.md │ │ ├── createLocalVue.md │ │ ├── createWrapper.md │ │ ├── enableAutoDestroy.md │ │ ├── mount.md │ │ ├── options.md │ │ ├── render.md │ │ ├── renderToString.md │ │ ├── selectors.md │ │ ├── shallowMount.md │ │ ├── wrapper-array │ │ │ ├── README.md │ │ │ ├── at.md │ │ │ ├── contains.md │ │ │ ├── destroy.md │ │ │ ├── exists.md │ │ │ ├── filter.md │ │ │ ├── is.md │ │ │ ├── isEmpty.md │ │ │ ├── isVisible.md │ │ │ ├── isVueInstance.md │ │ │ ├── setChecked.md │ │ │ ├── setData.md │ │ │ ├── setMethods.md │ │ │ ├── setProps.md │ │ │ ├── setValue.md │ │ │ └── trigger.md │ │ └── wrapper │ │ │ ├── README.md │ │ │ ├── attributes.md │ │ │ ├── classes.md │ │ │ ├── contains.md │ │ │ ├── destroy.md │ │ │ ├── emitted.md │ │ │ ├── emittedByOrder.md │ │ │ ├── exists.md │ │ │ ├── find.md │ │ │ ├── findAll.md │ │ │ ├── findAllComponents.md │ │ │ ├── findComponent.md │ │ │ ├── get.md │ │ │ ├── getComponent.md │ │ │ ├── html.md │ │ │ ├── is.md │ │ │ ├── isEmpty.md │ │ │ ├── isVisible.md │ │ │ ├── isVueInstance.md │ │ │ ├── name.md │ │ │ ├── overview.md │ │ │ ├── props.md │ │ │ ├── setChecked.md │ │ │ ├── setData.md │ │ │ ├── setMethods.md │ │ │ ├── setProps.md │ │ │ ├── setSelected.md │ │ │ ├── setValue.md │ │ │ ├── text.md │ │ │ └── trigger.md │ ├── guides │ │ ├── README.md │ │ ├── common-tips.md │ │ ├── dom-events.md │ │ ├── getting-started.md │ │ ├── testing-async-components.md │ │ ├── useful-libraries-for-testing.md │ │ ├── using-with-typescript.md │ │ ├── using-with-vue-router.md │ │ └── using-with-vuex.md │ ├── installation │ │ ├── README.md │ │ ├── semantic-versioning.md │ │ ├── using-other-test-runners.md │ │ └── using-with-jest.md │ └── upgrading-to-v1 │ │ └── README.md ├── ru │ ├── README.md │ ├── api │ │ ├── README.md │ │ ├── components │ │ │ ├── README.md │ │ │ └── RouterLinkStub.md │ │ ├── config.md │ │ ├── createLocalVue.md │ │ ├── createWrapper.md │ │ ├── mount.md │ │ ├── options.md │ │ ├── render.md │ │ ├── renderToString.md │ │ ├── selectors.md │ │ ├── shallowMount.md │ │ ├── wrapper-array │ │ │ ├── README.md │ │ │ ├── at.md │ │ │ ├── contains.md │ │ │ ├── destroy.md │ │ │ ├── filter.md │ │ │ ├── is.md │ │ │ ├── isEmpty.md │ │ │ ├── isVisible.md │ │ │ ├── isVueInstance.md │ │ │ ├── setChecked.md │ │ │ ├── setData.md │ │ │ ├── setMethods.md │ │ │ ├── setProps.md │ │ │ ├── setValue.md │ │ │ └── trigger.md │ │ └── wrapper │ │ │ ├── README.md │ │ │ ├── attributes.md │ │ │ ├── classes.md │ │ │ ├── contains.md │ │ │ ├── destroy.md │ │ │ ├── emitted.md │ │ │ ├── emittedByOrder.md │ │ │ ├── exists.md │ │ │ ├── find.md │ │ │ ├── findAll.md │ │ │ ├── html.md │ │ │ ├── is.md │ │ │ ├── isEmpty.md │ │ │ ├── isVisible.md │ │ │ ├── isVueInstance.md │ │ │ ├── name.md │ │ │ ├── props.md │ │ │ ├── setChecked.md │ │ │ ├── setData.md │ │ │ ├── setMethods.md │ │ │ ├── setProps.md │ │ │ ├── setSelected.md │ │ │ ├── setValue.md │ │ │ ├── text.md │ │ │ └── trigger.md │ ├── guides │ │ ├── README.md │ │ ├── common-tips.md │ │ ├── dom-events.md │ │ ├── getting-started.md │ │ ├── testing-async-components.md │ │ ├── using-with-typescript.md │ │ ├── using-with-vue-router.md │ │ └── using-with-vuex.md │ └── installation │ │ ├── README.md │ │ ├── choosing-a-test-runner.md │ │ ├── testing-single-file-components-with-jest.md │ │ ├── testing-single-file-components-with-karma.md │ │ └── testing-single-file-components-with-mocha-webpack.md ├── upgrading-to-v1 │ └── README.md └── zh │ ├── README.md │ ├── api │ ├── README.md │ ├── components │ │ ├── README.md │ │ └── RouterLinkStub.md │ ├── config.md │ ├── createLocalVue.md │ ├── createWrapper.md │ ├── enableAutoDestroy.md │ ├── mount.md │ ├── options.md │ ├── render.md │ ├── renderToString.md │ ├── selectors.md │ ├── shallowMount.md │ ├── wrapper-array │ │ ├── README.md │ │ ├── at.md │ │ ├── contains.md │ │ ├── destroy.md │ │ ├── filter.md │ │ ├── is.md │ │ ├── isEmpty.md │ │ ├── isVisible.md │ │ ├── isVueInstance.md │ │ ├── setChecked.md │ │ ├── setData.md │ │ ├── setMethods.md │ │ ├── setProps.md │ │ ├── setValue.md │ │ └── trigger.md │ └── wrapper │ │ ├── README.md │ │ ├── attributes.md │ │ ├── classes.md │ │ ├── contains.md │ │ ├── destroy.md │ │ ├── emitted.md │ │ ├── emittedByOrder.md │ │ ├── exists.md │ │ ├── find.md │ │ ├── findAll.md │ │ ├── findAllComponents.md │ │ ├── findComponent.md │ │ ├── get.md │ │ ├── getComponent.md │ │ ├── html.md │ │ ├── is.md │ │ ├── isEmpty.md │ │ ├── isVisible.md │ │ ├── isVueInstance.md │ │ ├── name.md │ │ ├── overview.md │ │ ├── props.md │ │ ├── setChecked.md │ │ ├── setData.md │ │ ├── setMethods.md │ │ ├── setProps.md │ │ ├── setSelected.md │ │ ├── setValue.md │ │ ├── text.md │ │ └── trigger.md │ ├── guides │ ├── README.md │ ├── common-tips.md │ ├── dom-events.md │ ├── getting-started.md │ ├── testing-async-components.md │ ├── useful-libraries-for-testing.md │ ├── using-with-typescript.md │ ├── using-with-vue-router.md │ └── using-with-vuex.md │ └── installation │ ├── README.md │ ├── choosing-a-test-runner.md │ ├── testing-single-file-components-with-jest.md │ ├── testing-single-file-components-with-karma.md │ ├── testing-single-file-components-with-mocha-webpack.md │ └── usage-without-a-build-step-node.md ├── flow ├── config.flow.js ├── modules.flow.js ├── options.flow.js ├── vue.flow.js └── wrapper.flow.js ├── jest.config.js ├── lerna.json ├── netlify.toml ├── package.json ├── packages ├── create-instance │ ├── CHANGELOG.md │ ├── add-mocks.js │ ├── add-stubs.js │ ├── create-component-stubs.js │ ├── create-instance.js │ ├── create-scoped-slots.js │ ├── create-slot-vnodes.js │ ├── extract-instance-options.js │ ├── log-events.js │ ├── package.json │ └── patch-create-element.js ├── server-test-utils │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── vue-server-test-utils.js │ ├── package.json │ ├── scripts │ │ ├── build.js │ │ └── release.sh │ ├── src │ │ ├── config.js │ │ ├── index.js │ │ ├── render.js │ │ └── renderToString.js │ └── types │ │ ├── index.d.ts │ │ ├── test │ │ ├── renderToString.ts │ │ └── resources.ts │ │ └── tsconfig.json ├── shared │ ├── CHANGELOG.md │ ├── compile-template.js │ ├── consts.js │ ├── create-local-vue.js │ ├── index.js │ ├── is-visible.js │ ├── merge-options.js │ ├── normalize.js │ ├── package.json │ ├── util.js │ ├── validate-options.js │ ├── validate-slots.js │ └── validators.js ├── test-utils │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ ├── vue-test-utils.esm.js │ │ ├── vue-test-utils.iife.js │ │ ├── vue-test-utils.js │ │ └── vue-test-utils.umd.js │ ├── package.json │ ├── scripts │ │ ├── build.js │ │ └── release.sh │ ├── src │ │ ├── auto-destroy.js │ │ ├── components │ │ │ └── RouterLinkStub.js │ │ ├── config.js │ │ ├── create-dom-event.js │ │ ├── create-element.js │ │ ├── create-local-vue.js │ │ ├── create-wrapper.js │ │ ├── error-wrapper.js │ │ ├── error.js │ │ ├── find-dom-nodes.js │ │ ├── find.js │ │ ├── get-selector.js │ │ ├── index.js │ │ ├── matches.js │ │ ├── mount.js │ │ ├── polyfill.js │ │ ├── recursively-set-data.js │ │ ├── shallow-mount.js │ │ ├── vue-wrapper.js │ │ ├── warn-if-no-window.js │ │ ├── wrapper-array.js │ │ └── wrapper.js │ └── types │ │ ├── index.d.ts │ │ ├── test │ │ ├── mount.ts │ │ ├── resources.ts │ │ ├── shallow.ts │ │ └── wrapper.ts │ │ └── tsconfig.json └── vue2 - Raccourci.lnk ├── scripts ├── gen-release-note.js ├── release.sh └── test-compat.sh ├── test ├── resources │ ├── components │ │ ├── component-as-a-class-with-child.vue │ │ ├── component-as-a-class.vue │ │ ├── component-with-async-error.vue │ │ ├── component-with-child.vue │ │ ├── component-with-computed.vue │ │ ├── component-with-css-modules.vue │ │ ├── component-with-events.vue │ │ ├── component-with-functional-child.vue │ │ ├── component-with-inject-composition.vue │ │ ├── component-with-inject.vue │ │ ├── component-with-input.vue │ │ ├── component-with-lifecycle-hooks.vue │ │ ├── component-with-methods.vue │ │ ├── component-with-mixin.vue │ │ ├── component-with-multiple-inputs.vue │ │ ├── component-with-name-prop.vue │ │ ├── component-with-nested-childern-and-attributes.vue │ │ ├── component-with-nested-children.vue │ │ ├── component-with-parent-name.vue │ │ ├── component-with-props.vue │ │ ├── component-with-router.vue │ │ ├── component-with-scoped-slots.vue │ │ ├── component-with-slots.vue │ │ ├── component-with-style.vue │ │ ├── component-with-sync-error.vue │ │ ├── component-with-transitions.vue │ │ ├── component-with-v-for.vue │ │ ├── component-with-v-if.vue │ │ ├── component-with-v-show.vue │ │ ├── component-with-v-slot-syntax.vue │ │ ├── component-with-v-slot.vue │ │ ├── component-with-vuex.vue │ │ ├── component-with-watch-immediate.vue │ │ ├── component-with-watch.vue │ │ ├── component-without-name.vue │ │ ├── component.vue │ │ ├── functional-component.vue │ │ └── recursive-component.vue │ ├── test-mixin.js │ └── utils.js ├── setup │ ├── karma.config.js │ ├── karma.setup.js │ ├── load-tests.js │ └── webpack.test.config.js └── specs │ ├── .eslintrc │ ├── components │ └── RouterLink.spec.js │ ├── config.spec.js │ ├── create-dom-event.spec.js │ ├── create-local-vue.spec.js │ ├── create-wrapper.spec.js │ ├── error-wrapper.spec.js │ ├── external-libraries.spec.js │ ├── mount.spec.js │ ├── mounting-options │ ├── attachTo.spec.js │ ├── attachToDocument.spec.js │ ├── attrs.spec.js │ ├── context.spec.js │ ├── data.spec.js │ ├── listeners.spec.js │ ├── localVue.spec.js │ ├── methods.spec.js │ ├── mocks.spec.js │ ├── parentComponent.spec.js │ ├── propsData.spec.js │ ├── provide.spec.js │ ├── scopedSlots.spec.js │ ├── slots.spec.js │ ├── stubs.spec.js │ └── watch.spec.js │ ├── render.spec.js │ ├── renderToString.spec.js │ ├── shallow-mount.spec.js │ ├── vue-wrapper.spec.js │ ├── wrapper-array.spec.js │ ├── wrapper-array │ ├── at.spec.js │ ├── attributes.spec.js │ ├── classes.spec.js │ ├── contains.spec.js │ ├── find.spec.js │ ├── findAll.spec.js │ ├── html.spec.js │ ├── is.spec.js │ ├── isEmpty.spec.js │ ├── isVisible.spec.js │ ├── isVueInstance.spec.js │ ├── name.spec.js │ ├── overview.spec.js │ ├── props.spec.js │ ├── setChecked.spec.js │ ├── setData.spec.js │ ├── setProps.spec.js │ ├── setSelected.spec.js │ ├── setValue.spec.js │ ├── text.spec.js │ └── trigger.spec.js │ ├── wrapper.spec.js │ └── wrapper │ ├── at.spec.js │ ├── attributes.spec.js │ ├── classes.spec.js │ ├── contains.spec.js │ ├── destroy.spec.js │ ├── emitted.spec.js │ ├── emittedByOrder.spec.js │ ├── exists.spec.js │ ├── filter.spec.js │ ├── find.spec.js │ ├── findAll.spec.js │ ├── get.spec.js │ ├── html.spec.js │ ├── is.spec.js │ ├── isEmpty.spec.js │ ├── isVisible.spec.js │ ├── isVueInstance.spec.js │ ├── name.spec.js │ ├── overview.spec.js │ ├── props.spec.js │ ├── setChecked.spec.js │ ├── setData.spec.js │ ├── setMethods.spec.js │ ├── setProps.spec.js │ ├── setSelected.spec.js │ ├── setValue.spec.js │ ├── text.spec.js │ └── trigger.spec.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/dist/** 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "wrapper": true, 4 | "expect": true, 5 | "Element": true, 6 | "jest": true 7 | }, 8 | "root": true, 9 | "plugins": [ 10 | "flowtype" 11 | ], 12 | "extends": [ 13 | "plugin:flowtype/recommended", 14 | "plugin:vue-libs/recommended" 15 | ], 16 | "rules": { 17 | "template-curly-spacing" : "off", 18 | "for-direction": "off", 19 | "getter-return": "off", 20 | "no-debugger": 2, 21 | "no-proto": 0, 22 | "space-before-function-paren": 0, 23 | "object-curly-spacing": 0, 24 | "indent": 0 25 | }, 26 | "parserOptions": { 27 | "parser": "babel-eslint", 28 | "ecmaFeatures": { 29 | "legacyDecorators": true 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | .*/test/.* 4 | 5 | [libs] 6 | flow 7 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/1-bug.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🐛 Bug 3 | about: If something isn't working as expected 🤔 4 | labels: type/bug 5 | --- 6 | 7 | 12 | 13 | ### Subject of the issue 14 | 15 | Describe your issue here. 16 | 17 | ### Steps to reproduce 18 | 19 | Tell us how to reproduce this issue. Please provide a working and simplified example. 20 | 21 | ### Expected behaviour 22 | 23 | What should happen? 24 | 25 | ### Actual behaviour 26 | 27 | What happens instead? 28 | 29 | ### Possible Solution 30 | 31 | What are the alternative solutions? Please describe what else you have considered? 32 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/2-feature.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🚀 Feature 3 | about: A suggestion for a new feature ✨ 4 | labels: type/enhancement 5 | --- 6 | 7 | 12 | 13 | ### Feature Description 14 | 15 | Provide a brief summary of the feature you would like to see. 16 | 17 | ### Problem 18 | 19 | If the feature requests relates to a problem, please describe the problem you are trying to solve here. 20 | 21 | ### Expected behaviour 22 | 23 | What should happen? Please describe the desired behaviour. 24 | 25 | ### Alternatives 26 | 27 | What are the alternative solutions? Please describe what else you have considered? 28 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/3-cleanup.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🧹 Cleanup 3 | about: Pay down technical debt, reduce friction, etc. 4 | labels: type/cleanup 5 | --- 6 | 7 | 8 | 9 | ### Cleanup 10 | 11 | **What should be cleaned up or changed**: 12 | 13 | **Provide any links for context**: 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/4-docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 📄 Documentation 3 | about: Suggest an improvement to our documentation 4 | labels: type/docs 5 | --- 6 | 7 | ### Documentation Feedback 8 | 9 | Provide a brief summary of what you would like to see changed in our documentation. 10 | 11 | Feel free to provide any suggestions of content or examples you’d like us to include. 12 | 13 | **Affected documentation page:** Insert a link to the affected page 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | .eslintcache 4 | 5 | # Editor files 6 | /.idea 7 | *.suo 8 | *.ntvs* 9 | *.njsproj 10 | *.sln 11 | 12 | # Log files 13 | *.log 14 | reports 15 | coverage 16 | .nyc_output/ 17 | 18 | # Docs 19 | _book 20 | .tmp 21 | tmp* 22 | 23 | # Vim 24 | *.sw[po] 25 | 26 | package-lock.json 27 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v16 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | package-lock.json 3 | **/dist/** 4 | CHANGELOG.md 5 | lerna.json 6 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "arrowParens": "avoid" 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "javascript.validate.enable": false, 3 | "flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow" 4 | } 5 | -------------------------------------------------------------------------------- /docs/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.eslintrc", 3 | "plugins": [ 4 | "markdown" 5 | ], 6 | "env": { 7 | "mocha": true 8 | }, 9 | "globals": { 10 | "mount": true, 11 | "shallow": true, 12 | "Component": true, 13 | "MyPlugin": true 14 | }, 15 | "rules": { 16 | "no-unused-vars": 0, 17 | "no-undef": 0, 18 | "no-labels": 0 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs/vue-test-utils/9627a809a177ef9798ca66a669891c73fc740d8d/docs/.vuepress/public/favicon.png -------------------------------------------------------------------------------- /docs/.vuepress/public/vueschool.css: -------------------------------------------------------------------------------- 1 | .vueschool { 2 | background-color: #e7ecf3; 3 | padding: 1em 1.25em; 4 | border-radius: 2px; 5 | color: #486491; 6 | position: relative; 7 | display: flex; 8 | } 9 | 10 | .vueschool a { 11 | color: #486491 !important; 12 | position: relative; 13 | padding-left: 36px; 14 | } 15 | 16 | .vueschool a:before { 17 | content: ''; 18 | position: absolute; 19 | display: block; 20 | width: 30px; 21 | height: 30px; 22 | top: calc(50% - 15px); 23 | left: -4px; 24 | border-radius: 50%; 25 | background-color: #73abfe; 26 | } 27 | 28 | .vueschool a:after { 29 | content: ''; 30 | position: absolute; 31 | display: block; 32 | width: 0; 33 | height: 0; 34 | top: calc(50% - 5px); 35 | left: 8px; 36 | border-top: 5px solid transparent; 37 | border-bottom: 5px solid transparent; 38 | border-left: 8px solid #fff; 39 | } 40 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extend: '@vuepress/theme-default' 3 | } 4 | -------------------------------------------------------------------------------- /docs/api/README.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | !!!include(docs/api/mount.md)!!! 4 | !!!include(docs/api/shallowMount.md)!!! 5 | !!!include(docs/api/render.md)!!! 6 | !!!include(docs/api/renderToString.md)!!! 7 | !!!include(docs/api/selectors.md)!!! 8 | !!!include(docs/api/createLocalVue.md)!!! 9 | !!!include(docs/api/createWrapper.md)!!! 10 | !!!include(docs/api/config.md)!!! 11 | !!!include(docs/api/enableAutoDestroy.md)!!! 12 | -------------------------------------------------------------------------------- /docs/api/components/README.md: -------------------------------------------------------------------------------- 1 | # Components 2 | 3 | Vue Test Utils includes utility components you can use to stub components. 4 | 5 | !!!include(docs/api/components/RouterLinkStub.md)!!! 6 | -------------------------------------------------------------------------------- /docs/api/components/RouterLinkStub.md: -------------------------------------------------------------------------------- 1 | ## RouterLinkStub 2 | 3 | A component to stub the Vue Router `router-link` component. 4 | 5 | You can use this component to find a router-link component in the render tree. 6 | 7 | - **Usage:** 8 | 9 | To set it as a stub in mounting options: 10 | 11 | ```js 12 | import { mount, RouterLinkStub } from '@vue/test-utils' 13 | 14 | const wrapper = mount(Component, { 15 | stubs: { 16 | RouterLink: RouterLinkStub 17 | } 18 | }) 19 | expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path') 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/api/createWrapper.md: -------------------------------------------------------------------------------- 1 | ## createWrapper(node [, options]) 2 | 3 | - **Arguments:** 4 | 5 | - `{vm|HTMLElement} node` 6 | - `{Object} options` 7 | - `{Boolean} attachedToDocument` 8 | 9 | - **Returns:** 10 | 11 | - `{Wrapper}` 12 | 13 | - **Usage:** 14 | 15 | `createWrapper` creates a `Wrapper` for a mounted Vue instance, or an HTML element. 16 | 17 | ```js 18 | import { createWrapper } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const Constructor = Vue.extend(Foo) 22 | const vm = new Constructor().$mount() 23 | const wrapper = createWrapper(vm) 24 | expect(wrapper.vm.foo).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/at.md: -------------------------------------------------------------------------------- 1 | ## at 2 | 3 | Returns `Wrapper` at `index` passed. Uses zero based numbering (i.e. first item is at index 0). 4 | If `index` is negative, indexing starts from the last element (i.e. last item is at index -1). 5 | 6 | - **Arguments:** 7 | 8 | - `{number} index` 9 | 10 | - **Returns:** `{Wrapper}` 11 | 12 | - **Example:** 13 | 14 | ```js 15 | import { shallowMount } from '@vue/test-utils' 16 | import Foo from './Foo.vue' 17 | 18 | const wrapper = shallowMount(Foo) 19 | const divArray = wrapper.findAll('div') 20 | 21 | const secondDiv = divArray.at(1) 22 | expect(secondDiv.is('div')).toBe(true) 23 | 24 | const lastDiv = divArray.at(-1) 25 | expect(lastDiv.is('div')).toBe(true) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/contains.md: -------------------------------------------------------------------------------- 1 | ## contains 2 | 3 | Assert every wrapper in `WrapperArray` contains selector. 4 | 5 | Use any valid [selector](../selectors.md). 6 | 7 | - **Arguments:** 8 | 9 | - `{string|Component} selector` 10 | 11 | - **Returns:** `{boolean}` 12 | 13 | - **Example:** 14 | 15 | ```js 16 | import { shallowMount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | import Bar from './Bar.vue' 19 | 20 | const wrapper = shallowMount(Foo) 21 | const divArray = wrapper.findAll('div') 22 | expect(divArray.contains('p')).toBe(true) 23 | expect(divArray.contains(Bar)).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/destroy.md: -------------------------------------------------------------------------------- 1 | ## destroy 2 | 3 | Destroys each Vue `Wrapper` in `WrapperArray`. 4 | 5 | - **Example:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import Foo from './Foo.vue' 10 | 11 | const wrapper = mount(Foo) 12 | const divArray = wrapper.findAll('div') 13 | expect(divArray.contains('p')).toBe(true) 14 | divArray.destroy() 15 | expect(divArray.contains('p')).toBe(false) 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/exists.md: -------------------------------------------------------------------------------- 1 | ## exists 2 | 3 | Assert `WrapperArray` exists. 4 | 5 | Returns false if called on a `WrapperArray` with no `Wrapper` objects, or if 6 | any of them do not exist. 7 | 8 | - **Returns:** `{boolean}` 9 | 10 | - **Example:** 11 | 12 | ```js 13 | import { mount } from '@vue/test-utils' 14 | import Foo from './Foo.vue' 15 | 16 | const wrapper = mount(Foo) 17 | expect(wrapper.findAll('div').exists()).toBe(true) 18 | expect(wrapper.findAll('does-not-exist').exists()).toBe(false) 19 | ``` 20 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/filter.md: -------------------------------------------------------------------------------- 1 | ## filter 2 | 3 | Filter `WrapperArray` with a predicate function on `Wrapper` objects. 4 | 5 | Behavior of this method is similar to [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). 6 | 7 | - **Arguments:** 8 | 9 | - `{function} predicate` 10 | 11 | - **Returns:** `{WrapperArray}` 12 | 13 | A new `WrapperArray` instance containing `Wrapper` instances that returns true for the predicate function. 14 | 15 | - **Example:** 16 | 17 | ```js 18 | import { shallowMount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = shallowMount(Foo) 22 | const filteredDivArray = wrapper 23 | .findAll('div') 24 | .filter(w => !w.classes('filtered')) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/is.md: -------------------------------------------------------------------------------- 1 | ## is 2 | 3 | Assert every `Wrapper` in `WrapperArray` DOM node or `vm` matches [selector](../selectors.md). 4 | 5 | - **Arguments:** 6 | 7 | - `{string|Component} selector` 8 | 9 | - **Returns:** `{boolean}` 10 | 11 | - **Example:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | const divArray = wrapper.findAll('div') 19 | expect(divArray.is('div')).toBe(true) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## isEmpty 2 | 3 | ::: warning Deprecation warning 4 | `isEmpty` is deprecated and will be removed in future releases. 5 | 6 | Consider a custom matcher such as those provided in [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). 7 | 8 | When using with findComponent, access the DOM element with findComponent(Comp).element 9 | ::: 10 | 11 | Assert every `Wrapper` in `WrapperArray` does not contain child node. 12 | 13 | - **Returns:** `{boolean}` 14 | 15 | - **Example:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | const divArray = wrapper.findAll('div') 23 | expect(divArray.isEmpty()).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/isVisible.md: -------------------------------------------------------------------------------- 1 | ## isVisible 2 | 3 | Assert every `Wrapper` in `WrapperArray` is visible. 4 | 5 | Returns `false` if at least one ancestor element has `display: none`, `visibility: hidden`, `opacity :0` style, is located inside collapsed `
` tag or has `hidden` attribute. 6 | 7 | This can be used to assert that a component is hidden by `v-show`. 8 | 9 | - **Returns:** `{boolean}` 10 | 11 | - **Example:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false) 20 | expect(wrapper.findAll('.is-visible').isVisible()).toBe(true) 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## isVueInstance 2 | 3 | ::: warning Deprecation warning 4 | `isVueInstance` is deprecated and will be removed in future releases. 5 | 6 | Tests relying on the `isVueInstance` assertion provide little to no value. We suggest replacing them with purposeful assertions. 7 | 8 | To keep these tests, a valid replacement for `isVueInstance()` is a truthy assertion of `wrapper.find(...).vm`. 9 | ::: 10 | 11 | Assert every `Wrapper` in `WrapperArray` is Vue instance. 12 | 13 | - **Returns:** `{boolean}` 14 | 15 | - **Example:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | import Bar from './Bar.vue' 21 | 22 | const wrapper = mount(Foo) 23 | const barArray = wrapper.findAll(Bar) 24 | expect(barArray.isVueInstance()).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/setData.md: -------------------------------------------------------------------------------- 1 | ## setData 2 | 3 | Sets `Wrapper` `vm` data on each `Wrapper` in `WrapperArray`. 4 | 5 | **Note every `Wrapper` must contain a Vue instance.** 6 | 7 | - **Arguments:** 8 | 9 | - `{Object} data` 10 | 11 | - **Example:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | test('setData demo', async () => { 19 | const wrapper = mount(Foo) 20 | const barArray = wrapper.findAll(Bar) 21 | await barArray.setData({ foo: 'bar' }) 22 | expect(barArray.at(0).vm.foo).toBe('bar') 23 | }) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/setProps.md: -------------------------------------------------------------------------------- 1 | ## setProps 2 | 3 | Sets `Wrapper` `vm` props and forces update on each `Wrapper` in `WrapperArray`. 4 | 5 | **Note every `Wrapper` must contain a Vue instance.** 6 | 7 | - **Arguments:** 8 | 9 | - `{Object} props` 10 | 11 | - **Example:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | test('setProps demo', async () => { 19 | const wrapper = mount(Foo) 20 | const barArray = wrapper.findAll(Bar) 21 | await barArray.setProps({ foo: 'bar' }) 22 | expect(barArray.at(0).vm.foo).toBe('bar') 23 | }) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/api/wrapper-array/trigger.md: -------------------------------------------------------------------------------- 1 | ## trigger 2 | 3 | Triggers an [event](../../guides/dom-events.md#trigger-events) on every `Wrapper` in the `WrapperArray` DOM node. 4 | 5 | **Note every `Wrapper` must contain a Vue instance.** 6 | 7 | - **Arguments:** 8 | 9 | - `{string} eventType` **required** 10 | - `{Object} options` **optional** 11 | 12 | - **Example:** 13 | 14 | ```js 15 | import { mount } from '@vue/test-utils' 16 | import sinon from 'sinon' 17 | import Foo from './Foo.vue' 18 | 19 | test('trigger demo', async () => { 20 | const clickHandler = sinon.stub() 21 | const wrapper = mount(Foo, { 22 | propsData: { clickHandler } 23 | }) 24 | 25 | const divArray = wrapper.findAll('div') 26 | await divArray.trigger('click') 27 | expect(clickHandler.called).toBe(true) 28 | }) 29 | ``` 30 | -------------------------------------------------------------------------------- /docs/api/wrapper/attributes.md: -------------------------------------------------------------------------------- 1 | ## attributes 2 | 3 | Returns `Wrapper` DOM node attribute object. If `key` is provided, the value for the `key` will be returned. 4 | 5 | - **Arguments:** 6 | 7 | - `{string} key` **optional** 8 | 9 | - **Returns:** `{[attribute: string]: any} | string` 10 | 11 | - **Example:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.attributes().id).toBe('foo') 19 | expect(wrapper.attributes('id')).toBe('foo') 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/api/wrapper/classes.md: -------------------------------------------------------------------------------- 1 | ## classes 2 | 3 | Return `Wrapper` DOM node classes. 4 | 5 | Returns an Array of class names or a boolean if a class name is provided. 6 | 7 | - **Arguments:** 8 | 9 | - `{string} className` **optional** 10 | 11 | - **Returns:** `Array<{string}> | boolean` 12 | 13 | - **Example:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | const wrapper = mount(Foo) 20 | expect(wrapper.classes()).toContain('bar') 21 | expect(wrapper.classes('bar')).toBe(true) 22 | ``` 23 | -------------------------------------------------------------------------------- /docs/api/wrapper/contains.md: -------------------------------------------------------------------------------- 1 | ## contains 2 | 3 | ::: warning Deprecation warning 4 | Using `contains` is deprecated and will be removed in future releases. Use [`find`](./find.md) for DOM nodes (using `querySelector` syntax), [`findComponent`](./findComponent.md) for components, or [`wrapper.get`](./get.md) instead. 5 | ::: 6 | 7 | Assert `Wrapper` contains an element or component matching [selector](../selectors.md). 8 | 9 | - **Arguments:** 10 | 11 | - `{string|Component} selector` 12 | 13 | - **Returns:** `{boolean}` 14 | 15 | - **Example:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | import Bar from './Bar.vue' 21 | 22 | const wrapper = mount(Foo) 23 | expect(wrapper.contains('p')).toBe(true) 24 | expect(wrapper.contains(Bar)).toBe(true) 25 | ``` 26 | 27 | - **See also:** [selectors](../selectors.md) 28 | -------------------------------------------------------------------------------- /docs/api/wrapper/destroy.md: -------------------------------------------------------------------------------- 1 | ## destroy 2 | 3 | Destroys a Vue component instance. 4 | 5 | - **Example:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import sinon from 'sinon' 10 | 11 | const spy = sinon.stub() 12 | mount({ 13 | render: null, 14 | destroyed() { 15 | spy() 16 | } 17 | }).destroy() 18 | expect(spy.calledOnce).toBe(true) 19 | ``` 20 | 21 | if either the `attachTo` or `attachToDocument` option caused the component to mount to the document, the component DOM elements will 22 | also be removed from the document. 23 | 24 | For functional components, `destroy` only removes the rendered DOM elements from the document. 25 | -------------------------------------------------------------------------------- /docs/api/wrapper/emittedByOrder.md: -------------------------------------------------------------------------------- 1 | ## emittedByOrder 2 | 3 | ::: warning Deprecation warning 4 | `emittedByOrder` is deprecated and will be removed in future releases. 5 | 6 | Use `wrapper.emitted` instead. 7 | ::: 8 | 9 | Return an Array containing custom events emitted by the `Wrapper` `vm`. 10 | 11 | - **Returns:** `Array<{ name: string, args: Array }>` 12 | 13 | - **Example:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | 18 | const wrapper = mount(Component) 19 | 20 | wrapper.vm.$emit('foo') 21 | wrapper.vm.$emit('bar', 123) 22 | 23 | /* 24 | wrapper.emittedByOrder() returns the following Array: 25 | [ 26 | { name: 'foo', args: [] }, 27 | { name: 'bar', args: [123] } 28 | ] 29 | */ 30 | 31 | // assert event emit order 32 | expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar']) 33 | ``` 34 | -------------------------------------------------------------------------------- /docs/api/wrapper/exists.md: -------------------------------------------------------------------------------- 1 | ## exists 2 | 3 | Assert `Wrapper` exists. 4 | 5 | Returns false if called on a `Wrapper` which does not exist. 6 | 7 | - **Returns:** `{boolean}` 8 | 9 | - **Example:** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Foo from './Foo.vue' 14 | 15 | const wrapper = mount(Foo) 16 | expect(wrapper.exists()).toBe(true) 17 | expect(wrapper.find('does-not-exist').exists()).toBe(false) 18 | ``` 19 | -------------------------------------------------------------------------------- /docs/api/wrapper/findAll.md: -------------------------------------------------------------------------------- 1 | ## findAll 2 | 3 | ::: warning Deprecation warning 4 | Using `findAll` to search for Components is deprecated and will be removed. Use `findAllComponents` instead. 5 | The `findAll` method will continue to work for finding elements using any valid [selector](../selectors.md). 6 | ::: 7 | 8 | Returns a [`WrapperArray`](../wrapper-array/). 9 | 10 | Use any valid [selector](../selectors.md). 11 | 12 | - **Arguments:** 13 | 14 | - `{string|Component} selector` 15 | 16 | - **Returns:** `{WrapperArray}` 17 | 18 | - **Example:** 19 | 20 | ```js 21 | import { mount } from '@vue/test-utils' 22 | import Foo from './Foo.vue' 23 | import Bar from './Bar.vue' 24 | 25 | const wrapper = mount(Foo) 26 | 27 | const div = wrapper.findAll('div').at(0) 28 | expect(div.is('div')).toBe(true) 29 | 30 | const bar = wrapper.findAll(Bar).at(0) // Deprecated usage 31 | expect(bar.is(Bar)).toBe(true) 32 | ``` 33 | -------------------------------------------------------------------------------- /docs/api/wrapper/findAllComponents.md: -------------------------------------------------------------------------------- 1 | ## findAllComponents 2 | 3 | Returns a [`WrapperArray`](../wrapper-array/) of all matching Vue components. 4 | 5 | - **Arguments:** 6 | 7 | - `selector` Use any valid [selector](../selectors.md) 8 | 9 | - **Returns:** `{WrapperArray}` 10 | 11 | - **Example:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | const bar = wrapper.findAllComponents(Bar).at(0) 20 | expect(bar.exists()).toBeTruthy() 21 | const bars = wrapper.findAllComponents(Bar) 22 | expect(bars).toHaveLength(1) 23 | ``` 24 | 25 | ::: warning Usage with CSS selectors 26 | Using `findAllComponents` with CSS selector is subject to same limitations as [findComponent](./findComponent.md) 27 | ::: 28 | -------------------------------------------------------------------------------- /docs/api/wrapper/html.md: -------------------------------------------------------------------------------- 1 | ## html 2 | 3 | Returns HTML of `Wrapper` DOM node as a string. 4 | 5 | - **Returns:** `{string}` 6 | 7 | - **Example:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.html()).toBe('

Foo

') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/api/wrapper/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## isEmpty 2 | 3 | ::: warning Deprecation warning 4 | `isEmpty` is deprecated and will be removed in future releases. 5 | 6 | Consider a custom matcher such as those provided in [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). 7 | 8 | When using with findComponent, access the DOM element with `findComponent(Comp).element` 9 | ::: 10 | 11 | Assert `Wrapper` does not contain child node. 12 | 13 | - **Returns:** `{boolean}` 14 | 15 | - **Example:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | expect(wrapper.isEmpty()).toBe(true) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/api/wrapper/isVisible.md: -------------------------------------------------------------------------------- 1 | ## isVisible 2 | 3 | Assert `Wrapper` is visible. 4 | 5 | Returns `false` if an ancestor element has `display: none`, `visibility: hidden`, `opacity :0` style, is located inside collapsed `
` tag or has `hidden` attribute. 6 | 7 | This can be used to assert that a component is hidden by `v-show`. 8 | 9 | - **Returns:** `{boolean}` 10 | 11 | - **Example:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.find('.is-not-visible').isVisible()).toBe(false) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/api/wrapper/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## isVueInstance 2 | 3 | ::: warning Deprecation warning 4 | `isVueInstance` is deprecated and will be removed in future releases. 5 | 6 | Tests relying on the `isVueInstance` assertion provide little to no value. We suggest replacing them with purposeful assertions. 7 | 8 | To keep these tests, a valid replacement for `isVueInstance()` is a truthy assertion of `wrapper.find(...).vm`. 9 | ::: 10 | 11 | Assert `Wrapper` is Vue instance. 12 | 13 | - **Returns:** `{boolean}` 14 | 15 | - **Example:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | expect(wrapper.isVueInstance()).toBe(true) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/api/wrapper/name.md: -------------------------------------------------------------------------------- 1 | ## name 2 | 3 | ::: warning Deprecation warning 4 | `name` is deprecated and will be removed in future releases. See [vue-test-utils.vuejs.org/upgrading-to-v1/#name](https://vue-test-utils.vuejs.org/upgrading-to-v1/#name) 5 | ::: 6 | 7 | Returns component name if `Wrapper` contains a Vue instance, or the tag name of `Wrapper` DOM node if `Wrapper` does not contain a Vue instance. 8 | 9 | - **Returns:** `{string}` 10 | 11 | - **Example:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.name()).toBe('Foo') 19 | const p = wrapper.find('p') 20 | expect(p.name()).toBe('p') 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/api/wrapper/overview.md: -------------------------------------------------------------------------------- 1 | ## overview 2 | 3 | ::: warning Deprecation warning 4 | `overview` is deprecated and will be removed in future releases. 5 | ::: 6 | 7 | Prints a simple overview of the `Wrapper`. 8 | 9 | - **Example:** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Component from './Component.vue' 14 | 15 | const wrapper = mount(Component) 16 | wrapper.overview() 17 | 18 | // Console output 19 | /* 20 | Wrapper (Visible): 21 | 22 | Html: 23 |
24 |

My name is Tess Ting

25 |
26 | 27 | Data: { 28 | firstName: Tess, 29 | lastName: Ting 30 | } 31 | 32 | Computed: { 33 | fullName: Tess Ting' 34 | } 35 | 36 | Emitted: {', 37 | foo: [', 38 | 0: [ hello, world ], 39 | 1: [ bye, world ]' 40 | ], 41 | bar: [ 42 | 0: [ hey ]' 43 | ] 44 | } 45 | 46 | */ 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/api/wrapper/props.md: -------------------------------------------------------------------------------- 1 | ## props 2 | 3 | Return `Wrapper` `vm` props object. If `key` is provided, the value for the `key` will be returned. 4 | 5 | **Note the Wrapper must contain a Vue instance.** 6 | 7 | - **Arguments:** 8 | 9 | - `{string} key` **optional** 10 | 11 | - **Returns:** `{[prop: string]: any} | any` 12 | 13 | - **Example:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | const wrapper = mount(Foo, { 20 | propsData: { 21 | bar: 'baz' 22 | } 23 | }) 24 | expect(wrapper.props().bar).toBe('baz') 25 | expect(wrapper.props('bar')).toBe('baz') 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/api/wrapper/setData.md: -------------------------------------------------------------------------------- 1 | ## setData 2 | 3 | Sets `Wrapper` `vm` data. 4 | 5 | setData works by recursively calling Vue.set. 6 | 7 | **Note the Wrapper must contain a Vue instance.** 8 | 9 | - **Arguments:** 10 | 11 | - `{Object} data` 12 | 13 | - **Example:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | test('setData demo', async () => { 20 | const wrapper = mount(Foo) 21 | 22 | await wrapper.setData({ foo: 'bar' }) 23 | 24 | expect(wrapper.vm.foo).toBe('bar') 25 | }) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/api/wrapper/setSelected.md: -------------------------------------------------------------------------------- 1 | ## setSelected 2 | 3 | Selects an option element and updates `v-model` bound data. 4 | 5 | - **Example:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import Foo from './Foo.vue' 10 | 11 | test('setSelected demo', async () => { 12 | const wrapper = mount(Foo) 13 | const options = wrapper.find('select').findAll('option') 14 | 15 | await options.at(1).setSelected() 16 | 17 | expect(wrapper.find('option:checked').element.value).toBe('bar') 18 | }) 19 | ``` 20 | 21 | - **Note:** 22 | 23 | When you try to set the value to state via `v-model` by `option.element.selected = true; parentSelect.trigger('input')`, `v-model` is not triggered. `v-model` is triggered by `change` event. 24 | 25 | `option.setSelected()` is an alias of the following code. 26 | 27 | ```js 28 | option.element.selected = true 29 | parentSelect.trigger('change') 30 | ``` 31 | -------------------------------------------------------------------------------- /docs/api/wrapper/text.md: -------------------------------------------------------------------------------- 1 | ## text 2 | 3 | Returns text content of `Wrapper`. 4 | 5 | - **Returns:** `{string}` 6 | 7 | - **Example:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.text()).toBe('bar') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/fr/api/README.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | !!!include(docs/fr/api/mount.md)!!! 4 | !!!include(docs/fr/api/shallowMount.md)!!! 5 | !!!include(docs/fr/api/render.md)!!! 6 | !!!include(docs/fr/api/renderToString.md)!!! 7 | !!!include(docs/fr/api/selectors.md)!!! 8 | !!!include(docs/fr/api/createLocalVue.md)!!! 9 | !!!include(docs/fr/api/createWrapper.md)!!! 10 | !!!include(docs/fr/api/config.md)!!! 11 | !!!include(docs/fr/api/enableAutoDestroy.md)!!! 12 | -------------------------------------------------------------------------------- /docs/fr/api/components/README.md: -------------------------------------------------------------------------------- 1 | # Components 2 | 3 | Vue Test Utils comprend des composants utilitaires que vous pouvez utiliser pour avoir des composants de remplacement (stubs). 4 | !!!include(docs/fr/api/components/RouterLinkStub.md)!!! 5 | -------------------------------------------------------------------------------- /docs/fr/api/components/RouterLinkStub.md: -------------------------------------------------------------------------------- 1 | ## RouterLinkStub 2 | 3 | Un composant pour mettre en place le composant Vue Router `router-link`. 4 | 5 | Vous pouvez utiliser ce composant pour trouver un composant router-link dans l'arbre de rendu. 6 | 7 | - **Usage:** 8 | 9 | Pour le définir comme un stub dans les options de montage : 10 | 11 | ```js 12 | import { mount, RouterLinkStub } from '@vue/test-utils' 13 | 14 | const wrapper = mount(Component, { 15 | stubs: { 16 | RouterLink: RouterLinkStub 17 | } 18 | }) 19 | expect(wrapper.find(RouterLinkStub).props().to).toBe('/some/path') 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/fr/api/createWrapper.md: -------------------------------------------------------------------------------- 1 | ## createWrapper(node [, options]) 2 | 3 | - **Arguments:** 4 | 5 | - `{vm|HTMLElement} node` 6 | - `{Object} options` 7 | - `{Boolean} attachedToDocument` 8 | 9 | - **Retours:** 10 | 11 | - `{Wrapper}` 12 | 13 | - **Usage:** 14 | 15 | `createWrapper` crée un `Wrapper` pour une instance Vue montée, ou un élément HTML. 16 | 17 | ```js 18 | import { createWrapper } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const Constructor = Vue.extend(Foo) 22 | const vm = new Constructor().$mount() 23 | const wrapper = createWrapper(vm) 24 | expect(wrapper.vm.foo).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/fr/api/enableAutoDestroy.md: -------------------------------------------------------------------------------- 1 | ## enableAutoDestroy(hook) 2 | 3 | - **Arguments:** 4 | 5 | - `{Function} hook` 6 | 7 | - **Usage:** 8 | 9 | `enableAutoDestroy` détruira toutes les instances de `Wrapper` en utilisant la fonction de hook passée (par exemple [`afterEach`](https://jestjs.io/docs/en/api#aftereachfn-timeout)). Après avoir appelé la méthode, vous pouvez revenir au comportement par défaut en appelant la méthode `resetAutoDestroyState`. 10 | 11 | ```js 12 | import { enableAutoDestroy, mount } from '@vue/test-utils' 13 | import Foo from './Foo.vue' 14 | 15 | // appelle wrapper.destroy() après chaque test 16 | enableAutoDestroy(afterEach) 17 | 18 | describe('Foo', () => { 19 | it('renders a div', () => { 20 | const wrapper = mount(Foo) 21 | expect(wrapper.contains('div')).toBe(true) 22 | // pas besoin d'appeler wrapper.destroy() ici 23 | }) 24 | }) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/at.md: -------------------------------------------------------------------------------- 1 | ## at 2 | 3 | Retourne le `Wrapper` à `index` passé. Utilise une numérotation basée sur les zéros (c'est-à-dire que le premier élément est à l'index 0). 4 | Si `index` est négatif, l'indexation commence à partir du dernier élément (c'est-à-dire que le premier élément est à l'index -1). 5 | 6 | - **Arguments:** 7 | 8 | - `{number} index` 9 | 10 | - **Retours:** `{Wrapper}` 11 | 12 | - **Exemple:** 13 | 14 | ```js 15 | import { shallowMount } from '@vue/test-utils' 16 | import Foo from './Foo.vue' 17 | 18 | const wrapper = shallowMount(Foo) 19 | const divArray = wrapper.findAll('div') 20 | 21 | const secondDiv = divArray.at(1) 22 | expect(secondDiv.is('div')).toBe(true) 23 | 24 | const lastDiv = divArray.at(-1) 25 | expect(lastDiv.is('div')).toBe(true) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/contains.md: -------------------------------------------------------------------------------- 1 | ### contains 2 | 3 | Affirmer que chaque emballage dans `WrapperArray` contient un sélecteur. 4 | 5 | Utilisez tout [selector](../selectors.md) valide. 6 | 7 | - **Arguments:** 8 | 9 | - `{string|Component} selector` 10 | 11 | - **Retours:** `{boolean}` 12 | 13 | - **Exemple:** 14 | 15 | ```js 16 | import { shallowMount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | import Bar from './Bar.vue' 19 | 20 | const wrapper = shallowMount(Foo) 21 | const divArray = wrapper.findAll('div') 22 | expect(divArray.contains('p')).toBe(true) 23 | expect(divArray.contains(Bar)).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/destroy.md: -------------------------------------------------------------------------------- 1 | ## destroy 2 | 3 | Détruit chaque Vue `Wrapper` dans `WrapperArray`. 4 | 5 | - **Exemple:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import Foo from './Foo.vue' 10 | 11 | const wrapper = mount(Foo) 12 | const divArray = wrapper.findAll('div') 13 | expect(divArray.contains('p')).toBe(true) 14 | divArray.destroy() 15 | expect(divArray.contains('p')).toBe(false) 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/exists.md: -------------------------------------------------------------------------------- 1 | ## exists 2 | 3 | Vérifie que `WrapperArray` existe. 4 | 5 | Renvoie false si elle est appelée sur un `WrapperArray` sans objets `Wrapper`, ou si l'un d'entre eux n'existe pas. 6 | 7 | - **Returns:** `{boolean}` 8 | 9 | - **Example:** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Foo from './Foo.vue' 14 | 15 | const wrapper = mount(Foo) 16 | expect(wrapper.findAll('div').exists()).toBe(true) 17 | expect(wrapper.findAll('does-not-exist').exists()).toBe(false) 18 | ``` 19 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/filter.md: -------------------------------------------------------------------------------- 1 | ## filter 2 | 3 | Filtrez `WrapperArray` avec une fonction de prédicat sur les objets `Wrapper`. 4 | 5 | Le comportement de cette méthode est similaire à celui de [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). 6 | 7 | - **Arguments:** 8 | 9 | - `{function} predicate` 10 | 11 | - **Retours:** `{WrapperArray}` 12 | 13 | Une nouvelle instance `WrapperArray` contenant des instances de `Wrapper` qui retourne vrai pour la fonction prédicat. 14 | 15 | - **Exemple:** 16 | 17 | ```js 18 | import { shallowMount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = shallowMount(Foo) 22 | const filteredDivArray = wrapper 23 | .findAll('div') 24 | .filter(w => !w.classes('filtered')) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## isEmpty 2 | 3 | ::: Avertissement de déprédation 4 | `isEmpty` est dépréciée et sera supprimée dans les prochaines versions. 5 | 6 | Pensez à un matcheur personnalisé comme ceux fournis dans [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). 7 | 8 | En cas d'utilisation avec findComponent, accédez à l'élément DOM avec findComponent(Comp).element 9 | ::: 10 | 11 | Affirmer que chaque `Wrapper` dans `WrapperArray` ne contient pas de nœud enfant. 12 | 13 | - **Retours:** `{boolean}` 14 | 15 | - **Exemple:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | const divArray = wrapper.findAll('div') 23 | expect(divArray.isEmpty()).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/isVisible.md: -------------------------------------------------------------------------------- 1 | ## isVisible 2 | 3 | Affirme que chaque `Wrapper` de `WrapperArray` est visible. 4 | 5 | Retourne `false` si au moins un élément parent a le style `display: none`, `visibility hidden`, `opacity :0`, est situé à l'intérieur de la balise `
` fermée ou possède l'attribut `hidden`. 6 | 7 | Ceci peut être utilisé pour affirmer qu'un élément est caché par `v-show`. 8 | 9 | - **Retours:** `{boolean}` 10 | 11 | - **Exemple:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false) 20 | expect(wrapper.findAll('.is-visible').isVisible()).toBe(true) 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## isVueInstance 2 | 3 | ::: warning Avertissement de déprédation 4 | `isVueInstance` est dépréciée et sera supprimée dans les prochaines versions. 5 | 6 | Les tests reposant sur l'affirmation "isVueInstance" n'ont que peu ou pas de valeur. Nous suggérons de les remplacer par des assertions intentionnelles. 7 | 8 | Pour conserver ces tests, un remplacement valable de `isVueInstance()` est une assertion véridique de `wrapper.find(...).vm`. 9 | ::: 10 | 11 | Affirmer que chaque `Wrapper` dans `WrapperArray` est une instance de Vue. 12 | 13 | - **Retours:** `{boolean}` 14 | 15 | - **Exemple:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | import Bar from './Bar.vue' 21 | 22 | const wrapper = mount(Foo) 23 | const barArray = wrapper.findAll(Bar) 24 | expect(barArray.isVueInstance()).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/setData.md: -------------------------------------------------------------------------------- 1 | ## setData 2 | 3 | Défini les données `Wrapper` `vm` sur chaque `Wrapper` dans `WrapperArray`. 4 | 5 | **Note chaque `Wrapper` doit contenir une instance de Vue.** 6 | 7 | - **Arguments:** 8 | 9 | - `{Object} data` 10 | 11 | - **Exemple:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | const barArray = wrapper.findAll(Bar) 20 | barArray.setData({ foo: 'bar' }) 21 | expect(barArray.at(0).vm.foo).toBe('bar') 22 | ``` 23 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/setProps.md: -------------------------------------------------------------------------------- 1 | ## setProps 2 | 3 | Défini les props de `Wrapper` `vm` et force la mise à jour de chaque `Wrapper` dans `WrapperArray`. 4 | 5 | **Note chaque `Wrapper` doit contenir une instance de Vue.** 6 | 7 | - **Arguments:** 8 | 9 | - `{Object} props` 10 | 11 | - **Exemple:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | const barArray = wrapper.findAll(Bar) 20 | barArray.setProps({ foo: 'bar' }) 21 | expect(barArray.at(0).vm.foo).toBe('bar') 22 | ``` 23 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/setValue.md: -------------------------------------------------------------------------------- 1 | ## setValue 2 | 3 | Cette méthode est un alias du code qui suivant. 4 | 5 | ```js 6 | wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value)) 7 | ``` 8 | 9 | - **Arguments:** 10 | 11 | - `{any} value` 12 | 13 | - **Exemple:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | 18 | const wrapper = mount({ 19 | data() { 20 | return { 21 | t1: '', 22 | t2: '' 23 | } 24 | }, 25 | template: ` 26 |
27 | 28 | 29 |
` 30 | }) 31 | 32 | const wrapperArray = wrapper.findAll('.foo') 33 | expect(wrapper.vm.t1).toEqual('') 34 | expect(wrapper.vm.t2).toEqual('') 35 | wrapperArray.setValue('foo') 36 | expect(wrapper.vm.t1).toEqual('foo') 37 | expect(wrapper.vm.t2).toEqual('foo') 38 | ``` 39 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper-array/trigger.md: -------------------------------------------------------------------------------- 1 | ## trigger 2 | 3 | Déclenche un [event](../../guides/dom-events.md#trigger-events) sur chaque `Wrapper` dans le nœud DOM `WrapperArray`. 4 | 5 | **Note chaque `Wrapper` doit contenir une instance de Vue.** 6 | 7 | - **Arguments:** 8 | 9 | - `{string} eventType` **required** 10 | - `{Object} options` **optional** 11 | 12 | - **Exemple:** 13 | 14 | ```js 15 | import { mount } from '@vue/test-utils' 16 | import sinon from 'sinon' 17 | import Foo from './Foo.vue' 18 | 19 | const clickHandler = sinon.stub() 20 | const wrapper = mount(Foo, { 21 | propsData: { clickHandler } 22 | }) 23 | 24 | const divArray = wrapper.findAll('div') 25 | divArray.trigger('click') 26 | expect(clickHandler.called).toBe(true) 27 | ``` 28 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/attributes.md: -------------------------------------------------------------------------------- 1 | ## attributes 2 | 3 | Renvoie l'objet attribut de nœud DOM `Wrapper`. Si la `key` est fournie, la valeur de la `key` sera renvoyée. 4 | 5 | - **Arguments:** 6 | 7 | - `{string} key` **facultatif** 8 | 9 | - **Retours:** `{[attribute: string]: any} | string` 10 | 11 | - **Example:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.attributes().id).toBe('foo') 19 | expect(wrapper.attributes('id')).toBe('foo') 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/classes.md: -------------------------------------------------------------------------------- 1 | ## classes 2 | 3 | Retourne les classes de nœuds DOM `Wrapper`. 4 | 5 | Retourne un tableau de noms de classes ou un booléen si un nom de classe est fourni. 6 | 7 | - **Arguments:** 8 | 9 | - `{string} className` **facultatif** 10 | 11 | - **Retours:** `Array<{string}> | boolean` 12 | 13 | - **Exemple:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | const wrapper = mount(Foo) 20 | expect(wrapper.classes()).toContain('bar') 21 | expect(wrapper.classes('bar')).toBe(true) 22 | ``` 23 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/contains.md: -------------------------------------------------------------------------------- 1 | ## contains 2 | 3 | ::: warning Avertissement de déprédation 4 | L'utilisation de `contains` est déconseillée et sera supprimée dans les prochaines versions. Utilisez [`find`](./find.md) pour les nœuds DOM (en utilisant la syntaxe `querySelector`), [`findComponent`](./findComponent.md) pour les composants, ou [`wrapper.get`](./get.md) à la place. 5 | ::: 6 | 7 | Affirmer que le `Wrapper` contient un élément ou un composant correspondant [selector](../selectors.md). 8 | 9 | - **Arguments:** 10 | 11 | - `{string|Component} selector` 12 | 13 | - **Retours:** `{boolean}` 14 | 15 | - **Exemple:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | import Bar from './Bar.vue' 21 | 22 | const wrapper = mount(Foo) 23 | expect(wrapper.contains('p')).toBe(true) 24 | expect(wrapper.contains(Bar)).toBe(true) 25 | ``` 26 | 27 | - **Voir aussi :** [selectors](../selectors.md) 28 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/destroy.md: -------------------------------------------------------------------------------- 1 | ## destroy 2 | 3 | Détruit une instance du composant Vue. 4 | 5 | - **Exemple:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import sinon from 'sinon' 10 | 11 | const spy = sinon.stub() 12 | mount({ 13 | render: null, 14 | destroyed() { 15 | spy() 16 | } 17 | }).destroy() 18 | expect(spy.calledOnce).toBe(true) 19 | ``` 20 | 21 | si l'option `attachTo` ou `attachToDocument` a provoqué le montage du composant sur le document, les éléments du DOM du composant seront également supprimés du document. 22 | 23 | Pour les composants fonctionnels, `destroy` ne supprime du document que les éléments DOM rendus. 24 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/emittedByOrder.md: -------------------------------------------------------------------------------- 1 | ## emittedByOrder 2 | 3 | ::: warning Avertissement de déprédation 4 | Le terme `emittedByOrder` est obsolète et sera supprimé dans les prochaines versions. 5 | 6 | Utilisez plutôt `wrapper.emitted`. 7 | ::: 8 | 9 | Retourne un tableau contenant des événements personnalisés émis par le `Wrapper` `vm` . 10 | 11 | - **Retours:** `Array<{ name: string, args: Array }>` 12 | 13 | - **Exemple:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | 18 | const wrapper = mount(Component) 19 | 20 | wrapper.vm.$emit('foo') 21 | wrapper.vm.$emit('bar', 123) 22 | 23 | /* 24 | wrapper.emittedByOrder() renvoie le tableau suivant : 25 | [ 26 | { name: 'foo', args: [] }, 27 | { name: 'bar', args: [123] } 28 | ] 29 | */ 30 | 31 | // Faire valoir l'ordre d'émission d'événement 32 | expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar']) 33 | ``` 34 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/exists.md: -------------------------------------------------------------------------------- 1 | ## exists 2 | 3 | Affirmation de l'existence de `wrapper`. 4 | 5 | Renvoie faux si on l'appelle sur un `Wrapper` vide. 6 | 7 | - **Retours:** `{boolean}` 8 | 9 | - **Exemple:** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Foo from './Foo.vue' 14 | 15 | const wrapper = mount(Foo) 16 | expect(wrapper.exists()).toBe(true) 17 | expect(wrapper.find('does-not-exist').exists()).toBe(false) 18 | expect(wrapper.findAll('div').exists()).toBe(true) 19 | expect(wrapper.findAll('does-not-exist').exists()).toBe(false) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/findAllComponents.md: -------------------------------------------------------------------------------- 1 | ## findAllComponents 2 | 3 | Retourne un [`WrapperArray`](../wrapper-array/) de tous les composants Vue correspondants. 4 | 5 | - **Arguments:** 6 | 7 | - `{Component|ref|name} selector` 8 | 9 | - **Retours:** `{WrapperArray}` 10 | 11 | - **Exemple:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | const bar = wrapper.findAllComponents(Bar).at(0) 20 | expect(bar.exists()).toBeTruthy() 21 | const bars = wrapper.findAllComponents(Bar) 22 | expect(bar).toHaveLength(1) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/findComponent.md: -------------------------------------------------------------------------------- 1 | ## findComponent 2 | 3 | Retourne le `wrapper` du premier composant Vue correspondant. 4 | 5 | - **Arguments:** 6 | 7 | - `{Component|ref|name} selector` 8 | 9 | - **Retours:** `{Wrapper}` 10 | 11 | - **Exemple:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | 20 | const bar = wrapper.findComponent(Bar) // => trouve Bar par instance de composant 21 | expect(bar.exists()).toBe(true) 22 | const barByName = wrapper.findComponent({ name: 'bar' }) // => trouve Bar par `name` 23 | expect(barByName.exists()).toBe(true) 24 | const barRef = wrapper.findComponent({ ref: 'bar' }) // => trouve Bar par `ref` 25 | expect(barRef.exists()).toBe(true) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/html.md: -------------------------------------------------------------------------------- 1 | ## html 2 | 3 | Renvoie le HTML du nœud DOM `Wrapper` sous forme de chaîne. 4 | 5 | - **Retours:** `{string}` 6 | 7 | - **Exemple:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.html()).toBe('

Foo

') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## isEmpty 2 | 3 | ::: warning Avertissement de déprédation 4 | `isEmpty` est déprécié et sera supprimé dans les prochaines versions. 5 | 6 | Considérez un appariement personnalisé tel que ceux fournis dans [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). 7 | 8 | En cas d'utilisation avec findComponent, accédez à l'élément DOM avec `findComponent(Comp).element` 9 | ::: 10 | 11 | Affirmer que `Wrapper` ne contient pas de nœud enfant. 12 | 13 | - **Retours:** `{boolean}` 14 | 15 | - **Exemple:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | expect(wrapper.isEmpty()).toBe(true) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/isVisible.md: -------------------------------------------------------------------------------- 1 | ## isVisible 2 | 3 | Affirmer que `Wrapper` est visible. 4 | 5 | Retourne `false` si un élément parent a le style `display: none` ou `visibility: hidden`, est situé à l'intérieur de la balise `
` fermée ou possède un attribut caché. 6 | 7 | Ceci peut être utilisé pour affirmer qu'un élément est caché par `v-show`. 8 | 9 | - **Retours:** `{boolean}` 10 | 11 | - **Exemple:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.find('.is-not-visible').isVisible()).toBe(false) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## isVueInstance 2 | 3 | ::: warning Avertissement de déprédation 4 | `isVueInstance` est dépréciée et sera supprimée dans les prochaines versions. 5 | 6 | Les tests reposant sur l'affirmation `isVueInstance` n'ont que peu ou pas de valeur. Nous suggérons de les remplacer par des assertions ciblées. 7 | 8 | Pour conserver ces tests, un remplacement valable de `isVueInstance()` est une assertion véridique de `wrapper.find(...).vm`. 9 | 10 | L'assertion Wrapper est l'instance de Vue. 11 | ::: 12 | 13 | - **Retours:** `{boolean}` 14 | 15 | - **Exemple:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | expect(wrapper.isVueInstance()).toBe(true) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/name.md: -------------------------------------------------------------------------------- 1 | ## name 2 | 3 | ::: warning Avertissement de déprédation 4 | `name` est dépréciée et sera supprimée dans les prochaines versions. 5 | ::: 6 | 7 | Retourne le nom du composant si `Wrapper` contient une instance de Vue, ou le nom du tag du nœud DOM `Wrapper` si `Wrapper` ne contient pas d'instance de Vue. 8 | 9 | - **Retours:** `{string}` 10 | 11 | - **Exemple:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.name()).toBe('Foo') 19 | const p = wrapper.find('p') 20 | expect(p.name()).toBe('p') 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/overview.md: -------------------------------------------------------------------------------- 1 | ## overview 2 | 3 | ::: warning Avertissement de déprédation 4 | `overview` est dépréciée et sera supprimée dans les prochaines versions. 5 | ::: 6 | 7 | Affiche un simple aperçu du `Wrapper`. 8 | 9 | - **Exemple:** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Component from './Component.vue' 14 | 15 | const wrapper = mount(Component) 16 | wrapper.overview() 17 | 18 | // Console output 19 | /* 20 | Wrapper (Visible): 21 | 22 | Html: 23 |
24 |

My name is Tess Ting

25 |
26 | 27 | Data: { 28 | firstName: Tess, 29 | lastName: Ting 30 | } 31 | 32 | Computed: { 33 | fullName: Tess Ting' 34 | } 35 | 36 | Emitted: {', 37 | foo: [', 38 | 0: [ hello, world ], 39 | 1: [ bye, world ]' 40 | ], 41 | bar: [ 42 | 0: [ hey ]' 43 | ] 44 | } 45 | 46 | */ 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/props.md: -------------------------------------------------------------------------------- 1 | ## props 2 | 3 | Retourne l'objet props `Wrapper` `vm`. Si `key` est fourni, la valeur pour `key` sera retournée. 4 | 5 | **Note : le Wrapper doit contenir une instance de Vue.** 6 | 7 | - **Arguments:** 8 | 9 | - `{string} key` **facultatif** 10 | 11 | - **Retours:** `{[prop: string]: any} | any` 12 | 13 | - **Exemple:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | const wrapper = mount(Foo, { 20 | propsData: { 21 | bar: 'baz' 22 | } 23 | }) 24 | expect(wrapper.props().bar).toBe('baz') 25 | expect(wrapper.props('bar')).toBe('baz') 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/setData.md: -------------------------------------------------------------------------------- 1 | ## setData 2 | 3 | Définis les données `Wrapper` `vm`. 4 | 5 | setData fonctionne en appelant récursivement Vue.set. 6 | 7 | **Note - le Wrapper doit contenir une instance de Vue.** 8 | 9 | - **Arguments:** 10 | 11 | - `{Object} data` 12 | 13 | - **Exemple:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | const wrapper = mount(Foo) 20 | wrapper.setData({ foo: 'bar' }) 21 | expect(wrapper.vm.foo).toBe('bar') 22 | ``` 23 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/setSelected.md: -------------------------------------------------------------------------------- 1 | ## setSelected 2 | 3 | Sélectionne un élément d'option et met à jour les données liées au `v-model`. 4 | 5 | - **Exemple:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import Foo from './Foo.vue' 10 | 11 | const wrapper = mount(Foo) 12 | const options = wrapper.find('select').findAll('option') 13 | 14 | options.at(1).setSelected() 15 | ``` 16 | 17 | - **Note:** 18 | 19 | Lorsque vous essayez de mettre la valeur à l'état via `v-model` par `option.element.selected = true ; parentSelect.trigger('input')`, `v-model` n'est pas déclenché. Le `v-model` est déclenché par l'événement `change`. 20 | 21 | `option.setSelected()` est un alias du code suivant. 22 | 23 | ```js 24 | option.element.selected = true 25 | parentSelect.trigger('change') 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/fr/api/wrapper/text.md: -------------------------------------------------------------------------------- 1 | ## text 2 | 3 | Renvoie le contenu textuel de `Wrapper`. 4 | 5 | - **Retours:** `{string}` 6 | 7 | - **Exemple:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.text()).toBe('bar') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/fr/guides/README.md: -------------------------------------------------------------------------------- 1 | # Guides 2 | 3 | !!!include(docs/fr/guides/getting-started.md)!!! 4 | !!!include(docs/fr/guides/common-tips.md)!!! 5 | !!!include(docs/fr/guides/dom-events.md)!!! 6 | !!!include(docs/fr/guides/testing-async-components.md)!!! 7 | !!!include(docs/fr/guides/using-with-typescript.md)!!! 8 | !!!include(docs/fr/guides/using-with-vue-router.md)!!! 9 | !!!include(docs/fr/guides/using-with-vuex.md)!!! 10 | -------------------------------------------------------------------------------- /docs/fr/installation/README.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | !!!include(docs/fr/installation/semantic-versioning.md)!!! 4 | !!!include(docs/fr/installation/using-with-jest.md)!!! 5 | !!!include(docs/fr/installation/using-other-test-runners.md)!!! 6 | -------------------------------------------------------------------------------- /docs/fr/installation/semantic-versioning.md: -------------------------------------------------------------------------------- 1 | ## Version sémantique 2 | 3 | Vue Test Utils suit [Semantic Versioning](https://semver.org/) dans tous ses projets officiels pour les fonctionnalités et le comportement documentés. Pour les comportementsnon documentés ou les internes exposés, les changements sont décrits dans les [notes de version](https://github.com/vuejs/vue-test-utils/releases). 4 | -------------------------------------------------------------------------------- /docs/guides/README.md: -------------------------------------------------------------------------------- 1 | # Guides 2 | 3 | !!!include(docs/guides/getting-started.md)!!! 4 | !!!include(docs/guides/common-tips.md)!!! 5 | !!!include(docs/guides/dom-events.md)!!! 6 | !!!include(docs/guides/testing-async-components.md)!!! 7 | !!!include(docs/guides/using-with-typescript.md)!!! 8 | !!!include(docs/guides/using-with-vue-router.md)!!! 9 | !!!include(docs/guides/using-with-vuex.md)!!! 10 | -------------------------------------------------------------------------------- /docs/installation/README.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | !!!include(docs/installation/semantic-versioning.md)!!! 4 | !!!include(docs/installation/using-with-jest.md)!!! 5 | !!!include(docs/installation/using-other-test-runners.md)!!! 6 | -------------------------------------------------------------------------------- /docs/installation/semantic-versioning.md: -------------------------------------------------------------------------------- 1 | ## Semantic versioning 2 | 3 | Vue Test Utils follows [Semantic Versioning](https://semver.org/) in all its official projects for documented features and behavior. For undocumented behavior or exposed internals, changes are described in [release notes](https://github.com/vuejs/vue-test-utils/releases). 4 | -------------------------------------------------------------------------------- /docs/ja/api/README.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | !!!include(docs/ja/api/mount.md)!!! 4 | !!!include(docs/ja/api/shallowMount.md)!!! 5 | !!!include(docs/ja/api/render.md)!!! 6 | !!!include(docs/ja/api/renderToString.md)!!! 7 | !!!include(docs/ja/api/selectors.md)!!! 8 | !!!include(docs/ja/api/createLocalVue.md)!!! 9 | !!!include(docs/ja/api/createWrapper.md)!!! 10 | !!!include(docs/ja/api/config.md)!!! 11 | -------------------------------------------------------------------------------- /docs/ja/api/components/README.md: -------------------------------------------------------------------------------- 1 | # コンポーネント 2 | 3 | vue-test-utils にはコンポーネントをスタブするためのユーティリティコンポーネントがあります。 4 | 5 | !!!include(docs/ja/api/components/RouterLinkStub.md)!!! 6 | -------------------------------------------------------------------------------- /docs/ja/api/components/RouterLinkStub.md: -------------------------------------------------------------------------------- 1 | ## RouterLinkStub 2 | 3 | Vue Router の  `router-link` コンポーネントをスタブするためのコンポーネントです。 4 | 5 | レンダリングツリーにある router-link コンポーネントを見つけるためにこのコンポーネントを使用することができます。 6 | 7 | - **使い方:** 8 | 9 | スタブとしてマウンティングオプションにセットします。 10 | 11 | ```js 12 | import { mount, RouterLinkStub } from '@vue/test-utils' 13 | 14 | const wrapper = mount(Component, { 15 | stubs: { 16 | RouterLink: RouterLinkStub 17 | } 18 | }) 19 | expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path') 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/ja/api/createWrapper.md: -------------------------------------------------------------------------------- 1 | ## createWrapper(node [, options]) 2 | 3 | - **引数:** 4 | 5 | - `{vm|HTMLElement} node` 6 | - `{Object} options` 7 | - `{Boolean} attachedToDocument` 8 | 9 | - **戻り値:** 10 | 11 | - `{Wrapper}` 12 | 13 | - **使い方:** 14 | 15 | `createWrapper` は Vue インスタンスまたは HTML 要素に対する `Wrapper` を生成します。 16 | 17 | ```js 18 | import { createWrapper } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const Constructor = Vue.extend(Foo) 22 | const vm = new Constructor().$mount() 23 | const wrapper = createWrapper(vm) 24 | expect(wrapper.vm.foo).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper-array/at.md: -------------------------------------------------------------------------------- 1 | ## at(index) 2 | 3 | 渡された `index` の `Wrapper` を返します。ゼロベースの番号付けを使用します(つまり、最初のアイテムはインデックス 0 になります)。 4 | 5 | - **引数:** 6 | 7 | - `{number} index` 8 | 9 | - **戻り値:** `{Wrapper}` 10 | 11 | - **例:** 12 | 13 | ```js 14 | import { shallowMount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = shallowMount(Foo) 18 | const divArray = wrapper.findAll('div') 19 | const secondDiv = divArray.at(1) 20 | expect(secondDiv.is('p')).toBe(true) 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper-array/contains.md: -------------------------------------------------------------------------------- 1 | ## contains(selector) 2 | 3 | `WrapperArray` のすべての Wrapper にセレクタが含まれているか検証します。 4 | 5 | 有効な[セレクタ](../selectors.md)を使用してください。 6 | 7 | - **引数:** 8 | 9 | - `{string|Component} selector` 10 | 11 | - **戻り値:** `{boolean}` 12 | 13 | - **例:** 14 | 15 | ```js 16 | import { shallowMount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | import Bar from './Bar.vue' 19 | 20 | const wrapper = shallowMount(Foo) 21 | const divArray = wrapper.findAll('div') 22 | expect(divArray.contains('p')).toBe(true) 23 | expect(divArray.contains(Bar)).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper-array/destroy.md: -------------------------------------------------------------------------------- 1 | ## destroy() 2 | 3 | `WrapperArray` のすべての Vue コンポーネントインスタンスを破棄します。 4 | 5 | - **例:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import Foo from './Foo.vue' 10 | 11 | const wrapper = mount(Foo) 12 | const divArray = wrapper.findAll('div') 13 | expect(divArray.contains('p')).toBe(true) 14 | divArray.destroy() 15 | expect(divArray.contains('p')).toBe(false) 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper-array/filter.md: -------------------------------------------------------------------------------- 1 | ## filter(predicate) 2 | 3 | `Wrapper` オブジェクトを判別する関数を使用して `WrapperArray` をフィルタリングします。 4 | 5 | このメソッドの動作は [Array.prototype.filter](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) に似ています。 6 | 7 | - **引数:** 8 | 9 | - `{function} predicate` 10 | 11 | - **戻り値:** `{WrapperArray}` 12 | 13 | predicate 関数が true を返す `Wrapper` インスタンスを含む新しい `WrapperArray` インスタンスを返します。 14 | 15 | - **例:** 16 | 17 | ```js 18 | import { shallowMount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = shallowMount(Foo) 22 | const filteredDivArray = wrapper 23 | .findAll('div') 24 | .filter(w => !w.classes('filtered')) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper-array/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## isEmpty() 2 | 3 | ::: warning Deprecation warning 4 | `isEmpty` は非推奨となり、将来のリリースで削除される予定です。 5 | 6 | [jest-dom](https://github.com/testing-library/jest-dom#custom-matchers) で提供されているようなカスタムマッチャの使用を検討してください。 7 | 8 | findComponent で使用する場合は、 `findComponent(Comp).element` で DOM 要素にアクセスします。 9 | ::: 10 | 11 | `WrapperArray` のすべての `Wrapper` に子ノードを含んでいないか検証します。 12 | 13 | - **戻り値:** `{boolean}` 14 | 15 | - **例:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | const divArray = wrapper.findAll('div') 23 | expect(divArray.isEmpty()).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper-array/isVisible.md: -------------------------------------------------------------------------------- 1 | ## isVisible() 2 | 3 | `WrapperArray` 内のすべての `Wrapper` が表示されているかアサートします。 4 | 5 | style が `display: none` か `visibility: hidden` の親要素を持つ `Wrapper` が少なくとも 1 つある場合、 false を返します。 6 | 7 | コンポーネントが `v-show` によって非表示になっているかアサートすることに使用することができます。 8 | 9 | - **戻り値:** `{boolean}` 10 | 11 | - **例:** 12 | 13 | ```js 14 | import { mount } from 'vue-test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false) 20 | expect(wrapper.findAll('.is-visible').isVisible()).toBe(true) 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper-array/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## isVueInstance() 2 | 3 | ::: warning Deprecation warning 4 | `isVueInstance` は非推奨となり、将来のリリースで削除される予定です。 5 | 6 | `isVueInstance` アサーションに依存するテストは、ほとんどまたは全く価値を提供しません。それらを意図のあるアサーションに置き換えることをお勧めします。 7 | 8 | テストを維持するために、`isVueInstance()` を置き換える場合は、 `wrapper.find(...).vm` のアサーションが有効です。 9 | ::: 10 | 11 | `WrapperArray` の全ての `Wrapper` が Vue インスタンスであるか検証します。 12 | 13 | - **戻り値:** `{boolean}` 14 | 15 | - **例:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | import Bar from './Bar.vue' 21 | 22 | const wrapper = mount(Foo) 23 | const barArray = wrapper.findAll(Bar) 24 | expect(barArray.isVueInstance()).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper-array/setData.md: -------------------------------------------------------------------------------- 1 | ## setData(data) 2 | 3 | `WrapperArray` の `Wrapper` ごとに `Wrapper` に `vm` データをセットします。 4 | 5 | **すべての `Wrapper` は Vue インスタンスを含んでいなければならないことに注意してください。** 6 | 7 | - **引数:** 8 | 9 | - `{Object} data` 10 | 11 | - **例:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | test('setData demo', async () => { 19 | const wrapper = mount(Foo) 20 | const barArray = wrapper.findAll(Bar) 21 | await barArray.setData({ foo: 'bar' }) 22 | expect(barArray.at(0).vm.foo).toBe('bar') 23 | }) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper-array/setProps.md: -------------------------------------------------------------------------------- 1 | ## setProps(props) 2 | 3 | `WrapperArray` の `Wrapper` ごとに `Wrapper` に `vm` プロパティをセットし、強制的に更新します。 4 | 5 | **すべての `Wrapper` は Vue インスタンスを含んでいなければならないことに注意してください。** 6 | 7 | - **引数:** 8 | 9 | - `{Object} props` 10 | 11 | - **例:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | test('setProps demo', async () => { 19 | const wrapper = mount(Foo) 20 | const barArray = wrapper.findAll(Bar) 21 | await barArray.setProps({ foo: 'bar' }) 22 | expect(barArray.at(0).vm.foo).toBe('bar') 23 | }) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper-array/setValue.md: -------------------------------------------------------------------------------- 1 | ## setValue(value) 2 | 3 | このメソッドは以下のコードのエイリアスです。 4 | 5 | ```js 6 | wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value)) 7 | ``` 8 | 9 | - **引数:** 10 | 11 | - `{any} value` 12 | 13 | - **例:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | 18 | const wrapper = mount({ 19 | data() { 20 | return { 21 | t1: '', 22 | t2: '' 23 | } 24 | }, 25 | template: ` 26 |
27 | 28 | 29 |
` 30 | }) 31 | 32 | test('setValue demo', async () => { 33 | const wrapperArray = wrapper.findAll('.foo') 34 | expect(wrapper.vm.t1).toEqual('') 35 | expect(wrapper.vm.t2).toEqual('') 36 | await wrapperArray.setValue('foo') 37 | expect(wrapper.vm.t1).toEqual('foo') 38 | expect(wrapper.vm.t2).toEqual('foo') 39 | }) 40 | ``` 41 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper-array/trigger.md: -------------------------------------------------------------------------------- 1 | ## trigger(eventName [, options]) 2 | 3 | `WrapperArray` の DOM ノードのすべての `Wrapper` でイベントを発火します。 4 | 5 | **すべての `Wrapper` は Vue インスタンスを含んでいなければならないことに注意してください。** 6 | 7 | - **引数:** 8 |  - `{string} eventName` **必須** 9 |  - `{Object} options` **オプション** 10 | 11 | - **例:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import sinon from 'sinon' 16 | import Foo from './Foo.vue' 17 | 18 | test('trigger demo', async () => { 19 | const clickHandler = sinon.stub() 20 | const wrapper = mount(Foo, { 21 | propsData: { clickHandler } 22 | }) 23 | 24 | const divArray = wrapper.findAll('div') 25 | await divArray.trigger('click') 26 | expect(clickHandler.called).toBe(true) 27 | }) 28 | ``` 29 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/attributes.md: -------------------------------------------------------------------------------- 1 | ## attributes() 2 | 3 | `Wrapper` にラップされている要素の属性をオブジェクトで返します。 4 | 5 | - **戻り値:** `{[attribute: string]: any}` 6 | 7 | - **例:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.attributes().id).toBe('foo') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/classes.md: -------------------------------------------------------------------------------- 1 | ## classes() 2 | 3 | `Wrapper` にラップされている要素の class 名を配列で返します。 4 | 5 | - **戻り値:** `Array<{string}>` 6 | 7 | - **例:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.classes()).toContain('bar') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/contains.md: -------------------------------------------------------------------------------- 1 | ## contains(selector) 2 | 3 | `Wrapper` に要素、もしくは[セレクタ](../selectors.md)で指定したコンポーネントを含んでいるか検証します。 4 | 5 | - **引数:** 6 | 7 | - `{string|Component} selector` 8 | 9 | - **戻り値:** `{boolean}` 10 | 11 | - **例:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | expect(wrapper.contains('p')).toBe(true) 20 | expect(wrapper.contains(Bar)).toBe(true) 21 | ``` 22 | 23 | - **参照:** [セレクタ](../selectors.md) 24 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/destroy.md: -------------------------------------------------------------------------------- 1 | ## destroy() 2 | 3 | Vue コンポーネントインスタンスを破棄します。 4 | 5 | - **例:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import sinon from 'sinon' 10 | 11 | const spy = sinon.stub() 12 | mount({ 13 | render: null, 14 | destroyed() { 15 | spy() 16 | } 17 | }).destroy() 18 | expect(spy.calledOnce).toBe(true) 19 | ``` 20 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/emittedByOrder.md: -------------------------------------------------------------------------------- 1 | ## emittedByOrder() 2 | 3 | ::: warning Deprecation warning 4 | `emittedByOrder` は非推奨となり、将来のリリースで削除される予定です。 5 | 6 | 代わりに `wrapper.emitted` を使用してください。 7 | ::: 8 | 9 | `Wrapper` `vm` によって生成されたカスタムイベントを含む配列を返します。 10 | 11 | - **戻り値:** `Array<{ name: string, args: Array }>` 12 | 13 | - **例:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | 18 | const wrapper = mount(Component) 19 | 20 | wrapper.vm.$emit('foo') 21 | wrapper.vm.$emit('bar', 123) 22 | 23 | /* 24 | wrapper.emittedByOrder() は次の配列を返します 25 | [ 26 | { name: 'foo', args: [] }, 27 | { name: 'bar', args: [123] } 28 | ] 29 | */ 30 | 31 | // イベントの発行順序を検証します 32 | expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar']) 33 | ``` 34 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/exists.md: -------------------------------------------------------------------------------- 1 | ## exists() 2 | 3 | `Wrapper` か `WrapperArray` が存在するか検証します。 4 | 5 | `Wrapper` か `WrapperArray` が空だった場合は false を返します。 6 | 7 | - **戻り値:** `{boolean}` 8 | 9 | - **例:** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Foo from './Foo.vue' 14 | 15 | const wrapper = mount(Foo) 16 | expect(wrapper.exists()).toBe(true) 17 | expect(wrapper.find('does-not-exist').exists()).toBe(false) 18 | expect(wrapper.findAll('div').exists()).toBe(true) 19 | expect(wrapper.findAll('does-not-exist').exists()).toBe(false) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/find.md: -------------------------------------------------------------------------------- 1 | ## find(selector) 2 | 3 | ::: warning Deprecation warning 4 | コンポーネントの検索に `find` を使用することは非推奨となり、削除される予定です。代わりに `findComponent` を使用してください。 5 | ::: 6 | 7 | 最初の DOM ノードの Wrapper、またはセレクタで一致した Vue コンポーネントを返します。 8 | 9 | 有効な[セレクタ](../selectors.md)を使用してください。 10 | 11 | - **引数:** 12 | 13 | - `{string|Component} selector` 14 | 15 | - **戻り値:** `{Wrapper}` 16 | 17 | - **例:** 18 | 19 | ```js 20 | import { mount } from '@vue/test-utils' 21 | import Foo from './Foo.vue' 22 | import Bar from './Bar.vue' 23 | 24 | const wrapper = mount(Foo) 25 | 26 | const div = wrapper.find('div') 27 | expect(div.is('div')).toBe(true) 28 | 29 | const bar = wrapper.find(Bar) 30 | expect(bar.is(Bar)).toBe(true) 31 | 32 | const barByName = wrapper.find({ name: 'bar' }) 33 | expect(barByName.is(Bar)).toBe(true) 34 | 35 | const fooRef = wrapper.find({ ref: 'foo' }) 36 | expect(fooRef.is(Foo)).toBe(true) 37 | ``` 38 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/findAll.md: -------------------------------------------------------------------------------- 1 | ## findAll(selector) 2 | 3 | ::: warning Deprecation warning 4 | `findAll` を使用してコンポーネントを検索することは非推奨となり、削除される予定です。代わりに `findAllComponents` を使用してください。 5 | ::: 6 | 7 | [`WrapperArray`](../wrapper-array/)を返します。 8 | 9 | 有効な[セレクタ](../selectors.md)を使用してください。 10 | 11 | - **引数:** 12 | 13 | - `{string|Component} selector` 14 | 15 | - **戻り値:** `{WrapperArray}` 16 | 17 | - **例:** 18 | 19 | ```js 20 | import { mount } from '@vue/test-utils' 21 | import Foo from './Foo.vue' 22 | import Bar from './Bar.vue' 23 | 24 | const wrapper = mount(Foo) 25 | const div = wrapper.findAll('div').at(0) 26 | expect(div.is('div')).toBe(true) 27 | const bar = wrapper.findAll(Bar).at(0) 28 | expect(bar.is(Bar)).toBe(true) 29 | ``` 30 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/findAllComponents.md: -------------------------------------------------------------------------------- 1 | ## findAllComponents 2 | 3 | 一致するすべての Vue コンポーネントの `WrapperArray` を返します。 4 | 5 | - **引数:** 6 | 7 | - `{Component|ref|name} selector` 8 | 9 | - **戻り値:** `{WrapperArray}` 10 | 11 | - **例:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | const bar = wrapper.findAllComponents(Bar).at(0) 20 | expect(bar.exists()).toBeTruthy() 21 | const bars = wrapper.findAllComponents(Bar) 22 | expect(bar).toHaveLength(1) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/findComponent.md: -------------------------------------------------------------------------------- 1 | ## findComponent 2 | 3 | 最初に一致した Vue コンポーネントの `Wrapper` を返します。 4 | 5 | - **引数:** 6 | 7 | - `{Component|ref|name} selector` 8 | 9 | - **戻り値:** `{Wrapper}` 10 | 11 | - **例:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | 20 | const bar = wrapper.findComponent(Bar) // => コンポーネントインスタンスによってバーを検索します 21 | expect(bar.exists()).toBe(true) 22 | const barByName = wrapper.findComponent({ name: 'bar' }) // => `name` でバーを検索します 23 | expect(barByName.exists()).toBe(true) 24 | const barRef = wrapper.findComponent({ ref: 'bar' }) // => `ref` でバーを検索します 25 | expect(barRef.exists()).toBe(true) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/html.md: -------------------------------------------------------------------------------- 1 | ## html() 2 | 3 | `Wrapper` DOM ノードの HTML を文字列として返します。 4 | 5 | - **戻り値:** `{string}` 6 | 7 | - **例:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.html()).toBe('

Foo

') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## isEmpty() 2 | 3 | `Wrapper` が子ノードを含んでいないか検証します。 4 | 5 | - **戻り値:** `{boolean}` 6 | 7 | - **例:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.isEmpty()).toBe(true) 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/isVisible.md: -------------------------------------------------------------------------------- 1 | ## isVisible() 2 | 3 | `Wrapper` が表示されているかアサートします。 4 | 5 | style が `display: none` か  `visibility: hidden` の親要素がある場合、 false を返します。 6 | 7 | コンポーネントが `v-show` によって非表示になっているかアサートすることに使用することができます。 8 | 9 | - **戻り値:** `{boolean}` 10 | 11 | - **例:** 12 | 13 | ```js 14 | import { mount } from 'vue-test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.find('.is-not-visible').isVisible()).toBe(false) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## isVueInstance() 2 | 3 | ::: warning Deprecation warning 4 | `isVueInstance` は非推奨となり、将来のリリースで削除される予定です。 5 | 6 | `isVueInstance` アサーションに依存するテストは、ほとんどまたは全く価値を提供しません。それらを意図のあるアサーションに置き換えることをお勧めします。 7 | 8 | テストを維持するために、`isVueInstance()` を置き換える場合は、 `wrapper.find(...).vm` のアサーションが有効です。 9 | ::: 10 | 11 | `Wrapper` が Vue インスタンスか検証します。 12 | 13 | - **戻り値:** `{boolean}` 14 | 15 | - **例:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | expect(wrapper.isVueInstance()).toBe(true) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/name.md: -------------------------------------------------------------------------------- 1 | ## name() 2 | 3 | ::: warning Deprecation warning 4 | `name` は非推奨となり、将来のリリースで削除される予定です。 5 | ::: 6 | 7 | `Wrapper` に Vue インスタンスが含まれている場合はコンポーネント名を返し、そうでない場合は `Wrapper` DOM ノードのタグ名を返します。 8 | 9 | - **戻り値:** `{string}` 10 | 11 | - **例:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.name()).toBe('Foo') 19 | const p = wrapper.find('p') 20 | expect(p.name()).toBe('p') 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/props.md: -------------------------------------------------------------------------------- 1 | ## props() 2 | 3 | `Wrapper` の `vm` プロパティの props オブジェクトを返します。 4 | 5 | **Wrapper には Vue インスタンスを含む必要があることに注意してください** 6 | 7 | - **戻り値:** `{[prop: string]: any}` 8 | 9 | - **例:** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import { expect } from 'chai' 14 | import Foo from './Foo.vue' 15 | 16 | const wrapper = mount(Foo, { 17 | propsData: { 18 | bar: 'baz' 19 | } 20 | }) 21 | expect(wrapper.props().bar).toBe('baz') 22 | ``` 23 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/setData.md: -------------------------------------------------------------------------------- 1 | ## setData(data) 2 | 3 | `Wrapper` `vm` データを設定します。 4 | 5 | setData は再帰的に Vue.set を実行することで動作します。 6 | 7 | **Wrapper には Vue インスタンスを含む必要があることに注意してください** 8 | 9 | - **引数:** 10 | 11 | - `{Object} data` 12 | 13 | - **例:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | test('setData demo', async () => { 20 | const wrapper = mount(Foo) 21 | 22 | await wrapper.setData({ foo: 'bar' }) 23 | 24 | expect(wrapper.vm.foo).toBe('bar') 25 | }) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/setSelected.md: -------------------------------------------------------------------------------- 1 | ## setSelected() 2 | 3 | option 要素を選択します。そして、 `v-model` に束縛されているデータを更新します。 4 | 5 | - **例:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import Foo from './Foo.vue' 10 | 11 | test('setSelected demo', async () => { 12 | const wrapper = mount(Foo) 13 | const options = wrapper.find('select').findAll('option') 14 | 15 | await options.at(1).setSelected() 16 | 17 | expect(wrapper.find('option:checked').element.value).toBe('bar') 18 | }) 19 | ``` 20 | 21 | - **注:** 22 | 23 | `v-model` を経由して `option.element.selected = true; parentSelect.trigger('input')` で state に値をセットしようとすると、 `v-model` はトリガされません。 `v-model` は `change` イベントでトリガされます。 24 | 25 | `option.setSelected()` は以下のコードのエイリアスです。 26 | 27 | ```js 28 | option.element.selected = true 29 | parentSelect.trigger('change') 30 | ``` 31 | -------------------------------------------------------------------------------- /docs/ja/api/wrapper/text.md: -------------------------------------------------------------------------------- 1 | ## text() 2 | 3 | `Wrapper` のテキスト内容を返します。 4 | 5 | - **戻り値:** `{string}` 6 | 7 | - **例:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.text()).toBe('bar') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/ja/guides/README.md: -------------------------------------------------------------------------------- 1 | # ガイド 2 | 3 | !!!include(docs/ja/guides/getting-started.md)!!! 4 | !!!include(docs/ja/guides/common-tips.md)!!! 5 | !!!include(docs/ja/guides/dom-events.md)!!! 6 | !!!include(docs/ja/guides/testing-async-components.md)!!! 7 | !!!include(docs/ja/guides/using-with-typescript.md)!!! 8 | !!!include(docs/ja/guides/using-with-vue-router.md)!!! 9 | !!!include(docs/ja/guides/using-with-vuex.md)!!! 10 | -------------------------------------------------------------------------------- /docs/ja/installation/README.md: -------------------------------------------------------------------------------- 1 | # インストール 2 | 3 | !!!include(docs/ja/installation/choosing-a-test-runner.md)!!! 4 | !!!include(docs/ja/installation/testing-single-file-components-with-jest.md)!!! 5 | !!!include(docs/ja/installation/testing-single-file-components-with-mocha-webpack.md)!!! 6 | !!!include(docs/ja/installation/testing-single-file-components-with-karma.md)!!! 7 | -------------------------------------------------------------------------------- /docs/pt/api/README.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | !!!include(docs/pt/api/mount.md)!!! 4 | !!!include(docs/pt/api/shallowMount.md)!!! 5 | !!!include(docs/pt/api/render.md)!!! 6 | !!!include(docs/pt/api/renderToString.md)!!! 7 | !!!include(docs/pt/api/selectors.md)!!! 8 | !!!include(docs/pt/api/createLocalVue.md)!!! 9 | !!!include(docs/pt/api/createWrapper.md)!!! 10 | !!!include(docs/pt/api/config.md)!!! 11 | !!!include(docs/pt/api/enableAutoDestroy.md)!!! 12 | -------------------------------------------------------------------------------- /docs/pt/api/components/README.md: -------------------------------------------------------------------------------- 1 | # Componentes 2 | 3 | A Vue Test Utils inclui utilitários de componentes que você pode usar para forjar componentes. 4 | 5 | !!!include(docs/pt/api/components/RouterLinkStub.md)!!! 6 | -------------------------------------------------------------------------------- /docs/pt/api/components/RouterLinkStub.md: -------------------------------------------------------------------------------- 1 | ## O componente RouterLinkStub 2 | 3 | Um componente para forjar o componente `router-link` do Vue Router. 4 | 5 | Você pode usar este componente para achar um componente `router-link` dentro da árvore de renderização. 6 | 7 | - **Uso:** 8 | 9 | Definir ele como um componente forjado dentro das opções de montagem: 10 | 11 | ```js 12 | import { mount, RouterLinkStub } from '@vue/test-utils' 13 | 14 | const wrapper = mount(Component, { 15 | stubs: { 16 | RouterLink: RouterLinkStub 17 | } 18 | }) 19 | expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path') 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/pt/api/createWrapper.md: -------------------------------------------------------------------------------- 1 | ## O método createWrapper(node [, options]) 2 | 3 | - **Argumentos:** 4 | 5 | - `{vm|HTMLElement} node` 6 | - `{Object} options` 7 | - `{Boolean} attachedToDocument` 8 | 9 | - **Retorna:** 10 | 11 | - `{Wrapper}` 12 | 13 | - **Uso:** 14 | 15 | O `createWrapper` cria um `Wrapper` para uma instância do Vue montada, ou um elemento HTML. 16 | 17 | ```js 18 | import { createWrapper } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const Constructor = Vue.extend(Foo) 22 | const vm = new Constructor().$mount() 23 | const wrapper = createWrapper(vm) 24 | expect(wrapper.vm.foo).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/at.md: -------------------------------------------------------------------------------- 1 | ## O método at 2 | 3 | Retorna o `Wrapper` (envolvedor) no `índice` passado. Usa numeração baseada em zero (exemplo. o primeiro item está no índice 0). 4 | Se o `índice` for negativo, a indexação começa com o último elemento (exemplo. o último item está no índice -1). 5 | 6 | - **Argumentos:** 7 | 8 | - `{number} index` 9 | 10 | - **Retorna:** `{Wrapper}` 11 | 12 | - **Exemplo:** 13 | 14 | ```js 15 | import { shallowMount } from '@vue/test-utils' 16 | import Foo from './Foo.vue' 17 | 18 | const wrapper = shallowMount(Foo) 19 | const divArray = wrapper.findAll('div') 20 | 21 | const secondDiv = divArray.at(1) 22 | expect(secondDiv.is('div')).toBe(true) 23 | 24 | const lastDiv = divArray.at(-1) 25 | expect(lastDiv.is('div')).toBe(true) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/contains.md: -------------------------------------------------------------------------------- 1 | ## O método contains 2 | 3 | Afirma que todo wrapper (envolvedor) dentro do `WrapperArray` contém o seletor. 4 | 5 | Use qualquer [seletor](../selectors.md) válido. 6 | 7 | - **Argumentos:** 8 | 9 | - `{string|Component} selector` 10 | 11 | - **Returna:** `{boolean}` 12 | 13 | - **Exemplo:** 14 | 15 | ```js 16 | import { shallowMount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | import Bar from './Bar.vue' 19 | 20 | const wrapper = shallowMount(Foo) 21 | const divArray = wrapper.findAll('div') 22 | expect(divArray.contains('p')).toBe(true) 23 | expect(divArray.contains(Bar)).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/destroy.md: -------------------------------------------------------------------------------- 1 | ## O método destroy 2 | 3 | Destrói cada `Wrapper` (envolvedor) de Vue dentro do `WrapperArray`. 4 | 5 | - **Exemplo:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import Foo from './Foo.vue' 10 | 11 | const wrapper = mount(Foo) 12 | const divArray = wrapper.findAll('div') 13 | expect(divArray.contains('p')).toBe(true) 14 | divArray.destroy() 15 | expect(divArray.contains('p')).toBe(false) 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/exists.md: -------------------------------------------------------------------------------- 1 | ## O método exists 2 | 3 | Afirma que `WrapperArray` existe. 4 | 5 | Retorna `false` se for chamado em um `WrapperArray` sem objetos `Wrapper` (envolvedor), ou se qualquer um deles não existir. 6 | 7 | - **Retorna:** `{boolean}` 8 | 9 | - **Exemplo:** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Foo from './Foo.vue' 14 | 15 | const wrapper = mount(Foo) 16 | expect(wrapper.findAll('div').exists()).toBe(true) 17 | expect(wrapper.findAll('does-not-exist').exists()).toBe(false) 18 | ``` 19 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/filter.md: -------------------------------------------------------------------------------- 1 | ## O método filter 2 | 3 | Filtra o `WrapperArray` com uma função atribuída sobre objetos `Wrapper` (envoledor). 4 | 5 | O comportamento deste método é similar ao [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). 6 | 7 | 8 | - **Argumentos:** 9 | 10 | - `{function} predicate` 11 | 12 | - **Retorna:** `{WrapperArray}` 13 | 14 | Uma nova instância de `WrapperArray` contendo instâncias de `Wrapper` que torna `true` para a função atribuída. 15 | 16 | - **Exemplo:** 17 | 18 | ```js 19 | import { shallowMount } from '@vue/test-utils' 20 | import Foo from './Foo.vue' 21 | 22 | const wrapper = shallowMount(Foo) 23 | const filteredDivArray = wrapper 24 | .findAll('div') 25 | .filter(w => !w.classes('filtered')) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/is.md: -------------------------------------------------------------------------------- 1 | ## O método is 2 | 3 | Afirma que todo `Wrapper` dentro do nó do DOM de `WrapperArray`ou `vm` corresponde a um [seletor](../selectors.md). 4 | 5 | - **Argumentos:** 6 | 7 | - `{string|Component} selector` 8 | 9 | - **Retorna:** `{boolean}` 10 | 11 | - **Exemplo:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | const divArray = wrapper.findAll('div') 19 | expect(divArray.is('div')).toBe(true) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## O método isEmpty 2 | 3 | ::: warning Aviso de Depreciação 4 | O `isEmpty` está depreciado e será removido nos futuros lançamentos. 5 | 6 | Considere um correspondente personalizado tais como aqueles fornecidos dentro do [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). 7 | 8 | Sempre que estiver usando com `findComponent` acesse o elemento do DOM com `findComponent(Comp).element` 9 | ::: 10 | 11 | Afirma que todo `Wrapper` dentro do `WrapperArray` não contém nó filho. 12 | 13 | - **Retorna:** `{boolean}` 14 | 15 | - **Exemplo:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | const divArray = wrapper.findAll('div') 23 | expect(divArray.isEmpty()).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/isVisible.md: -------------------------------------------------------------------------------- 1 | ## O método isVisible 2 | 3 | Afirma que todo `Wrapper` (envolvedor) dentro do `WrapperArray` está visível. 4 | 5 | Retorna `false` se pelo menos elemento ancestral tiver o estilo `display: none`, `visibility: hidden`, `opacity: 0`, estiver localizado dentro tag `
` colapsada ou tiver o atributo `hidden`. 6 | 7 | Isto pode ser usado para afirmar que o componente está oculto pelo `v-show`. 8 | 9 | - **Retorna:** `{boolean}` 10 | 11 | - **Exemplo:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false) 20 | expect(wrapper.findAll('.is-visible').isVisible()).toBe(true) 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## O método isVueInstance 2 | 3 | ::: warning Aviso de Depreciação 4 | O método `isVueInstance` está depreciado e será removido nos futuros lançamentos. 5 | 6 | Testes que dependem da afirmação do método `isVueInstance` fornecem pouco ou nenhum valor. Nós sugerimos substituir eles por afirmações resolutas. 7 | 8 | Para manter esses testes, uma substituição válida para o método `isVueInstance()` é uma afirmação de veracidade (truthy) do `wrapper.find(...).vm`. 9 | ::: 10 | 11 | Afirma que todo `Wrapper` (envolvedor) dentro do `WrapperArray` é uma instância de Vue. 12 | 13 | - **Retorna:** `{boolean}` 14 | 15 | - **Exemplo:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | import Bar from './Bar.vue' 21 | 22 | const wrapper = mount(Foo) 23 | const barArray = wrapper.findAll(Bar) 24 | expect(barArray.isVueInstance()).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/setData.md: -------------------------------------------------------------------------------- 1 | ## O método setData 2 | 3 | Define os dados do `vm` do `Wrapper` (envolvedor) em cada `Wrapper` (envolvedor) dentro do `WrapperArray`. 4 | 5 | **Note que todo `Wrapper` deve conter uma instância de Vue.** 6 | 7 | - **Argumentos:** 8 | 9 | - `{Object} data` 10 | 11 | - **Exemplo:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | test('setData demo', async () => { 19 | const wrapper = mount(Foo) 20 | const barArray = wrapper.findAll(Bar) 21 | await barArray.setData({ foo: 'bar' }) 22 | expect(barArray.at(0).vm.foo).toBe('bar') 23 | }) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/setProps.md: -------------------------------------------------------------------------------- 1 | ## O método setProps 2 | 3 | Define as propriedades do `vm` do `Wrapper` (envolvedor) e força a atualização de cada `Wrapper` dentro do `WrapperArray`. 4 | 5 | **Note que todo `Wrapper` deve conter uma instância de Vue.** 6 | 7 | - **Argumentos:** 8 | 9 | - `{Object} props` 10 | 11 | - **Exemplo:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | test('setProps demo', async () => { 19 | const wrapper = mount(Foo) 20 | const barArray = wrapper.findAll(Bar) 21 | await barArray.setProps({ foo: 'bar' }) 22 | expect(barArray.at(0).vm.foo).toBe('bar') 23 | }) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper-array/trigger.md: -------------------------------------------------------------------------------- 1 | ## O método trigger 2 | 3 | Aciona um [evento](../../guides/dom-events.md#trigger-events) em todo `Wrapper` (envolvedor) dentro do `WrapperArray` de nó do DOM. 4 | 5 | **Note que todo `Wrapper` deve conter uma instância de Vue.** 6 | 7 | - **Argumentos:** 8 | 9 | - `{string} eventType` **obrigatório** 10 | - `{Object} options` **opcional** 11 | 12 | - **Exemplo:** 13 | 14 | ```js 15 | import { mount } from '@vue/test-utils' 16 | import sinon from 'sinon' 17 | import Foo from './Foo.vue' 18 | 19 | test('trigger demo', async () => { 20 | const clickHandler = sinon.stub() 21 | const wrapper = mount(Foo, { 22 | propsData: { clickHandler } 23 | }) 24 | 25 | const divArray = wrapper.findAll('div') 26 | await divArray.trigger('click') 27 | expect(clickHandler.called).toBe(true) 28 | }) 29 | ``` 30 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/attributes.md: -------------------------------------------------------------------------------- 1 | ## O método attributes 2 | 3 | Retorna o `Wrapper` (envolvedor) do objeto de atributo de um nó do DOM. Se a `key` for fornecida, o valor para o `key` será retornado. 4 | 5 | - **Argumentos:** 6 | 7 | - `{string} key` **opcional** 8 | 9 | - **Retorna:** `{[attribute: string]: any} | string` 10 | 11 | - **Exemplo:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.attributes().id).toBe('foo') 19 | expect(wrapper.attributes('id')).toBe('foo') 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/classes.md: -------------------------------------------------------------------------------- 1 | ## O método classes 2 | 3 | Retorna o `Wrapper` de classes do nó do DOM. 4 | 5 | Retorna um `Array` de nomes de classes ou um booleano se um nome de classe for fornecido. 6 | 7 | - **Argumentos:** 8 | 9 | - `{string} className` **opcional** 10 | 11 | - **Retorna:** `Array<{string}> | boolean` 12 | 13 | - **Exemplo:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | const wrapper = mount(Foo) 20 | expect(wrapper.classes()).toContain('bar') 21 | expect(wrapper.classes('bar')).toBe(true) 22 | ``` 23 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/contains.md: -------------------------------------------------------------------------------- 1 | ## O método contains 2 | 3 | ::: warning Deprecation warning 4 | O uso de `contains` está depreciado e será removido nos futuros lançamentos. Use o [`find`](./find.md) para nós (nodes) do DOM (usando a sintaxe do `querySelector`), o [`findComponent`](./findComponent.md) para componentes, ou antes o [`wrapper.get`](./get.md). 5 | ::: 6 | 7 | Afirma que `Wrapper` contém um elemento ou componente que corresponde ao [seletor](../selectors.md). 8 | 9 | - **Argumentos:** 10 | 11 | - `{string|Component} selector` 12 | 13 | - **Retorna:** `{boolean}` 14 | 15 | - **Exemplo:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | import Bar from './Bar.vue' 21 | 22 | const wrapper = mount(Foo) 23 | expect(wrapper.contains('p')).toBe(true) 24 | expect(wrapper.contains(Bar)).toBe(true) 25 | ``` 26 | 27 | - **Consulte também:** [seletores](../selectors.md) 28 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/destroy.md: -------------------------------------------------------------------------------- 1 | ## O método destroy 2 | 3 | Destrói uma instância de componente de Vue. 4 | 5 | - **Example:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import sinon from 'sinon' 10 | 11 | const spy = sinon.stub() 12 | mount({ 13 | render: null, 14 | destroyed() { 15 | spy() 16 | } 17 | }).destroy() 18 | expect(spy.calledOnce).toBe(true) 19 | ``` 20 | 21 | Se tanto a opção `attachTo` ou `attachToDocument` forem a causa do componente montar no documento, o componente de elementos do DOM também será removido do documento. 22 | 23 | Para componentes funcionais, o `destroy` apenas remove os elementos do DOM renderizados do documento. 24 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/emittedByOrder.md: -------------------------------------------------------------------------------- 1 | ## O método emittedByOrder 2 | 3 | ::: warning Aviso de Depreciação 4 | O `emittedByOrder` está depreciado e será removido nos futuros lançamentos. 5 | 6 | Ao invés disso use o `wrapper.emitted`. 7 | ::: 8 | 9 | Retorna um objeto contento eventos personalizados emitidos pelo `Wrapper` (envolvedor) `vm`. 10 | 11 | 12 | - **Retorna:** `Array<{ name: string, args: Array }>` 13 | 14 | - **Exemplo:** 15 | 16 | ```js 17 | import { mount } from '@vue/test-utils' 18 | 19 | const wrapper = mount(Component) 20 | 21 | wrapper.vm.$emit('foo') 22 | wrapper.vm.$emit('bar', 123) 23 | 24 | /* 25 | wrapper.emittedByOrder() retorna o seguinte `Array`: 26 | [ 27 | { name: 'foo', args: [] }, 28 | { name: 'bar', args: [123] } 29 | ] 30 | */ 31 | 32 | // afirma que o evento emite a ordem 33 | expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar']) 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/exists.md: -------------------------------------------------------------------------------- 1 | ## O método exists 2 | 3 | Afirma que o `Wrapper` (envolvedor) existe. 4 | 5 | Retorna `false` se chamando em um `Wrapper` o qual não existe. 6 | 7 | - **Retorna:** `{boolean}` 8 | 9 | - **Exemplo:** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Foo from './Foo.vue' 14 | 15 | const wrapper = mount(Foo) 16 | expect(wrapper.exists()).toBe(true) 17 | expect(wrapper.find('does-not-exist').exists()).toBe(false) 18 | ``` 19 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/findAllComponents.md: -------------------------------------------------------------------------------- 1 | ## O método findAllComponents 2 | 3 | Retorna um [`WrapperArray`](../wrapper-array/) de todos componentes de Vue correspondentes. 4 | 5 | - **Argumentos:** 6 | 7 | - O `selector` usa qualquer [seletor](../selectors.md) válido 8 | 9 | - **Retorna:** `{WrapperArray}` 10 | 11 | - **Exemplo:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | const bar = wrapper.findAllComponents(Bar).at(0) 20 | expect(bar.exists()).toBeTruthy() 21 | const bars = wrapper.findAllComponents(Bar) 22 | expect(bars).toHaveLength(1) 23 | ``` 24 | 25 | ::: warning Uso com seletores de CSS 26 | Ao usar o `findAllComponents` com o seletor de CSS está sujeito as mesmas limitações do [findComponent](api/wrapper/findComponent.md) 27 | ::: 28 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/html.md: -------------------------------------------------------------------------------- 1 | ## O método html 2 | 3 | Returns HTML of `Wrapper` DOM node as a string. 4 | Retorna o HTML do nó do DOM do `Wrapper` como uma sequência de caracteres (string). 5 | 6 | - **Retorna:** `{string}` 7 | 8 | - **Exemplo:** 9 | 10 | ```js 11 | import { mount } from '@vue/test-utils' 12 | import Foo from './Foo.vue' 13 | 14 | const wrapper = mount(Foo) 15 | expect(wrapper.html()).toBe('

Foo

') 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## O método isEmpty 2 | 3 | ::: warning Aviso de Depreciação 4 | O método `isEmpty` está depreciado e será removido nos futuros lançamentos. 5 | 6 | Considere um correspondente personalizado tais como aqueles fornecidos pelo [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). 7 | 8 | Quando estiver usando o `findComponent`, acesse o elemento do DOM com o `findComponent(Comp).elment` 9 | ::: 10 | 11 | Afiram que o `Wrapper` (envolvedor) não contém nó filho. 12 | 13 | - **Retorna:** `{boolean}` 14 | 15 | - **Exemplo:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | expect(wrapper.isEmpty()).toBe(true) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/isVisible.md: -------------------------------------------------------------------------------- 1 | ## O método isVisible 2 | 3 | Afirma que o `Wrapper` está visível. 4 | 5 | Retorna `false` se um elemento ancestral que tem o estilo `display: none`, `visibility: hidden`, `opacity: 0` está localizado dentro de uma tag `
` colapsada ou tem um atributo `hidden`. 6 | 7 | Isto pode ser usado para afirmar que um componente está escondido por `v-show`. 8 | 9 | - **Retorna:** `{boolean}` 10 | 11 | - **Exemplo:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.find('.is-not-visible').isVisible()).toBe(false) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## O método isVueInstance 2 | 3 | ::: warning Aviso de Depreciação 4 | O método `isVueInstance` está depreciado e será removido nos futuros lançamentos. 5 | 6 | Testes que dependem da afirmação do método `isVueInstance` fornecem pouco ou nenhum valor. Nós sugerimos substituir eles por afirmações resolutas. 7 | 8 | Para manter esses testes, uma substituição válida para o método `isVueInstance()` é uma afirmação de veracidade (truthy) do `wrapper.find(...).vm`. 9 | ::: 10 | 11 | Afirma que o `Wrapper` é uma instância de Vue. 12 | 13 | - **Retorna:** `{boolean}` 14 | 15 | - **Exemplo:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | expect(wrapper.isVueInstance()).toBe(true) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/name.md: -------------------------------------------------------------------------------- 1 | ## O método name 2 | 3 | ::: warning Aviso de Depreciação 4 | O método `name` está depreciado e será removido nos futuros lançamentos. Consulte o [vue-test-utils.vuejs.org/upgrading-to-v1/#name](https://vue-test-utils.vuejs.org/upgrading-to-v1/#name). 5 | ::: 6 | 7 | Retorna o nome do componente se o `Wrapper` (envolvedor) conter uma instância de Vue, ou nome da tag do nó do DOM do `Wrapper` se o `Wrapper` não conter uma instância de Vue. 8 | 9 | - **Retorna:** `{string}` 10 | 11 | - **Exemplo:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.name()).toBe('Foo') 19 | const p = wrapper.find('p') 20 | expect(p.name()).toBe('p') 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/overview.md: -------------------------------------------------------------------------------- 1 | ## O método overview 2 | 3 | ::: warning Aviso de Depreciação 4 | O método está depreciado e será removido nos futuros lançamentos. 5 | ::: 6 | 7 | Imprime um simples resumo do `Wrapper` (envolvedor). 8 | 9 | - **Exemplo:** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Component from './Component.vue' 14 | 15 | const wrapper = mount(Component) 16 | wrapper.overview() 17 | 18 | // Saída da consola 19 | /* 20 | Wrapper (Visible): 21 | 22 | Html: 23 |
24 |

My name is Tess Ting

25 |
26 | 27 | Data: { 28 | firstName: Tess, 29 | lastName: Ting 30 | } 31 | 32 | Computed: { 33 | fullName: Tess Ting' 34 | } 35 | 36 | Emitted: {', 37 | foo: [', 38 | 0: [ hello, world ], 39 | 1: [ bye, world ]' 40 | ], 41 | bar: [ 42 | 0: [ hey ]' 43 | ] 44 | } 45 | 46 | */ 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/props.md: -------------------------------------------------------------------------------- 1 | ## O método props 2 | 3 | Retorna o objeto de propriedades do `Wrapper` (envolvedor) do `vm` (modelo do vue). Se a `key` for fornecida, o valor para a `key` será retornado. 4 | 5 | **Nota que o `Wrapper` deve conter uma instância de Vue.** 6 | 7 | - **Argumentos:** 8 | 9 | - `{string} key` **opcional** 10 | 11 | - **Retorna:** `{[prop: string]: any} | any` 12 | 13 | - **Exemplo:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | const wrapper = mount(Foo, { 20 | propsData: { 21 | bar: 'baz' 22 | } 23 | }) 24 | expect(wrapper.props().bar).toBe('baz') 25 | expect(wrapper.props('bar')).toBe('baz') 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/setData.md: -------------------------------------------------------------------------------- 1 | ## O método setData 2 | 3 | Define os dados do `vm` (modelo do vue) do `Wrapper` (envolvedor). 4 | 5 | O `setData` funciona através da chamada recursiva do `Vue.set`. 6 | 7 | **Nota que o `Wrapper` deve conter uma instância de Vue.** 8 | 9 | - **Argumentos:** 10 | 11 | - `{Object} data` 12 | 13 | - **Exemplo:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | test('setData demo', async () => { 20 | const wrapper = mount(Foo) 21 | 22 | await wrapper.setData({ foo: 'bar' }) 23 | 24 | expect(wrapper.vm.foo).toBe('bar') 25 | }) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/pt/api/wrapper/text.md: -------------------------------------------------------------------------------- 1 | ## O método text 2 | 3 | Retorna o conteúdo do texto do `Wrapper` (envolvedor). 4 | 5 | - **Retorna:** `{string}` 6 | 7 | - **Exemplo:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.text()).toBe('bar') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/pt/guides/README.md: -------------------------------------------------------------------------------- 1 | # Guias 2 | 3 | !!!include(docs/pt/guides/getting-started.md)!!! 4 | !!!include(docs/pt/guides/common-tips.md)!!! 5 | !!!include(docs/pt/guides/dom-events.md)!!! 6 | !!!include(docs/pt/guides/testing-async-components.md)!!! 7 | !!!include(docs/pt/guides/using-with-typescript.md)!!! 8 | !!!include(docs/pt/guides/using-with-vue-router.md)!!! 9 | !!!include(docs/pt/guides/using-with-vuex.md)!!! 10 | -------------------------------------------------------------------------------- /docs/pt/installation/README.md: -------------------------------------------------------------------------------- 1 | # Instalação 2 | 3 | !!!include(docs/pt/installation/semantic-versioning.md)!!! 4 | !!!include(docs/pt/installation/using-with-jest.md)!!! 5 | !!!include(docs/pt/installation/using-other-test-runners.md)!!! 6 | -------------------------------------------------------------------------------- /docs/pt/installation/semantic-versioning.md: -------------------------------------------------------------------------------- 1 | ## Versionamento Semântico 2 | 3 | O Vue Test Utils segue o [Versionamento Semântico](https://semver.org/) dentro de todos os seus projetos oficiais para funcionalidades documentadas e comportamento. Para comportamento não documentado ou interior exposto, as mudanças são descritas dentro das [notas de lançamento](https://github.com/vuejs/vue-test-utils/releases). 4 | -------------------------------------------------------------------------------- /docs/ru/api/README.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | !!!include(docs/ru/api/mount.md)!!! 4 | !!!include(docs/ru/api/shallowMount.md)!!! 5 | !!!include(docs/ru/api/render.md)!!! 6 | !!!include(docs/ru/api/renderToString.md)!!! 7 | !!!include(docs/ru/api/selectors.md)!!! 8 | !!!include(docs/ru/api/createLocalVue.md)!!! 9 | !!!include(docs/ru/api/config.md)!!! 10 | -------------------------------------------------------------------------------- /docs/ru/api/components/README.md: -------------------------------------------------------------------------------- 1 | # Компоненты 2 | 3 | Vue Test Utils включает утилиты, которые вы можете использовать для создания заглушек компонентов. 4 | 5 | !!!include(docs/ru/api/components/RouterLinkStub.md)!!! 6 | -------------------------------------------------------------------------------- /docs/ru/api/components/RouterLinkStub.md: -------------------------------------------------------------------------------- 1 | ## RouterLinkStub 2 | 3 | Компонент для заглушки компонента Vue Router `router-link`. 4 | 5 | Вы можете использовать этот компонент для поиска компонента router-link в дереве рендеринга. 6 | 7 | - **Использование:** 8 | 9 | Чтобы установить его как заглушку в опциях монтирования: 10 | 11 | ```js 12 | import { mount, RouterLinkStub } from '@vue/test-utils' 13 | 14 | const wrapper = mount(Component, { 15 | stubs: { 16 | RouterLink: RouterLinkStub 17 | } 18 | }) 19 | expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path') 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/ru/api/createWrapper.md: -------------------------------------------------------------------------------- 1 | ## createWrapper(node [, options]) 2 | 3 | - **Аргументы:** 4 | 5 | - `{vm|HTMLElement} node` 6 | - `{Object} options` 7 | - `{Boolean} attachedToDocument` 8 | 9 | - **Возвращает:** 10 | 11 | - `{Wrapper}` 12 | 13 | - **Использование:** 14 | 15 | `createWrapper` создает `Wrapper` для смонтированного экземпляра Vue или HTML-элемента. 16 | 17 | ```js 18 | import { createWrapper } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const Constructor = Vue.extend(Foo) 22 | const vm = new Constructor().$mount() 23 | const wrapper = createWrapper(vm) 24 | expect(wrapper.vm.foo).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/at.md: -------------------------------------------------------------------------------- 1 | ## at(index) 2 | 3 | Возвращает `Wrapper` по указанному индексу `index`. Используется нумерация с нуля (т.е. первый элемент имеет индекс 0). 4 | 5 | - **Принимает:** 6 | 7 | - `{number} index` 8 | 9 | - **Возвращает:** `{Wrapper}` 10 | 11 | - **Пример:** 12 | 13 | ```js 14 | import { shallowMount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = shallowMount(Foo) 18 | const divArray = wrapper.findAll('div') 19 | const secondDiv = divArray.at(1) 20 | expect(secondDiv.is('p')).toBe(true) 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/contains.md: -------------------------------------------------------------------------------- 1 | ### contains(selector) 2 | 3 | Проверка, что каждая обёртка (`Wrapper`) в `WrapperArray` содержит селектор. 4 | 5 | Используйте любой корректный [селектор](../selectors.md). 6 | 7 | - **Принимает:** 8 | 9 | - `{string|Component} selector` 10 | 11 | - **Возвращает:** `{boolean}` 12 | 13 | - **Пример:** 14 | 15 | ```js 16 | import { shallowMount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | import Bar from './Bar.vue' 19 | 20 | const wrapper = shallowMount(Foo) 21 | const divArray = wrapper.findAll('div') 22 | expect(divArray.contains('p')).toBe(true) 23 | expect(divArray.contains(Bar)).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/destroy.md: -------------------------------------------------------------------------------- 1 | ## destroy() 2 | 3 | Уничтожает каждый `Wrapper` Vue в `WrapperArray`. 4 | 5 | - **Пример:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import Foo from './Foo.vue' 10 | 11 | const wrapper = mount(Foo) 12 | const divArray = wrapper.findAll('div') 13 | expect(divArray.contains('p')).toBe(true) 14 | divArray.destroy() 15 | expect(divArray.contains('p')).toBe(false) 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/filter.md: -------------------------------------------------------------------------------- 1 | ## filter(predicate) 2 | 3 | Фильтр `WrapperArray` с функцией предиката на объектах `Wrapper`. 4 | 5 | Поведение этого метода похоже на [Array.prototype.filter](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). 6 | 7 | - **Аргументы:** 8 | 9 | - `{function} predicate` 10 | 11 | - **Возвращает:** `{WrapperArray}` 12 | 13 | Новый экземпляр `WrapperArray`, содержащий экземпляры `Wrapper`, которые возвращают true для функции предиката. 14 | 15 | - **Пример:** 16 | 17 | ```js 18 | import { shallowMount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = shallowMount(Foo) 22 | const filteredDivArray = wrapper 23 | .findAll('div') 24 | .filter(w => !w.classes('filtered')) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/is.md: -------------------------------------------------------------------------------- 1 | ## is(selector) 2 | 3 | Проверка, что каждый `Wrapper` в `WrapperArray` DOM-узле или `vm` соответствует [селектору](../selectors.md). 4 | 5 | - **Принимает:** 6 | 7 | - `{string|Component} selector` 8 | 9 | - **Возвращает:** `{boolean}` 10 | 11 | - **Пример:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | const divArray = wrapper.find('div') 19 | expect(divArray.is('div')).toBe(true) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## isEmpty() 2 | 3 | Проверка, что каждый `Wrapper` в `WrapperArray` не содержит дочерних узлов. 4 | 5 | - **Возвращает:** `{boolean}` 6 | 7 | - **Пример:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | const divArray = wrapper.findAll('div') 15 | expect(divArray.isEmpty()).toBe(true) 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/isVisible.md: -------------------------------------------------------------------------------- 1 | ## isVisible() 2 | 3 | Утверждает, что каждый `Wrapper` в `WrapperArray` виден. 4 | 5 | Возвращает `false`, если по крайней мере для одного из элементов какой-либо предок имеет стили `display: none`, `visibility: hidden`, `opacity: 0`, аттрибут `hidden` или находится в свёрнутом элементе `
`. 6 | 7 | Это можно использовать для проверки, что компонент скрыт с помощью `v-show`. 8 | 9 | - **Возвращает:** `{boolean}` 10 | 11 | - **Пример:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false) 20 | expect(wrapper.findAll('.is-visible').isVisible()).toBe(true) 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## isVueInstance() 2 | 3 | Проверка, что каждый `Wrapper` в `WrapperArray` является экземпляром Vue. 4 | 5 | - **Возвращает:** `{boolean}` 6 | 7 | - **Пример:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | import Bar from './Bar.vue' 13 | 14 | const wrapper = mount(Foo) 15 | const barArray = wrapper.findAll(Bar) 16 | expect(barArray.isVueInstance()).toBe(true) 17 | ``` 18 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/setData.md: -------------------------------------------------------------------------------- 1 | ## setData(data) 2 | 3 | Устанавливает данные `Wrapper` `vm` на каждом `Wrapper` в `WrapperArray`. 4 | 5 | **Обратите внимание, что каждый `Wrapper` должен содержать экземпляр Vue.** 6 | 7 | - **Принимает:** 8 | 9 | - `{Object} data` 10 | 11 | - **Пример:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | test('setData demo', async () => { 19 | const wrapper = mount(Foo) 20 | const barArray = wrapper.findAll(Bar) 21 | await barArray.setData({ foo: 'bar' }) 22 | expect(barArray.at(0).vm.foo).toBe('bar') 23 | }) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/setMethods.md: -------------------------------------------------------------------------------- 1 | ## setMethods(methods) 2 | 3 | Устанавливает методы `Wrapper` `vm` и выполняет принудительное обновление каждого `Wrapper` в `WrapperArray`. 4 | 5 | **Обратите внимание, что каждый `Wrapper` должен содержать экземпляр Vue.** 6 | 7 | - **Принимает:** 8 | 9 | - `{Object} methods` 10 | 11 | - **Пример:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import sinon from 'sinon' 16 | import Foo from './Foo.vue' 17 | import Bar from './Bar.vue' 18 | 19 | const wrapper = mount(Foo) 20 | const barArray = wrapper.findAll(Bar) 21 | const clickMethodStub = sinon.stub() 22 | 23 | barArray.setMethods({ clickMethod: clickMethodStub }) 24 | barArray.at(0).trigger('click') 25 | expect(clickMethodStub.called).toBe(true) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/setProps.md: -------------------------------------------------------------------------------- 1 | ## setProps(props) 2 | 3 | Устанавливает входные параметры `Wrapper` `vm` и выполняет принудительное обновление каждого `Wrapper` в `WrapperArray`. 4 | 5 | **Обратите внимание, что каждый `Wrapper` должен содержать экземпляр Vue.** 6 | 7 | - **Принимает:** 8 | 9 | - `{Object} props` 10 | 11 | - **Пример:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | test('setProps demo', async () => { 19 | const wrapper = mount(Foo) 20 | const barArray = wrapper.findAll(Bar) 21 | await barArray.setProps({ foo: 'bar' }) 22 | expect(barArray.at(0).vm.foo).toBe('bar') 23 | }) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper-array/trigger.md: -------------------------------------------------------------------------------- 1 | ## trigger(eventType [, options ]) 2 | 3 | Генерирует событие на каждом `Wrapper` в `WrapperArray` DOM-узле. 4 | 5 | **Обратите внимание, что каждый `Wrapper` должен содержать экземпляр Vue.** 6 | 7 | - **Принимает:** 8 | 9 | - `{string} eventType` **обязательный** 10 | - `{Object} options` **опциональный** 11 | 12 | - **Пример:** 13 | 14 | ```js 15 | import { mount } from '@vue/test-utils' 16 | import sinon from 'sinon' 17 | import Foo from './Foo.vue' 18 | 19 | test('trigger demo', async () => { 20 | const clickHandler = sinon.stub() 21 | const wrapper = mount(Foo, { 22 | propsData: { clickHandler } 23 | }) 24 | 25 | const divArray = wrapper.findAll('div') 26 | await divArray.trigger('click') 27 | expect(clickHandler.called).toBe(true) 28 | }) 29 | ``` 30 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/attributes.md: -------------------------------------------------------------------------------- 1 | ## attributes() 2 | 3 | Возвращает объект атрибутов DOM-узла `Wrapper`. Если аргумент `key` присутствует, метод вернёт значение атрибута, заданного через `key`. 4 | 5 | - **Аргументы:** 6 | 7 | - `{string} key` **опционально** 8 | 9 | - **Возвращает:** `{[attribute: string]: any}` 10 | 11 | - **Пример:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.attributes().id).toBe('foo') 19 | expect(wrapper.attributes('id')).toBe('foo') 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/classes.md: -------------------------------------------------------------------------------- 1 | ## classes() 2 | 3 | Возвращает классы DOM-узла `Wrapper`. 4 | 5 | Возвращает массив имён классов. Либо `true`/`false` если передано имя класса. 6 | 7 | - **Аргументы:** 8 | 9 | - `{string} className` **опционально** 10 | 11 | - **Возвращает:** `Array<{string}>` 12 | 13 | - **Пример:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | const wrapper = mount(Foo) 20 | expect(wrapper.classes()).toContain('bar') 21 | expect(wrapper.classes('bar')).toBe(true) 22 | ``` 23 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/contains.md: -------------------------------------------------------------------------------- 1 | ## contains(selector) 2 | 3 | Проверка, что `Wrapper` содержит элемент или компонент, соответствующий [селектору](../selectors.md). 4 | 5 | - **Принимает:** 6 | 7 | - `{string|Component} selector` 8 | 9 | - **Возвращает:** `{boolean}` 10 | 11 | - **Пример:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | expect(wrapper.contains('p')).toBe(true) 20 | expect(wrapper.contains(Bar)).toBe(true) 21 | ``` 22 | 23 | - **См. также:** [Селекторы](../selectors.md) 24 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/destroy.md: -------------------------------------------------------------------------------- 1 | ## destroy() 2 | 3 | Уничтожает экземпляр компонента Vue. 4 | 5 | - **Пример:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import sinon from 'sinon' 10 | 11 | const spy = sinon.stub() 12 | mount({ 13 | render: null, 14 | destroyed() { 15 | spy() 16 | } 17 | }).destroy() 18 | expect(spy.calledOnce).toBe(true) 19 | ``` 20 | 21 | Если опция `attachToDocument` была `true` при монтировании, DOM элементы компонента будут также удалены из документа. 22 | 23 | Для функциональных компонентов, `destroy` только удаляет отрисованные элементы DOM из документа. 24 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/emittedByOrder.md: -------------------------------------------------------------------------------- 1 | ## emittedByOrder() 2 | 3 | Возвращает массив, содержащий вызванные пользовательские события в `Wrapper` `vm`. 4 | 5 | - **Возвращает:** `Array<{ name: string, args: Array }>` 6 | 7 | - **Пример:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | 12 | const wrapper = mount(Component) 13 | 14 | wrapper.vm.$emit('foo') 15 | wrapper.vm.$emit('bar', 123) 16 | 17 | /* 18 | wrapper.emittedByOrder() возвращает следующий массив: 19 | [ 20 | { name: 'foo', args: [] }, 21 | { name: 'bar', args: [123] } 22 | ] 23 | */ 24 | 25 | // проверка, что события были вызваны в определённом порядке 26 | expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar']) 27 | ``` 28 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/exists.md: -------------------------------------------------------------------------------- 1 | ## exists() 2 | 3 | Проверка, что `Wrapper` или `WrapperArray` существует. 4 | 5 | Возвращает `false`, если вызывается на пустом `Wrapper` или `WrapperArray`. 6 | 7 | - **Возвращает:** `{boolean}` 8 | 9 | - **Пример:** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Foo from './Foo.vue' 14 | 15 | const wrapper = mount(Foo) 16 | expect(wrapper.exists()).toBe(true) 17 | expect(wrapper.find('does-not-exist').exists()).toBe(false) 18 | expect(wrapper.findAll('div').exists()).toBe(true) 19 | expect(wrapper.findAll('does-not-exist').exists()).toBe(false) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/find.md: -------------------------------------------------------------------------------- 1 | ## find(selector) 2 | 3 | Возвращает `Wrapper` первого DOM-узла или компонента Vue, соответствующего селектору. 4 | 5 | Используйте любой корректный [селектор](../selectors.md). 6 | 7 | - **Принимает:** 8 | 9 | - `{string|Component} selector` 10 | 11 | - **Возвращает:** `{Wrapper}` 12 | 13 | - **Пример:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | import Bar from './Bar.vue' 19 | 20 | const wrapper = mount(Foo) 21 | 22 | const div = wrapper.find('div') 23 | expect(div.is('div')).toBe(true) 24 | 25 | const bar = wrapper.find(Bar) 26 | expect(bar.is(Bar)).toBe(true) 27 | 28 | const barByName = wrapper.find({ name: 'bar' }) 29 | expect(barByName.is(Bar)).toBe(true) 30 | 31 | const fooRef = wrapper.find({ ref: 'foo' }) 32 | expect(fooRef.is(Foo)).toBe(true) 33 | ``` 34 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/findAll.md: -------------------------------------------------------------------------------- 1 | ## findAll(selector) 2 | 3 | Возвращает [`WrapperArray`](../wrapper-array/). 4 | 5 | Используйте любой корректный [селектор](../selectors.md). 6 | 7 | - **Принимает:** 8 | 9 | - `{string|Component} selector` 10 | 11 | - **Возвращает:** `{WrapperArray}` 12 | 13 | - **Пример:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | import Bar from './Bar.vue' 19 | 20 | const wrapper = mount(Foo) 21 | const div = wrapper.findAll('div').at(0) 22 | expect(div.is('div')).toBe(true) 23 | const bar = wrapper.findAll(Bar).at(0) 24 | expect(bar.is(Bar)).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/html.md: -------------------------------------------------------------------------------- 1 | ## html() 2 | 3 | Возвращает HTML-код DOM-узла `Wrapper`а в виде строки. 4 | 5 | - **Возвращает:** `{string}` 6 | 7 | - **Пример:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.html()).toBe('

Foo

') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/is.md: -------------------------------------------------------------------------------- 1 | ## is(selector) 2 | 3 | Проверяет, что DOM-элемент `Wrapper` или `vm` соответствуют [селектору](../selectors.md). 4 | 5 | - **Принимает:** 6 | 7 | - `{string|Component} selector` 8 | 9 | - **Возвращает:** `{boolean}` 10 | 11 | - **Пример:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.is('div')).toBe(true) 19 | ``` 20 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## isEmpty() 2 | 3 | Проверяет, что `Wrapper` не содержит дочерних узлов. 4 | 5 | - **Возвращает:** `{boolean}` 6 | 7 | - **Пример:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.isEmpty()).toBe(true) 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/isVisible.md: -------------------------------------------------------------------------------- 1 | ## isVisible() 2 | 3 | Проверяет, что `Wrapper` виден. 4 | 5 | Возвращает `false`, если какой-либо предок имеет стили `display: none`, `visibility: hidden`, `opacity: 0`, аттрибут `hidden` или находится в свёрнутом элементе `
`. 6 | 7 | Это можно использовать для проверки, что компонент скрыт с помощью `v-show`. 8 | 9 | - **Возвращает:** `{boolean}` 10 | 11 | - **Пример:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.find('.is-not-visible').isVisible()).toBe(false) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## isVueInstance() 2 | 3 | Проверка, что `Wrapper` является экземпляром Vue. 4 | 5 | - **Возвращает:** `{boolean}` 6 | 7 | - **Пример:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.isVueInstance()).toBe(true) 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/name.md: -------------------------------------------------------------------------------- 1 | ## name() 2 | 3 | Возвращает имя компонента, если `Wrapper` содержит экземпляр Vue, или имя тега DOM-узла `Wrapper`, если `Wrapper` не содержит экземпляр Vue. 4 | 5 | - **Возвращает:** `{string}` 6 | 7 | - **Пример:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.name()).toBe('Foo') 15 | const p = wrapper.find('p') 16 | expect(p.name()).toBe('p') 17 | ``` 18 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/props.md: -------------------------------------------------------------------------------- 1 | ## props() 2 | 3 | Возвращает объект с входными параметрами `vm` для `Wrapper`. Если `key` передан, метод вернёт значения свойства с именем `key`. 4 | 5 | **Обратите внимание что Wrapper должен содержать экземпляр Vue.** 6 | 7 | - **Принимает:** 8 | 9 | - `{string} key` **опционально** 10 | 11 | - **Возвращает:** `{[prop: string]: any}` 12 | 13 | - **Пример:** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | const wrapper = mount(Foo, { 20 | propsData: { 21 | bar: 'baz' 22 | } 23 | }) 24 | expect(wrapper.props().bar).toBe('baz') 25 | expect(wrapper.props('bar')).toBe('baz') 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/setData.md: -------------------------------------------------------------------------------- 1 | ## setData(data) 2 | 3 | Устанавливает данные `Wrapper` `vm`. 4 | 5 | setData работает путём рекурсивного вызова Vue.set. 6 | 7 | **Обратите внимание, что `Wrapper` должен содержать экземпляр Vue.** 8 | 9 | setData работает путём слияния существующих свойств, за исключением массивов, которые перезаписываются. 10 | 11 | - **Принимает:** 12 | 13 | - `{Object} data` 14 | 15 | - **Пример:** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | test('setData demo', async () => { 22 | const wrapper = mount(Foo) 23 | 24 | await wrapper.setData({ foo: 'bar' }) 25 | 26 | expect(wrapper.vm.foo).toBe('bar') 27 | }) 28 | ``` 29 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/setMethods.md: -------------------------------------------------------------------------------- 1 | ## setMethods(methods) 2 | 3 | Устанавливает методы `Wrapper` `vm` и выполняет принудительное обновление. 4 | 5 | **Обратите внимание, что `Wrapper` должен содержать экземпляр Vue.** 6 | 7 | - **Принимает:** 8 | 9 | - `{Object} methods` 10 | 11 | - **Пример:** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import sinon from 'sinon' 16 | import Foo from './Foo.vue' 17 | 18 | const wrapper = mount(Foo) 19 | const clickMethodStub = sinon.stub() 20 | 21 | wrapper.setMethods({ clickMethod: clickMethodStub }) 22 | wrapper.find('button').trigger('click') 23 | expect(clickMethodStub.called).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/setSelected.md: -------------------------------------------------------------------------------- 1 | ## setSelected() 2 | 3 | Выбирает элемент пункта списка и обновляет связанные данные `v-model`. 4 | 5 | - **Пример:** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import Foo from './Foo.vue' 10 | 11 | test('setSelected demo', async () => { 12 | const wrapper = mount(Foo) 13 | const options = wrapper.find('select').findAll('option') 14 | 15 | await options.at(1).setSelected() 16 | 17 | expect(wrapper.find('option:checked').element.value).toBe('bar') 18 | }) 19 | ``` 20 | 21 | - **Примечание:** 22 | 23 | Когда вы пытаетесь установить значение в состояние через `v-model` с помощью `option.element.selected = true; parentSelect.trigger('input')`, `v-model` не вызывается. `v-model` генерируется событием `change`. 24 | 25 | `option.setSelected()` — псевдоним для следующего кода. 26 | 27 | ```js 28 | option.element.selected = true 29 | parentSelect.trigger('change') 30 | ``` 31 | -------------------------------------------------------------------------------- /docs/ru/api/wrapper/text.md: -------------------------------------------------------------------------------- 1 | ## text() 2 | 3 | Возвращает текстовое содержимое `Wrapper`. 4 | 5 | - **Возвращает:** `{string}` 6 | 7 | - **Пример:** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.text()).toBe('bar') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/ru/guides/README.md: -------------------------------------------------------------------------------- 1 | # Руководства 2 | 3 | !!!include(docs/ru/guides/getting-started.md)!!! 4 | !!!include(docs/ru/guides/common-tips.md)!!! 5 | !!!include(docs/ru/guides/dom-events.md)!!! 6 | !!!include(docs/ru/guides/testing-async-components.md)!!! 7 | !!!include(docs/guides/using-with-typescript.md)!!! 8 | !!!include(docs/ru/guides/using-with-vue-router.md)!!! 9 | !!!include(docs/ru/guides/using-with-vuex.md)!!! 10 | -------------------------------------------------------------------------------- /docs/ru/installation/README.md: -------------------------------------------------------------------------------- 1 | # сборка 2 | 3 | !!!include(docs/ru/installation/choosing-a-test-runner.md)!!! 4 | !!!include(docs/ru/installation/testing-single-file-components-with-jest.md)!!! 5 | !!!include(docs/ru/installation/testing-single-file-components-with-mocha-webpack.md)!!! 6 | !!!include(docs/ru/installation/testing-single-file-components-with-karma.md)!!! 7 | -------------------------------------------------------------------------------- /docs/zh/api/README.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | !!!include(docs/zh/api/mount.md)!!! 4 | !!!include(docs/zh/api/shallowMount.md)!!! 5 | !!!include(docs/zh/api/render.md)!!! 6 | !!!include(docs/zh/api/renderToString.md)!!! 7 | !!!include(docs/zh/api/selectors.md)!!! 8 | !!!include(docs/zh/api/createLocalVue.md)!!! 9 | !!!include(docs/zh/api/createWrapper.md)!!! 10 | !!!include(docs/zh/api/config.md)!!! 11 | !!!include(docs/zh/api/enableAutoDestroy.md)!!! 12 | -------------------------------------------------------------------------------- /docs/zh/api/components/README.md: -------------------------------------------------------------------------------- 1 | # 组件 2 | 3 | Vue Test Utils 包含了用做存根的实用组件。 4 | 5 | !!!include(docs/zh/api/components/RouterLinkStub.md)!!! 6 | -------------------------------------------------------------------------------- /docs/zh/api/components/RouterLinkStub.md: -------------------------------------------------------------------------------- 1 | ## RouterLinkStub 2 | 3 | 一个用来存根 Vue Router 中 `router-link` 组件的组件。 4 | 5 | 你可以在渲染树中使用这个组件查找一个 `router-link` 组件。 6 | 7 | - **用法：** 8 | 9 | 在挂载选项中将其设置为一个存根： 10 | 11 | ```js 12 | import { mount, RouterLinkStub } from '@vue/test-utils' 13 | 14 | const wrapper = mount(Component, { 15 | stubs: { 16 | RouterLink: RouterLinkStub 17 | } 18 | }) 19 | expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path') 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/zh/api/createWrapper.md: -------------------------------------------------------------------------------- 1 | ## createWrapper(node [, options]) 2 | 3 | - **参数：** 4 | 5 | - `{vm|HTMLElement} node` 6 | - `{Object} options` 7 | - `{Boolean} attachedToDocument` 8 | 9 | - **返回值：** 10 | 11 | - `{Wrapper}` 12 | 13 | - **用法：** 14 | 15 | `createWrapper` 为一个被挂载的 Vue 实例或一个 HTML 元素创建一个 `Wrapper`。 16 | 17 | ```js 18 | import { createWrapper } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const Constructor = Vue.extend(Foo) 22 | const vm = new Constructor().$mount() 23 | const wrapper = createWrapper(vm) 24 | expect(wrapper.vm.foo).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/zh/api/enableAutoDestroy.md: -------------------------------------------------------------------------------- 1 | ## enableAutoDestroy(hook) 2 | 3 | - **参数：** 4 | 5 | - `{Function} hook` 6 | 7 | - **用法：** 8 | 9 | `enableAutoDestroy` 将会使用被传入的该钩子函数 (例如 [`afterEach`](https://jestjs.io/docs/en/api#aftereachfn-timeout)) 销毁所有被创建的 `Wrapper` 实例。在调用这个方法之后，你可以通过调用 `resetAutoDestroyState` 方法恢复到默认行为。 10 | 11 | ```js 12 | import { enableAutoDestroy, mount } from '@vue/test-utils' 13 | import Foo from './Foo.vue' 14 | 15 | // 将会在每个测试之后运行 `wrapper.destroy()` 16 | enableAutoDestroy(afterEach) 17 | 18 | describe('Foo', () => { 19 | it('renders a div', () => { 20 | const wrapper = mount(Foo) 21 | expect(wrapper.contains('div')).toBe(true) 22 | // 不需要在此运行 `wrapper.destroy()` 23 | }) 24 | }) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper-array/at.md: -------------------------------------------------------------------------------- 1 | ## at 2 | 3 | 返回第 `index` 个传入的 `Wrapper` 。数字从 0 开始计数 (比如第一个项目的索引值是 0)。如果 `index` 是负数，则从最后一个元素往回计数 (比如最后一个项目的索引值是 -1)。 4 | 5 | - **参数：** 6 | 7 | - `{number} index` 8 | 9 | - **返回值：**`{Wrapper}` 10 | 11 | - **示例：** 12 | 13 | ```js 14 | import { shallowMount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = shallowMount(Foo) 18 | const divArray = wrapper.findAll('div') 19 | 20 | const secondDiv = divArray.at(1) 21 | expect(secondDiv.is('div')).toBe(true) 22 | 23 | const lastDiv = divArray.at(-1) 24 | expect(lastDiv.is('div')).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper-array/contains.md: -------------------------------------------------------------------------------- 1 | ### contains 2 | 3 | 断言 `WrapperArray` 的每个包裹器都包含选择器。 4 | 5 | 可使用任何有效的[选择器](../selectors.md)。 6 | 7 | - **参数：** 8 | 9 | - `{string|Component} selector` 10 | 11 | - **返回值：**`{boolean}` 12 | 13 | - **示例：** 14 | 15 | ```js 16 | import { shallowMount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | import Bar from './Bar.vue' 19 | 20 | const wrapper = shallowMount(Foo) 21 | const divArray = wrapper.findAll('div') 22 | expect(divArray.contains('p')).toBe(true) 23 | expect(divArray.contains(Bar)).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper-array/destroy.md: -------------------------------------------------------------------------------- 1 | ## destroy 2 | 3 | 销毁 `WrapperArray` 中的每个 Vue `Wrapper`。 4 | 5 | - **示例：** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import Foo from './Foo.vue' 10 | 11 | const wrapper = mount(Foo) 12 | const divArray = wrapper.findAll('div') 13 | expect(divArray.contains('p')).toBe(true) 14 | divArray.destroy() 15 | expect(divArray.contains('p')).toBe(false) 16 | ``` 17 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper-array/filter.md: -------------------------------------------------------------------------------- 1 | ## filter 2 | 3 | 用一个针对 `Wrapper` 的断言函数过滤 `WrapperArray`。 4 | 5 | 该方法的行为和 [Array.prototype.filter](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 相同。 6 | 7 | - **参数：** 8 | 9 | - `{function} predicate` 10 | 11 | - **返回值：** `{WrapperArray}` 12 | 13 | 一个新的 `WrapperArray` 实例，该实例包含了经过断言函数处理后返回真值的 `Wrapper` 实例。 14 | 15 | - **示例：** 16 | 17 | ```js 18 | import { shallowMount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = shallowMount(Foo) 22 | const filteredDivArray = wrapper 23 | .findAll('div') 24 | .filter(w => !w.hasClass('filtered')) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper-array/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## isEmpty 2 | 3 | ::: warning 废弃警告 4 | `isEmpty` 已经被废弃并会在未来的发布中被移除。 5 | 6 | 可以考虑一个诸如 [jest-dom](https://github.com/testing-library/jest-dom#tobeempty) 中提供的自定义匹配。 7 | 8 | 当使用 `findComponent` 时，可以通过 `findComponent(Comp).element` 访问其 DOM 元素。 9 | ::: 10 | 11 | 断言 `WrapperArray` 的每个 `Wrapper` 都不包含子节点。 12 | 13 | - **返回值：**`{boolean}` 14 | 15 | - **示例：** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | const divArray = wrapper.findAll('div') 23 | expect(divArray.isEmpty()).toBe(true) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper-array/isVisible.md: -------------------------------------------------------------------------------- 1 | ## isVisible 2 | 3 | 断言每个 `WrapperArray` 中的每个 `Wrapper` 是否可见。 4 | 5 | 如果至少一个元素的祖先拥有 `display: none` 或 `visibility: hidden` 样式则返回 `false`。 6 | 7 | 这可以用于断言一个组件是否被 `v-show` 所隐藏。 8 | 9 | - **返回值：** `{boolean}` 10 | 11 | - **示例：** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false) 20 | expect(wrapper.findAll('.is-visible').isVisible()).toBe(true) 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper-array/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## isVueInstance 2 | 3 | ::: warning 废弃警告 4 | `isVueInstance` 已经被废弃并会在未来的发布中被移除。 5 | 6 | 依赖 `isVueInstance` 断言的测试并没有特别大的意义，我们建议将与之相关的断言替换为更有目的性的断言。 7 | 8 | 为了保留这些测试，一个替换 `isVueInstance()` 的可行方式是对 `wrapper.find(...).vm` 的 truthy 断言。 9 | ::: 10 | 11 | 断言 `WrapperArray` 的每个 `Wrapper` 都是 Vue 实例。 12 | 13 | - **返回值：**`{boolean}` 14 | 15 | - **示例：** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | import Bar from './Bar.vue' 21 | 22 | const wrapper = mount(Foo) 23 | const barArray = wrapper.findAll(Bar) 24 | expect(barArray.isVueInstance()).toBe(true) 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper-array/setData.md: -------------------------------------------------------------------------------- 1 | ## setData 2 | 3 | 为 `WrapperArray` 的每个 `Wrapper` `vm` 都设置数据。 4 | 5 | **注意：该包裹器必须包含一个 Vue 实例。** 6 | 7 | - **参数：** 8 | 9 | - `{Object} data` 10 | 11 | - **示例：** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | test('setData demo', async () => { 19 | const wrapper = mount(Foo) 20 | const barArray = wrapper.findAll(Bar) 21 | await barArray.setData({ foo: 'bar' }) 22 | expect(barArray.at(0).vm.foo).toBe('bar') 23 | }) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper-array/setProps.md: -------------------------------------------------------------------------------- 1 | ## setProps 2 | 3 | 为 `WrapperArray` 的每个 `Wrapper` `vm` 都设置 prop 并强行更新。 4 | 5 | **注意：该包裹器必须包含一个 Vue 实例。** 6 | 7 | - **参数：** 8 | 9 | - `{Object} props` 10 | 11 | - **示例：** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | test('setProps demo', async () => { 19 | const wrapper = mount(Foo) 20 | const barArray = wrapper.findAll(Bar) 21 | await barArray.setProps({ foo: 'bar' }) 22 | expect(barArray.at(0).vm.foo).toBe('bar') 23 | }) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper-array/setValue.md: -------------------------------------------------------------------------------- 1 | ## setValue 2 | 3 | 该方法是接下来这段代码的别名： 4 | 5 | ```js 6 | wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value)) 7 | ``` 8 | 9 | - **参数：** 10 | 11 | - `{any} value` 12 | 13 | - **示例：** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | 18 | const wrapper = mount({ 19 | data() { 20 | return { 21 | t1: '', 22 | t2: '' 23 | } 24 | }, 25 | template: ` 26 |
27 | 28 | 29 |
` 30 | }) 31 | 32 | test('setValue demo', async () => { 33 | const wrapperArray = wrapper.findAll('.foo') 34 | expect(wrapper.vm.t1).toEqual('') 35 | expect(wrapper.vm.t2).toEqual('') 36 | await wrapperArray.setValue('foo') 37 | expect(wrapper.vm.t1).toEqual('foo') 38 | expect(wrapper.vm.t2).toEqual('foo') 39 | }) 40 | ``` 41 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper-array/trigger.md: -------------------------------------------------------------------------------- 1 | ## trigger 2 | 3 | 为 `WrapperArray` 的每个 `Wrapper` DOM 节点都触发一个[事件](../../guides/dom-events.md#触发事件)。 4 | 5 | **注意：该包裹器必须包含一个 Vue 实例。** 6 | 7 | - **参数：** 8 | 9 | - `{string} eventType` **必填** 10 | - `{Object} options` **可选** 11 | 12 | - **示例：** 13 | 14 | ```js 15 | import { mount } from '@vue/test-utils' 16 | import sinon from 'sinon' 17 | import Foo from './Foo.vue' 18 | 19 | test('trigger demo', async () => { 20 | const clickHandler = sinon.stub() 21 | const wrapper = mount(Foo, { 22 | propsData: { clickHandler } 23 | }) 24 | 25 | const divArray = wrapper.findAll('div') 26 | await divArray.trigger('click') 27 | expect(clickHandler.called).toBe(true) 28 | }) 29 | ``` 30 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/attributes.md: -------------------------------------------------------------------------------- 1 | ## attributes 2 | 3 | 返回 `Wrapper` DOM 节点的特性对象。如果提供了 `key`，则返回这个 `key` 对应的值。 4 | 5 | - **参数：** 6 | 7 | - `{string} key` **可选的** 8 | 9 | - **返回值：**`{[attribute: string]: any} | string` 10 | 11 | - **示例：** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.attributes().id).toBe('foo') 19 | expect(wrapper.attributes('id')).toBe('foo') 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/classes.md: -------------------------------------------------------------------------------- 1 | ## classes 2 | 3 | 返回 `Wrapper` DOM 节点的 class。 4 | 5 | 返回 class 名称的数组。或在提供 class 名的时候返回一个布尔值。 6 | 7 | - **参数：** 8 | 9 | - `{string} className` **可选的** 10 | 11 | - **返回值：**`Array<{string}> | boolean` 12 | 13 | - **示例：** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | const wrapper = mount(Foo) 20 | expect(wrapper.classes()).toContain('bar') 21 | expect(wrapper.classes('bar')).toBe(true) 22 | ``` 23 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/contains.md: -------------------------------------------------------------------------------- 1 | ## contains 2 | 3 | 判断 `Wrapper` 是否包含了一个匹配[选择器](../selectors.md)的元素或组件。 4 | 5 | - **参数：** 6 | 7 | - `{string|Component} selector` 8 | 9 | - **返回值：** `{boolean}` 10 | 11 | - **示例：** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | expect(wrapper.contains('p')).toBe(true) 20 | expect(wrapper.contains(Bar)).toBe(true) 21 | ``` 22 | 23 | - **延伸阅读：**[选择器](../selectors.md) 24 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/destroy.md: -------------------------------------------------------------------------------- 1 | ## destroy 2 | 3 | 销毁一个 Vue 组件实例。 4 | 5 | - **示例：** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import sinon from 'sinon' 10 | 11 | const spy = sinon.stub() 12 | mount({ 13 | render: null, 14 | destroyed() { 15 | spy() 16 | } 17 | }).destroy() 18 | expect(spy.calledOnce).toBe(true) 19 | ``` 20 | 21 | 如果挂载时 `attachTo` 或 `attachToDocument` 选项导致组件被挂载到文档，则组件的 DOM 元素也将会从文档中被移除。 22 | 23 | 对于函数式组件来说，`destroy` 只会从文档中移除渲染出来的 DOM 元素。 24 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/emittedByOrder.md: -------------------------------------------------------------------------------- 1 | ## emittedByOrder 2 | 3 | ::: warning 废弃警告 4 | `emittedByOrder` 已经被废弃并会在未来的发布中被移除。 5 | 6 | 请换用 `wrapper.emitted`。 7 | ::: 8 | 9 | 返回一个包含由 `Wrapper` `vm` 触发的自定义事件的数组。 10 | 11 | - **返回值：**`Array<{ name: string, args: Array }>` 12 | 13 | - **示例：** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | 18 | const wrapper = mount(Component) 19 | 20 | wrapper.vm.$emit('foo') 21 | wrapper.vm.$emit('bar', 123) 22 | 23 | /* 24 | `wrapper.emittedByOrder() 返回如下数组： 25 | [ 26 | { name: 'foo', args: [] }, 27 | { name: 'bar', args: [123] } 28 | ] 29 | */ 30 | 31 | // 断言事件的触发顺序 32 | expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar']) 33 | ``` 34 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/exists.md: -------------------------------------------------------------------------------- 1 | ## exists 2 | 3 | 断言 `Wrapper` 或 `WrapperArray` 是否存在。 4 | 5 | 如果被一个空 `Wrapper` 或 `WrapperArray` 调用则返回 `false`。 6 | 7 | - **返回值：**`{boolean}` 8 | 9 | - **示例：** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Foo from './Foo.vue' 14 | 15 | const wrapper = mount(Foo) 16 | expect(wrapper.exists()).toBe(true) 17 | expect(wrapper.find('does-not-exist').exists()).toBe(false) 18 | expect(wrapper.findAll('div').exists()).toBe(true) 19 | expect(wrapper.findAll('does-not-exist').exists()).toBe(false) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/find.md: -------------------------------------------------------------------------------- 1 | ## find 2 | 3 | ::: warning 废弃警告 4 | 使用 `find` 搜索组件的方式已经被废弃并会被移除。请换用 [`findComponent`](./findComponent.md)。 5 | ::: 6 | 7 | 返回匹配选择器的第一个 DOM 节点或 Vue 组件的 `Wrapper`。 8 | 9 | 可以使用任何有效的 DOM 选择器 (使用 `querySelector` 语法)。 10 | 11 | - **参数：** 12 | 13 | - `{string} selector` 14 | 15 | - **返回值：**`{Wrapper}` 16 | 17 | - **示例：** 18 | 19 | ```js 20 | import { mount } from '@vue/test-utils' 21 | import Foo from './Foo.vue' 22 | import Bar from './Bar.vue' 23 | 24 | const wrapper = mount(Foo) 25 | 26 | const div = wrapper.find('div') 27 | expect(div.exists()).toBe(true) 28 | 29 | const byId = wrapper.find('#bar') 30 | expect(byId.element.id).toBe('bar') 31 | ``` 32 | 33 | - **注意：** 34 | 35 | - 你可以链式调用 `find`： 36 | 37 | ```js 38 | const button = wrapper.find({ ref: 'testButton' }) 39 | expect(button.find('.icon').exists()).toBe(true) 40 | ``` 41 | 42 | - **延伸阅读：**[get](./get.md) 43 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/findAll.md: -------------------------------------------------------------------------------- 1 | ## findAll 2 | 3 | ::: warning 废弃警告 4 | 使用 `findAll` 搜索组件的方式已经被废弃并会被移除。请换用 `findAllComponents`。 5 | ::: 6 | 7 | 返回一个 [`WrapperArray`](../wrapper-array/)。 8 | 9 | 可以使用任何有效的[选择器](../selectors.md)。 10 | 11 | - **参数：** 12 | 13 | - `{string|Component} selector` 14 | 15 | - **返回值：**`{WrapperArray}` 16 | 17 | - **示例：** 18 | 19 | ```js 20 | import { mount } from '@vue/test-utils' 21 | import Foo from './Foo.vue' 22 | import Bar from './Bar.vue' 23 | 24 | const wrapper = mount(Foo) 25 | 26 | const div = wrapper.findAll('div').at(0) 27 | expect(div.is('div')).toBe(true) 28 | 29 | const bar = wrapper.findAll(Bar).at(0) // 已废弃的用法 30 | expect(bar.is(Bar)).toBe(true) 31 | ``` 32 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/findAllComponents.md: -------------------------------------------------------------------------------- 1 | ## findAllComponents 2 | 3 | 为所有匹配的 Vue 组件返回一个 [`WrapperArray`](../wrapper-array/)。 4 | 5 | - **参数：** 6 | 7 | - `{Component|ref|name} selector` 8 | 9 | - **返回值：** `{WrapperArray}` 10 | 11 | - **示例：** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | const bar = wrapper.findAllComponents(Bar).at(0) 20 | expect(bar.exists()).toBeTruthy() 21 | const bars = wrapper.findAllComponents(Bar) 22 | expect(bars).toHaveLength(1) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/findComponent.md: -------------------------------------------------------------------------------- 1 | ## findComponent 2 | 3 | 返回第一个匹配的 Vue 组件的 `Wrapper`。 4 | 5 | - **参数：** 6 | 7 | - `{Component|ref|name} selector` 8 | 9 | - **返回值：** `{Wrapper}` 10 | 11 | - **示例：** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | import Bar from './Bar.vue' 17 | 18 | const wrapper = mount(Foo) 19 | 20 | const bar = wrapper.findComponent(Bar) // => 通过组件实例找到 Bar 21 | expect(bar.exists()).toBe(true) 22 | const barByName = wrapper.findComponent({ name: 'bar' }) // => 通过 `name` 找到 Bar 23 | expect(barByName.exists()).toBe(true) 24 | const barRef = wrapper.findComponent({ ref: 'bar' }) // => 通过 `ref` 找到 Bar 25 | expect(barRef.exists()).toBe(true) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/get.md: -------------------------------------------------------------------------------- 1 | ## get 2 | 3 | ::: warning 废弃警告 4 | 使用 `get` 搜索组件的方式已经被废弃并会被移除。请换用 [`getComponent`](./getComponent.md)。 5 | ::: 6 | 7 | 和 [find](./find.md) 工作起来一样，但是如果未匹配到给定的选择器时会抛出错误。当搜索一个可能不存在的元素时你应该使用 `find`。当获取一个应该存在的元素时你应该使用这个方法，并且如果没有找到的话它会提供一则友好的错误信息。 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | 12 | const wrapper = mount(Foo) 13 | 14 | // 和 `wrapper.find` 相似。 15 | // 如果 `get` 没有找到任何元素将会抛出一个而错误。`find` 则不会做任何事。 16 | expect(wrapper.get('.does-exist')) 17 | 18 | expect(() => wrapper.get('.does-not-exist')) 19 | .to.throw() 20 | .with.property( 21 | 'message', 22 | 'Unable to find .does-not-exist within:
the actual DOM here...
' 23 | ) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/getComponent.md: -------------------------------------------------------------------------------- 1 | ## getComponent 2 | 3 | 和 [findComponent](./findComponent.md) 工作起来一样，但是如果未匹配到给定的选择器时会抛出错误。当搜索一个可能不存在的元素时你应该使用 `findComponent`。当获取一个应该存在的元素时你应该使用这个方法，并且如果没有找到的话它会提供一则友好的错误信息。 4 | 5 | ```js 6 | import { mount } from '@vue/test-utils' 7 | import Foo from './Foo.vue' 8 | import Bar from './Bar.vue' 9 | 10 | const wrapper = mount(Foo) 11 | 12 | // 和 `wrapper.findComponent` 相似。 13 | // 如果 `getComponent` 没有找到任何元素将会抛出一个而错误。`findComponent` 则不会做任何事。 14 | expect(wrapper.getComponent(Bar)) // => gets Bar by component instance 15 | expect(wrapper.getComponent({ name: 'bar' })) // => gets Bar by `name` 16 | expect(wrapper.getComponent({ ref: 'bar' })) // => gets Bar by `ref` 17 | 18 | expect(() => wrapper.getComponent({ name: 'does-not-exist' })) 19 | .to.throw() 20 | .with.property( 21 | 'message', 22 | "Unable to get a component named 'does-not-exist' within:
the actual DOM here...
" 23 | ) 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/html.md: -------------------------------------------------------------------------------- 1 | ## html 2 | 3 | 返回 `Wrapper` DOM 节点的 HTML 字符串。 4 | 5 | - **返回值：**`{string}` 6 | 7 | - **示例：** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.html()).toBe('

Foo

') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/isEmpty.md: -------------------------------------------------------------------------------- 1 | ## isEmpty 2 | 3 | ::: warning 废弃警告 4 | `isEmpty` 已经被废弃并会在未来的发布中被移除。 5 | 6 | 可以考虑一个诸如 [jest-dom](https://github.com/testing-library/jest-dom#tobeempty) 中提供的自定义匹配。 7 | 8 | 当使用 `findComponent` 时，可以通过 `findComponent(Comp).element` 访问其 DOM 元素。 9 | ::: 10 | 11 | 断言 `Wrapper` 并不包含子节点。 12 | 13 | - **返回值：**`{boolean}` 14 | 15 | - **示例：** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | expect(wrapper.isEmpty()).toBe(true) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/isVisible.md: -------------------------------------------------------------------------------- 1 | ## isVisible 2 | 3 | 断言 `Wrapper` 是否可见。 4 | 5 | 如果有一个祖先元素拥有 `display: none` 或 `visibility: hidden` 样式则返回 `false`。 6 | 7 | 这可以用于断言一个组件是否被 `v-show` 所隐藏。 8 | 9 | - **返回值：** `{boolean}` 10 | 11 | - **示例：** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.isVisible()).toBe(true) 19 | expect(wrapper.find('.is-not-visible').isVisible()).toBe(false) 20 | ``` 21 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/isVueInstance.md: -------------------------------------------------------------------------------- 1 | ## isVueInstance 2 | 3 | ::: warning 废弃警告 4 | `isVueInstance` 已经被废弃并会在未来的发布中被移除。 5 | 6 | 依赖 `isVueInstance` 断言的测试并没有特别大的意义，我们建议将与之相关的断言替换为更有目的性的断言。 7 | 8 | 为了保留这些测试，一个替换 `isVueInstance()` 的可行方式是对 `wrapper.find(...).vm` 的 truthy 断言。 9 | ::: 10 | 11 | 断言 `Wrapper` 是 Vue 实例。 12 | 13 | - **返回值：**`{boolean}` 14 | 15 | - **示例：** 16 | 17 | ```js 18 | import { mount } from '@vue/test-utils' 19 | import Foo from './Foo.vue' 20 | 21 | const wrapper = mount(Foo) 22 | expect(wrapper.isVueInstance()).toBe(true) 23 | ``` 24 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/name.md: -------------------------------------------------------------------------------- 1 | ## name 2 | 3 | ::: warning 废弃警告 4 | `name` 已经被废弃并会在未来的发布中被移除。 5 | ::: 6 | 7 | 如果 `Wrapper` 包含一个 Vue 实例则返回组件名，否则返回 `Wrapper` DOM 节点的标签名。 8 | 9 | - **返回值：**`{string}` 10 | 11 | - **示例：** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | const wrapper = mount(Foo) 18 | expect(wrapper.name()).toBe('Foo') 19 | const p = wrapper.find('p') 20 | expect(p.name()).toBe('p') 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/overview.md: -------------------------------------------------------------------------------- 1 | ## overview 2 | 3 | ::: warning 废弃警告 4 | `overview` 已经被废弃并会在未来的发布中被移除。 5 | ::: 6 | 7 | 打印一个简单的 `Wrapper` 的总览。 8 | 9 | - **示例：** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Component from './Component.vue' 14 | 15 | const wrapper = mount(Component) 16 | wrapper.overview() 17 | 18 | // Console output 19 | /* 20 | Wrapper (Visible): 21 | 22 | Html: 23 |
24 |

My name is Tess Ting

25 |
26 | 27 | Data: { 28 | firstName: Tess, 29 | lastName: Ting 30 | } 31 | 32 | Computed: { 33 | fullName: Tess Ting' 34 | } 35 | 36 | Emitted: {', 37 | foo: [', 38 | 0: [ hello, world ], 39 | 1: [ bye, world ]' 40 | ], 41 | bar: [ 42 | 0: [ hey ]' 43 | ] 44 | } 45 | 46 | */ 47 | ``` 48 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/props.md: -------------------------------------------------------------------------------- 1 | ## props 2 | 3 | 返回 `Wrapper` `vm` 的 props 对象。如果提供了 `key`，则返回这个 `key` 对应的值。 4 | 5 | **注意：该包裹器必须包含一个 Vue 实例。** 6 | 7 | - **参数：** 8 | 9 | - `{string} key` **可选的** 10 | 11 | - **返回值：**`{[prop: string]: any} | any` 12 | 13 | - **示例：** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | const wrapper = mount(Foo, { 20 | propsData: { 21 | bar: 'baz' 22 | } 23 | }) 24 | expect(wrapper.props().bar).toBe('baz') 25 | expect(wrapper.props('bar')).toBe('baz') 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/setChecked.md: -------------------------------------------------------------------------------- 1 | ## setChecked 2 | 3 | 设置 checkbox 或 radio 类 `` 元素的 checked 值并更新 `v-model` 绑定的数据。 4 | 5 | - **参数：** 6 | 7 | - `{Boolean} checked (默认值：true)` 8 | 9 | - **示例：** 10 | 11 | ```js 12 | import { mount } from '@vue/test-utils' 13 | import Foo from './Foo.vue' 14 | 15 | test('setChecked demo', async () => { 16 | const wrapper = mount(Foo) 17 | const radioInput = wrapper.find('input[type="radio"]') 18 | 19 | await radioInput.setChecked() 20 | 21 | expect(radioInput.element.checked).toBeTruthy() 22 | }) 23 | ``` 24 | 25 | - **注意：** 26 | 27 | 当你尝试通过 `radioInput.element.checked = true; radioInput.trigger('input')` 经由 `v-model` 向 state 设置值的时候，`v-model` 不会被触发。`v-model` 是被 `change` 事件触发的。 28 | 29 | `checkboxInput.setChecked(checked)` 是接下来这段代码的别名。 30 | 31 | ```js 32 | checkboxInput.element.checked = checked 33 | checkboxInput.trigger('click') 34 | checkboxInput.trigger('change') 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/setData.md: -------------------------------------------------------------------------------- 1 | ## setData 2 | 3 | 设置 `Wrapper` `vm` 的属性。 4 | 5 | `setData` 通过递归调用 `Vue.set` 生效。 6 | 7 | **注意：该包裹器必须包含一个 Vue 示例。** 8 | 9 | - **参数：** 10 | 11 | - `{Object} data` 12 | 13 | - **示例：** 14 | 15 | ```js 16 | import { mount } from '@vue/test-utils' 17 | import Foo from './Foo.vue' 18 | 19 | test('setData demo', async () => { 20 | const wrapper = mount(Foo) 21 | 22 | await wrapper.setData({ foo: 'bar' }) 23 | 24 | expect(wrapper.vm.foo).toBe('bar') 25 | }) 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/setMethods.md: -------------------------------------------------------------------------------- 1 | ## setMethods 2 | 3 | ::: warning 废弃警告 4 | `setMethods` 已经被废弃并会在未来的发布中被移除。 5 | 6 | 这里没有明确的路径替换 `setMethods`，因为这取决于你之前的用法。这很容易导致依赖实现细节的琐碎的测试，而这是[不推荐的](https://github.com/vuejs/rfcs/blob/668866fa71d70322f6a7689e88554ab27d349f9c/active-rfcs/0000-vtu-api.md#setmethods)。 7 | 8 | 我们建议重新考虑那些测试。 9 | 10 | 如果是为了存根一个复杂方法，可将其从组件中提取出来并单独测试。如果是为了断言一个方法被调用，可使用你的测试运行器窥探它。 11 | ::: 12 | 13 | 设置 `Wrapper` `vm` 的方法并强制更新。 14 | 15 | **注意：该包裹器必须包含一个 Vue 示例。** 16 | 17 | - **参数：** 18 | 19 | - `{Object} methods` 20 | 21 | - **示例：** 22 | 23 | ```js 24 | import { mount } from '@vue/test-utils' 25 | import sinon from 'sinon' 26 | import Foo from './Foo.vue' 27 | 28 | const wrapper = mount(Foo) 29 | const clickMethodStub = sinon.stub() 30 | 31 | wrapper.setMethods({ clickMethod: clickMethodStub }) 32 | wrapper.find('button').trigger('click') 33 | expect(clickMethodStub.called).toBe(true) 34 | ``` 35 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/setProps.md: -------------------------------------------------------------------------------- 1 | ## setProps 2 | 3 | - **参数：** 4 | 5 | - `{Object} props` 6 | 7 | - **用法：** 8 | 9 | 设置 `Wrapper` `vm` 的 prop 并强制更新。 10 | 11 | **注意：该包裹器必须包含一个 Vue 示例。** 12 | 13 | ```js 14 | import { mount } from '@vue/test-utils' 15 | import Foo from './Foo.vue' 16 | 17 | test('setProps demo', async () => { 18 | const wrapper = mount(Foo) 19 | 20 | await wrapper.setProps({ foo: 'bar' }) 21 | 22 | expect(wrapper.vm.foo).toBe('bar') 23 | }) 24 | ``` 25 | 26 | 你也可以传递一个 `propsData` 对象，这会用该对象来初始化 Vue 示例。 27 | 28 | ```js 29 | // Foo.vue 30 | export default { 31 | props: { 32 | foo: { 33 | type: String, 34 | required: true 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | ```js 41 | import { mount } from '@vue/test-utils' 42 | import Foo from './Foo.vue' 43 | 44 | const wrapper = mount(Foo, { 45 | propsData: { 46 | foo: 'bar' 47 | } 48 | }) 49 | 50 | expect(wrapper.vm.foo).toBe('bar') 51 | ``` 52 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/setSelected.md: -------------------------------------------------------------------------------- 1 | ## setSelected 2 | 3 | 选择一个 option 元素并更新 `v-model` 绑定的数据。 4 | 5 | - **示例：** 6 | 7 | ```js 8 | import { mount } from '@vue/test-utils' 9 | import Foo from './Foo.vue' 10 | 11 | test('setSelected demo', async () => { 12 | const wrapper = mount(Foo) 13 | const options = wrapper.find('select').findAll('option') 14 | 15 | await options.at(1).setSelected() 16 | 17 | expect(wrapper.find('option:checked').element.value).toBe('bar') 18 | }) 19 | ``` 20 | 21 | - **注意：** 22 | 23 | 当你尝试通过 `option.element.selected = true; parentSelect.trigger('input')` 经由 `v-model` 向 state 设置值的时候，`v-model` 不会被触发。`v-model` 是被 `change` 事件触发的。 24 | 25 | `option.setSelected()` 是接下来这段代码的别名。 26 | 27 | ```js 28 | option.element.selected = true 29 | parentSelect.trigger('change') 30 | ``` 31 | -------------------------------------------------------------------------------- /docs/zh/api/wrapper/text.md: -------------------------------------------------------------------------------- 1 | ## text 2 | 3 | 返回 `Wrapper` 的文本内容。 4 | 5 | - **返回值：**`{string}` 6 | 7 | - **示例：** 8 | 9 | ```js 10 | import { mount } from '@vue/test-utils' 11 | import Foo from './Foo.vue' 12 | 13 | const wrapper = mount(Foo) 14 | expect(wrapper.text()).toBe('bar') 15 | ``` 16 | -------------------------------------------------------------------------------- /docs/zh/guides/README.md: -------------------------------------------------------------------------------- 1 | # 教程 2 | 3 | !!!include(docs/zh/guides/getting-started.md)!!! 4 | !!!include(docs/zh/guides/common-tips.md)!!! 5 | !!!include(docs/zh/guides/dom-events.md)!!! 6 | !!!include(docs/zh/guides/testing-async-components.md)!!! 7 | !!!include(docs/zh/guides/using-with-typescript.md)!!! 8 | !!!include(docs/zh/guides/using-with-vue-router.md)!!! 9 | !!!include(docs/zh/guides/using-with-vuex.md)!!! 10 | -------------------------------------------------------------------------------- /docs/zh/guides/useful-libraries-for-testing.md: -------------------------------------------------------------------------------- 1 | ## 实用的测试库 2 | 3 | Vue Test Utils 提供了测试 Vue 组件的实用方法。同时我们的社区也有一些额外的库为 `@vue/test-utils` 拓展了更多实用的方法，或提供测试 Vue 应用中其它内容的工具。 4 | 5 | ### `vuex-mock-store` 6 | 7 | [`vuex-mock-store`](https://github.com/posva/vuex-mock-store) 提供了一个简单直接的伪造 store 来简化使用 Vuex store 的组件的测试。 8 | 9 | ### `jest-matcher-vue-test-utils` 10 | 11 | [`jest-matcher-vue-test-utils`](https://github.com/hmsk/jest-matcher-vue-test-utils) 为 Jest 测试运行器添加了额外的方式来撰写更有表现力的断言。 12 | 13 | ### `jest-mock-axios` 14 | 15 | [`jest-mock-axios`](https://github.com/knee-cola/jest-mock-axios) 允许你在测试中简单地伪造 `axios`，一个常用的 HTTP 客户端。它可以在 Jest 中开箱即用，并且作者在文档中提供了支持其它测试运行器的指导。 16 | -------------------------------------------------------------------------------- /docs/zh/installation/README.md: -------------------------------------------------------------------------------- 1 | # 安装 2 | 3 | !!!include(docs/zh/installation/choosing-a-test-runner.md)!!! 4 | !!!include(docs/zh/installation/testing-single-file-components-with-jest.md)!!! 5 | !!!include(docs/zh/installation/testing-single-file-components-with-mocha-webpack.md)!!! 6 | !!!include(docs/zh/installation/testing-single-file-components-with-karma.md)!!! 7 | !!!include(docs/zh/installation/usage-without-a-build-step-node.md)!!! 8 | -------------------------------------------------------------------------------- /flow/config.flow.js: -------------------------------------------------------------------------------- 1 | declare type Config = { 2 | stubs?: { [name: string]: Component | boolean | string }, 3 | mocks?: Object, 4 | methods?: { [name: string]: Function }, 5 | provide?: Object, 6 | showDeprecationWarnings?: boolean 7 | } 8 | -------------------------------------------------------------------------------- /flow/modules.flow.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | declare module 'vue' { 4 | declare module.exports: any 5 | } 6 | 7 | declare module 'lodash/cloneDeep' { 8 | declare module.exports: any 9 | } 10 | 11 | declare module 'lodash/mergeWith' { 12 | declare module.exports: any 13 | } 14 | 15 | declare module 'vue-template-compiler' { 16 | declare module.exports: any 17 | } 18 | 19 | declare module 'vue-server-renderer' { 20 | declare module.exports: any 21 | } 22 | 23 | declare module 'cheerio' { 24 | declare module.exports: any 25 | } 26 | 27 | declare module 'semver' { 28 | declare module.exports: any 29 | } 30 | 31 | declare module 'pretty' { 32 | declare module.exports: any 33 | } 34 | -------------------------------------------------------------------------------- /flow/vue.flow.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | // Importing these types declares them, so they are available globally 4 | 5 | declare type Component = Object | Function // eslint-disable-line no-undef 6 | declare type VNode = Object // eslint-disable-line no-undef 7 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleNameMapper: { 3 | '^~(.*)$': '/test/$1', 4 | '^packages/(.*)$': '/packages/$1', 5 | '\\.(css|less|scss|sass)$': 'identity-obj-proxy' 6 | }, 7 | transform: { 8 | '.*\\.(vue)$': 'vue-jest', 9 | '^.+\\.js$': '/node_modules/babel-jest' 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.9.0", 3 | "packages": [ 4 | "packages/*" 5 | ], 6 | "npmClient": "yarn", 7 | "useWorkspaces": true, 8 | "version": "1.3.6" 9 | } 10 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/v2/*" 3 | to = "https://vue-test-utils-next-docs.netlify.app/v2/:splat" 4 | status = 200 5 | force = true # COMMENT: ensure that we always redirect 6 | headers = {X-From = "Netlify"} 7 | -------------------------------------------------------------------------------- /packages/create-instance/add-mocks.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import $$Vue from 'vue' 3 | import { warn, keys } from 'shared/util' 4 | 5 | export default function addMocks( 6 | _Vue: Component, 7 | mockedProperties: Object | false = {} 8 | ): void { 9 | if (mockedProperties === false) { 10 | return 11 | } 12 | keys(mockedProperties).forEach(key => { 13 | try { 14 | // $FlowIgnore 15 | _Vue.prototype[key] = mockedProperties[key] 16 | } catch (e) { 17 | warn( 18 | `could not overwrite property ${key}, this is ` + 19 | `usually caused by a plugin that has added ` + 20 | `the property as a read-only value` 21 | ) 22 | } 23 | // $FlowIgnore 24 | $$Vue.util.defineReactive(_Vue, key, mockedProperties[key]) 25 | }) 26 | } 27 | -------------------------------------------------------------------------------- /packages/create-instance/add-stubs.js: -------------------------------------------------------------------------------- 1 | import { BEFORE_RENDER_LIFECYCLE_HOOK } from 'shared/consts' 2 | 3 | export function addStubs(_Vue, stubComponents) { 4 | function addStubComponentsMixin() { 5 | Object.assign(this.$options.components, stubComponents) 6 | } 7 | 8 | _Vue.mixin({ 9 | [BEFORE_RENDER_LIFECYCLE_HOOK]: addStubComponentsMixin 10 | }) 11 | } 12 | -------------------------------------------------------------------------------- /packages/create-instance/extract-instance-options.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | const MOUNTING_OPTIONS = [ 4 | 'attachToDocument', 5 | 'mocks', 6 | 'slots', 7 | 'localVue', 8 | 'stubs', 9 | 'context', 10 | 'clone', 11 | 'attrs', 12 | 'listeners', 13 | 'propsData', 14 | 'shouldProxy' 15 | ] 16 | 17 | export default function extractInstanceOptions(options: Object): Object { 18 | const instanceOptions = { 19 | ...options 20 | } 21 | MOUNTING_OPTIONS.forEach(mountingOption => { 22 | delete instanceOptions[mountingOption] 23 | }) 24 | return instanceOptions 25 | } 26 | -------------------------------------------------------------------------------- /packages/create-instance/log-events.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | export function logEvents( 4 | vm: Component, 5 | emitted: Object, 6 | emittedByOrder: Array 7 | ): void { 8 | const emit = vm.$emit 9 | vm.$emit = (name, ...args) => { 10 | ;(emitted[name] || (emitted[name] = [])).push(args) 11 | emittedByOrder.push({ name, args }) 12 | return emit.call(vm, name, ...args) 13 | } 14 | } 15 | 16 | export function addEventLogger(_Vue: Component): void { 17 | _Vue.mixin({ 18 | beforeCreate: function () { 19 | this.__emitted = Object.create(null) 20 | this.__emittedByOrder = [] 21 | logEvents(this, this.__emitted, this.__emittedByOrder) 22 | } 23 | }) 24 | } 25 | -------------------------------------------------------------------------------- /packages/create-instance/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-instance", 3 | "version": "1.2.0", 4 | "main": "create-instance.js", 5 | "private": true 6 | } 7 | -------------------------------------------------------------------------------- /packages/server-test-utils/scripts/release.sh: -------------------------------------------------------------------------------- 1 | set -e 2 | 3 | if [[ -z $1 ]]; then 4 | echo "Enter new version: " 5 | read VERSION 6 | else 7 | VERSION=$1 8 | fi 9 | 10 | read -p "Releasing $VERSION - are you sure? (y/n) " -n 1 -r 11 | echo 12 | if [[ $REPLY =~ ^[Yy]$ ]]; then 13 | echo "Releasing $VERSION ..." 14 | 15 | npm run test 16 | 17 | # build 18 | npm run build 19 | 20 | # commit 21 | git add -A 22 | git add -f \ 23 | dist/*.js 24 | git commit -m "build: server-test-utils $VERSION" 25 | npm version $VERSION --message "release: server-test-utils $VERSION" 26 | 27 | # publish 28 | git push 29 | npm publish 30 | fi 31 | -------------------------------------------------------------------------------- /packages/server-test-utils/src/config.js: -------------------------------------------------------------------------------- 1 | import * as testUtils from '@vue/test-utils' 2 | 3 | export default testUtils.config 4 | -------------------------------------------------------------------------------- /packages/server-test-utils/src/index.js: -------------------------------------------------------------------------------- 1 | import renderToString from './renderToString' 2 | import render from './render' 3 | import config from './config' 4 | 5 | export { renderToString, config, render } 6 | -------------------------------------------------------------------------------- /packages/server-test-utils/src/render.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import renderToString from './renderToString' 4 | import cheerio from 'cheerio' 5 | 6 | export default function render( 7 | component: Component, 8 | options: Options = {} 9 | ): Promise { 10 | return renderToString(component, options).then(str => cheerio.load('')(str)) 11 | } 12 | -------------------------------------------------------------------------------- /packages/server-test-utils/types/test/resources.ts: -------------------------------------------------------------------------------- 1 | import Vue, { ComponentOptions, FunctionalComponentOptions } from 'vue' 2 | 3 | /** 4 | * Normal component options 5 | */ 6 | export interface Normal extends Vue { 7 | foo: string 8 | } 9 | export const normalOptions: ComponentOptions = { 10 | name: 'normal', 11 | data () { 12 | return { 13 | foo: 'bar' 14 | } 15 | } 16 | } 17 | 18 | /** 19 | * Functional component options 20 | */ 21 | export const functionalOptions: FunctionalComponentOptions = { 22 | functional: true, 23 | render (h) { 24 | return h('div') 25 | } 26 | } 27 | 28 | /** 29 | * Component constructor declared with vue-class-component etc. 30 | */ 31 | export class ClassComponent extends Vue { 32 | bar = 'bar' 33 | } 34 | -------------------------------------------------------------------------------- /packages/server-test-utils/types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es2015", "es2017", "dom"], 4 | "module": "es2015", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noEmit": true 8 | }, 9 | "include": ["**/*.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/shared/consts.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import semver from 'semver' 3 | 4 | export const NAME_SELECTOR = 'NAME_SELECTOR' 5 | export const COMPONENT_SELECTOR = 'COMPONENT_SELECTOR' 6 | export const REF_SELECTOR = 'REF_SELECTOR' 7 | export const DOM_SELECTOR = 'DOM_SELECTOR' 8 | export const INVALID_SELECTOR = 'INVALID_SELECTOR' 9 | 10 | export const VUE_VERSION = Number( 11 | `${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}` 12 | ) 13 | 14 | export const FUNCTIONAL_OPTIONS = 15 | VUE_VERSION >= 2.5 ? 'fnOptions' : 'functionalOptions' 16 | 17 | export const BEFORE_RENDER_LIFECYCLE_HOOK = semver.gt(Vue.version, '2.1.8') 18 | ? 'beforeCreate' 19 | : 'beforeMount' 20 | 21 | export const CREATE_ELEMENT_ALIAS = semver.gt(Vue.version, '2.1.5') 22 | ? '_c' 23 | : '_h' 24 | -------------------------------------------------------------------------------- /packages/shared/index.js: -------------------------------------------------------------------------------- 1 | export * from './compile-template' 2 | export * from './create-component-stubs' 3 | export * from './is-visible' 4 | export * from './util' 5 | export * from './validators' 6 | -------------------------------------------------------------------------------- /packages/shared/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shared", 3 | "version": "1.3.0", 4 | "private": true, 5 | "peerDependencies": { 6 | "vue": "2.x", 7 | "vue-template-compiler": "^2.x" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/test-utils/scripts/release.sh: -------------------------------------------------------------------------------- 1 | set -e 2 | 3 | if [[ -z $1 ]]; then 4 | echo "Enter new version: " 5 | read VERSION 6 | else 7 | VERSION=$1 8 | fi 9 | 10 | read -p "Releasing $VERSION - are you sure? (y/n) " -n 1 -r 11 | echo 12 | if [[ $REPLY =~ ^[Yy]$ ]]; then 13 | echo "Releasing $VERSION ..." 14 | 15 | npm run test 16 | 17 | # build 18 | npm run build 19 | 20 | # commit 21 | git add -A 22 | git add -f \ 23 | dist/*.js 24 | git commit -m "build: test-utils $VERSION" 25 | npm version $VERSION --message "release: test-utils $VERSION" 26 | 27 | # publish 28 | git push origin refs/tags/v$VERSION 29 | git push 30 | npm publish 31 | 32 | fi 33 | -------------------------------------------------------------------------------- /packages/test-utils/src/components/RouterLinkStub.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | const toTypes: Array = [String, Object] 3 | const eventTypes: Array = [String, Array] 4 | 5 | export default { 6 | name: 'RouterLinkStub', 7 | props: { 8 | to: { 9 | type: toTypes, 10 | required: true 11 | }, 12 | tag: { 13 | type: String, 14 | default: 'a' 15 | }, 16 | exact: Boolean, 17 | exactPath: Boolean, 18 | append: Boolean, 19 | replace: Boolean, 20 | activeClass: String, 21 | exactActiveClass: String, 22 | exactPathActiveClass: String, 23 | event: { 24 | type: eventTypes, 25 | default: 'click' 26 | } 27 | }, 28 | render(h: Function) { 29 | return h(this.tag, undefined, this.$slots.default) 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/test-utils/src/config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | stubs: { 3 | transition: true, 4 | 'transition-group': true 5 | }, 6 | mocks: {}, 7 | methods: {}, 8 | provide: {}, 9 | showDeprecationWarnings: 10 | typeof process.env.SHOW_DEPRECATIONS !== 'undefined' 11 | ? process.env.SHOW_DEPRECATIONS 12 | : true 13 | } 14 | -------------------------------------------------------------------------------- /packages/test-utils/src/create-element.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | export default function createElement(): HTMLElement | void { 4 | if (document) { 5 | const elem = document.createElement('div') 6 | 7 | if (document.body) { 8 | document.body.appendChild(elem) 9 | } 10 | return elem 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/test-utils/src/create-local-vue.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import _createLocalVue from 'shared/create-local-vue' 4 | 5 | /** 6 | * Returns a local vue instance to add components, mixins and install plugins without polluting the global Vue class 7 | * @param {VueConfig} config 8 | * @returns {Component} 9 | */ 10 | function createLocalVue(config: VueConfig = {}): Component { 11 | return _createLocalVue(undefined, config) 12 | } 13 | 14 | export default createLocalVue 15 | -------------------------------------------------------------------------------- /packages/test-utils/src/create-wrapper.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import Vue from 'vue' 4 | import Wrapper from './wrapper' 5 | import VueWrapper from './vue-wrapper' 6 | import { trackInstance } from './auto-destroy' 7 | 8 | export default function createWrapper( 9 | node: VNode | Component, 10 | options: WrapperOptions = {} 11 | ): VueWrapper | Wrapper { 12 | const componentInstance = node.child 13 | if (componentInstance) { 14 | const wrapper = new VueWrapper(componentInstance, options) 15 | trackInstance(wrapper) 16 | return wrapper 17 | } 18 | const wrapper = 19 | node instanceof Vue 20 | ? new VueWrapper(node, options) 21 | : new Wrapper(node, options) 22 | trackInstance(wrapper) 23 | return wrapper 24 | } 25 | -------------------------------------------------------------------------------- /packages/test-utils/src/find-dom-nodes.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | export default function findDOMNodes( 4 | element: Element | null, 5 | selector: string 6 | ): Array { 7 | const nodes = [] 8 | if (!element || !element.querySelectorAll || !element.matches) { 9 | return nodes 10 | } 11 | 12 | if (element.matches(selector)) { 13 | nodes.push(element) 14 | } 15 | // $FlowIgnore 16 | return nodes.concat([].slice.call(element.querySelectorAll(selector))) 17 | } 18 | -------------------------------------------------------------------------------- /packages/test-utils/src/polyfill.js: -------------------------------------------------------------------------------- 1 | export default function polyfill() { 2 | // Polyfill `Element.matches()` for IE and older versions of Chrome: 3 | // https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill 4 | if (!Element.prototype.matches) { 5 | Element.prototype.matches = 6 | Element.prototype.msMatchesSelector || 7 | Element.prototype.webkitMatchesSelector 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/test-utils/src/recursively-set-data.js: -------------------------------------------------------------------------------- 1 | import { isPlainObject } from 'shared/validators' 2 | import { keys } from 'shared/util' 3 | 4 | export function recursivelySetData(vm, target, data) { 5 | keys(data).forEach(key => { 6 | const val = data[key] 7 | const targetVal = target[key] 8 | 9 | if ( 10 | isPlainObject(val) && 11 | isPlainObject(targetVal) && 12 | keys(val).length > 0 13 | ) { 14 | recursivelySetData(vm, targetVal, val) 15 | } else { 16 | vm.$set(target, key, val) 17 | } 18 | }) 19 | } 20 | -------------------------------------------------------------------------------- /packages/test-utils/src/shallow-mount.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import mount from './mount' 4 | import type VueWrapper from './vue-wrapper' 5 | 6 | export default function shallowMount( 7 | component: Component, 8 | options: Options = {} 9 | ): VueWrapper { 10 | return mount(component, { 11 | ...options, 12 | shouldProxy: true 13 | }) 14 | } 15 | -------------------------------------------------------------------------------- /packages/test-utils/src/warn-if-no-window.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { throwError } from 'shared/util' 4 | 5 | export default function warnIfNoWindow(): void { 6 | if (typeof window === 'undefined') { 7 | throwError( 8 | `window is undefined, vue-test-utils needs to be ` + 9 | `run in a browser environment. \n` + 10 | `You can run the tests in node using jsdom \n` + 11 | `See https://vue-test-utils.vuejs.org/guides/#browser-environment ` + 12 | `for more details.` 13 | ) 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/test-utils/types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es2015", "es2017", "dom"], 4 | "module": "esnext", 5 | "target": "ES2017", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "noEmit": true, 9 | "allowSyntheticDefaultImports": true 10 | }, 11 | "include": ["**/*.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /packages/vue2 - Raccourci.lnk: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs/vue-test-utils/9627a809a177ef9798ca66a669891c73fc740d8d/packages/vue2 - Raccourci.lnk -------------------------------------------------------------------------------- /scripts/gen-release-note.js: -------------------------------------------------------------------------------- 1 | const version = process.env.VERSION 2 | const cc = require('conventional-changelog') 3 | const file = `./RELEASE_NOTE_${version}.md` 4 | const fileStream = require('fs').createWriteStream(file) 5 | 6 | cc({ 7 | preset: 'angular', 8 | pkg: { 9 | transform(pkg) { 10 | pkg.version = `v${version}` 11 | return pkg 12 | } 13 | } 14 | }) 15 | .pipe(fileStream) 16 | .on('close', () => { 17 | console.log(`Generated release note at ${file}`) 18 | }) 19 | -------------------------------------------------------------------------------- /scripts/release.sh: -------------------------------------------------------------------------------- 1 | npm run release 2 | 3 | VERSION=$(jq -r .version packages/test-utils/package.json) 4 | 5 | git add -A 6 | git commit -m "chore(release): add dist files $VERSION" 7 | git push 8 | -------------------------------------------------------------------------------- /test/resources/components/component-as-a-class-with-child.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /test/resources/components/component-as-a-class.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 18 | -------------------------------------------------------------------------------- /test/resources/components/component-with-async-error.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | -------------------------------------------------------------------------------- /test/resources/components/component-with-child.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | -------------------------------------------------------------------------------- /test/resources/components/component-with-computed.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /test/resources/components/component-with-css-modules.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 21 | -------------------------------------------------------------------------------- /test/resources/components/component-with-functional-child.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 32 | -------------------------------------------------------------------------------- /test/resources/components/component-with-inject-composition.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /test/resources/components/component-with-inject.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /test/resources/components/component-with-lifecycle-hooks.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 40 | -------------------------------------------------------------------------------- /test/resources/components/component-with-methods.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /test/resources/components/component-with-mixin.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /test/resources/components/component-with-name-prop.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | -------------------------------------------------------------------------------- /test/resources/components/component-with-nested-childern-and-attributes.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 23 | -------------------------------------------------------------------------------- /test/resources/components/component-with-nested-children.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | -------------------------------------------------------------------------------- /test/resources/components/component-with-parent-name.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | -------------------------------------------------------------------------------- /test/resources/components/component-with-props.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 | -------------------------------------------------------------------------------- /test/resources/components/component-with-router.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /test/resources/components/component-with-slots.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | -------------------------------------------------------------------------------- /test/resources/components/component-with-style.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 28 | 29 | 34 | -------------------------------------------------------------------------------- /test/resources/components/component-with-sync-error.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | -------------------------------------------------------------------------------- /test/resources/components/component-with-transitions.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | -------------------------------------------------------------------------------- /test/resources/components/component-with-v-for.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /test/resources/components/component-with-v-if.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | -------------------------------------------------------------------------------- /test/resources/components/component-with-v-show.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /test/resources/components/component-with-v-slot-syntax.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | -------------------------------------------------------------------------------- /test/resources/components/component-with-v-slot.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /test/resources/components/component-with-vuex.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | -------------------------------------------------------------------------------- /test/resources/components/component-with-watch-immediate.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /test/resources/components/component-with-watch.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 42 | -------------------------------------------------------------------------------- /test/resources/components/component-without-name.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /test/resources/components/component.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /test/resources/components/functional-component.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /test/resources/components/recursive-component.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | -------------------------------------------------------------------------------- /test/resources/test-mixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | created: function () {} 3 | } 4 | -------------------------------------------------------------------------------- /test/setup/karma.setup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Since running in the browser, polyfill missing functionality with core-js, 3 | * as well as include the regenerator runtime. 4 | * Please see https://babeljs.io/docs/en/babel-polyfill and https://github.com/zloirock/core-js for more details 5 | */ 6 | import 'core-js' 7 | import 'regenerator-runtime/runtime' 8 | 9 | import jest from 'jest-mock' 10 | import expect from 'expect' 11 | 12 | // Add Jest API to the global scope / browser window 13 | // Jasmine will be used as the test runner while leveraging Jest's expect/assertion and mock/stubbing libraries 14 | window.test = window.it 15 | window.test.each = inputs => (testName, test) => 16 | inputs.forEach(args => window.it(testName, () => test(...args))) 17 | window.test.todo = window.test.skip = () => { 18 | return undefined 19 | } 20 | 21 | window.jest = jest 22 | window.expect = expect 23 | -------------------------------------------------------------------------------- /test/setup/load-tests.js: -------------------------------------------------------------------------------- 1 | /** 2 | * require.context is used in order to build one bundle with karma-webpack. 3 | * If globstars are used, a bundle is created per glob match. 4 | * This creates obvious memory issues and is not desired. 5 | * 6 | * Please see https://github.com/webpack-contrib/karma-webpack#alternative-usage for more details 7 | */ 8 | const testsContext = require.context('../specs', true, /\.spec\.(js|vue)$/) 9 | 10 | testsContext.keys().forEach(testsContext) 11 | -------------------------------------------------------------------------------- /test/specs/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../.eslintrc", 3 | "env": { 4 | "mocha": true 5 | }, 6 | "globals": { 7 | "expect": true, 8 | "sinon": true 9 | }, 10 | "rules": { 11 | "max-len": 0 12 | } 13 | } -------------------------------------------------------------------------------- /test/specs/create-dom-event.spec.js: -------------------------------------------------------------------------------- 1 | import createDOMEvent from '../../packages/test-utils/src/create-dom-event' 2 | import { isRunningChrome } from '~resources/utils' 3 | import { itDoNotRunIf } from 'conditional-specs' 4 | 5 | describe('createDOMEvent', () => { 6 | itDoNotRunIf(isRunningChrome, 'returns cancelable event', () => { 7 | const event = createDOMEvent('click', {}) 8 | expect(event.bubbles).toEqual(true) 9 | expect(event.cancelable).toEqual(true) 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /test/specs/external-libraries.spec.js: -------------------------------------------------------------------------------- 1 | import { createLocalVue, mount } from 'packages/test-utils/src' 2 | import VeeValidate from 'vee-validate' 3 | import { describeWithShallowAndMount } from '~resources/utils' 4 | 5 | describeWithShallowAndMount('external libraries', () => { 6 | it('works with vee validate', () => { 7 | const TestComponent = { 8 | template: '
' 9 | } 10 | const localVue = createLocalVue() 11 | localVue.use(VeeValidate) 12 | const wrapper = mount(TestComponent, { 13 | localVue 14 | }) 15 | wrapper.vm.errors.collect('text') 16 | }) 17 | }) 18 | -------------------------------------------------------------------------------- /test/specs/mounting-options/data.spec.js: -------------------------------------------------------------------------------- 1 | import { describeWithShallowAndMount } from '~resources/utils' 2 | 3 | describeWithShallowAndMount('options.data', mountingMethod => { 4 | const TestComponent = { 5 | data: () => ({ foo: 1, bar: 2 }), 6 | template: '
' 7 | } 8 | 9 | it('correctly merges component data and data passed to mount', () => { 10 | const wrapper = mountingMethod(TestComponent, { data: () => ({ foo: 3 }) }) 11 | 12 | expect(wrapper.vm.foo).toBe(3) 13 | expect(wrapper.vm.bar).toBe(2) 14 | }) 15 | 16 | it('does not fail when data is extracted to local variable', () => { 17 | const defaultData = { foo: 3 } 18 | 19 | const wrapper = mountingMethod(TestComponent, { data: () => defaultData }) 20 | 21 | expect(wrapper.vm.foo).toBe(3) 22 | expect(wrapper.vm.bar).toBe(2) 23 | }) 24 | }) 25 | -------------------------------------------------------------------------------- /test/specs/mounting-options/methods.spec.js: -------------------------------------------------------------------------------- 1 | import { config } from 'packages/test-utils/src' 2 | import { describeWithShallowAndMount } from '~resources/utils' 3 | 4 | describeWithShallowAndMount('options.methods', mountingMethod => { 5 | let configMethodsSave 6 | 7 | beforeEach(() => { 8 | configMethodsSave = config.methods 9 | config.methods = {} 10 | }) 11 | 12 | afterEach(() => { 13 | config.methods = configMethodsSave 14 | }) 15 | 16 | it('prioritize mounting options over config', () => { 17 | config.methods['val'] = () => 'methodFromConfig' 18 | 19 | const TestComponent = { 20 | template: `
{{ val() }}
` 21 | } 22 | 23 | const wrapper = mountingMethod(TestComponent, { 24 | methods: { 25 | val() { 26 | return 'methodFromOptions' 27 | } 28 | } 29 | }) 30 | 31 | expect(wrapper.html()).toContain('methodFromOptions') 32 | }) 33 | }) 34 | -------------------------------------------------------------------------------- /test/specs/render.spec.js: -------------------------------------------------------------------------------- 1 | import { render } from 'packages/server-test-utils/src' 2 | import Cheerio from 'cheerio' 3 | import { describeDoNotRunIf } from 'conditional-specs' 4 | 5 | describe('render', () => { 6 | it.todo('placeholder') 7 | describeDoNotRunIf(process.env.TEST_ENV !== 'node', 'render', () => { 8 | it('returns a cheerio wrapper of the rendered component', async () => { 9 | const TestComponent = { 10 | template: '

Test

' 11 | } 12 | const wrapper = await render(TestComponent) 13 | expect(wrapper).toBeAnInstanceof(Cheerio) 14 | expect(wrapper.find('h2').text()).toEqual('Test') 15 | expect(wrapper.find('p').length).toEqual(2) 16 | }) 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /test/specs/vue-wrapper.spec.js: -------------------------------------------------------------------------------- 1 | import { describeWithShallowAndMount } from '~resources/utils' 2 | 3 | describeWithShallowAndMount('VueWrapper', mountingMethod => { 4 | ;['vnode', 'element', 'vm', 'options'].forEach(property => { 5 | it(`has the ${property} property which is read-only`, () => { 6 | const wrapper = mountingMethod({ template: '

' }) 7 | expect(wrapper.constructor.name).toEqual('VueWrapper') 8 | const message = `[vue-test-utils]: wrapper.${property} is read-only` 9 | expect(() => { 10 | wrapper[property] = 'foo' 11 | }).toThrow(message) 12 | }) 13 | }) 14 | }) 15 | -------------------------------------------------------------------------------- /test/specs/wrapper-array/overview.spec.js: -------------------------------------------------------------------------------- 1 | import { describeWithShallowAndMount } from '~resources/utils' 2 | import { compileToFunctions } from 'vue-template-compiler' 3 | import 'packages/test-utils/src' 4 | 5 | describeWithShallowAndMount('overview', mountingMethod => { 6 | it('throws error if wrapper array contains no items', () => { 7 | const wrapper = mountingMethod(compileToFunctions('
')) 8 | const message = '[vue-test-utils]: overview() cannot be called on 0 items' 9 | 10 | expect(() => wrapper.findAll('p').overview()).toThrow(message) 11 | }) 12 | 13 | it('throws error when called on a WrapperArray', () => { 14 | const wrapper = mountingMethod(compileToFunctions('
')) 15 | const message = 16 | '[vue-test-utils]: overview() must be called on a single wrapper, use at(i) to access a wrapper' 17 | 18 | expect(() => wrapper.findAll('div').overview()).toThrow(message) 19 | }) 20 | }) 21 | -------------------------------------------------------------------------------- /test/specs/wrapper-array/setSelected.spec.js: -------------------------------------------------------------------------------- 1 | import { describeWithShallowAndMount } from '~resources/utils' 2 | 3 | describeWithShallowAndMount('setSelected', mountingMethod => { 4 | it('sets value to the option elements', () => { 5 | const wrapperArray = mountingMethod({ 6 | template: ` 7 |
8 | 12 | 16 |
` 17 | }).findAll('.foo') 18 | const fn = () => wrapperArray.setSelected() 19 | const message = 20 | '[vue-test-utils]: setSelected must be called on a single wrapper, use at(i) to access a wrapper' 21 | expect(fn).toThrow(message) 22 | }) 23 | }) 24 | -------------------------------------------------------------------------------- /test/specs/wrapper/at.spec.js: -------------------------------------------------------------------------------- 1 | import { compileToFunctions } from 'vue-template-compiler' 2 | import { describeWithShallowAndMount } from '~resources/utils' 3 | 4 | describeWithShallowAndMount('at', mountingMethod => { 5 | it('throws an error', () => { 6 | const compiled = compileToFunctions('
') 7 | const wrapper = mountingMethod(compiled) 8 | const message = '[vue-test-utils]: at() must be called on a WrapperArray' 9 | const fn = () => wrapper.at() 10 | expect(fn).toThrow(message) 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /test/specs/wrapper/exists.spec.js: -------------------------------------------------------------------------------- 1 | import { compileToFunctions } from 'vue-template-compiler' 2 | import { describeWithShallowAndMount } from '~resources/utils' 3 | 4 | describeWithShallowAndMount('exists', mountingMethod => { 5 | it('returns true if called on Wrapper', () => { 6 | const compiled = compileToFunctions('
') 7 | const wrapper = mountingMethod(compiled) 8 | expect(wrapper.exists()).toEqual(true) 9 | }) 10 | 11 | it('returns false if Wrapper is destroyed', () => { 12 | const compiled = compileToFunctions('
') 13 | const wrapper = mountingMethod(compiled) 14 | wrapper.destroy() 15 | expect(wrapper.exists()).toEqual(false) 16 | }) 17 | 18 | it('returns false if called on an ErrorWrapper', () => { 19 | const compiled = compileToFunctions('
') 20 | const wrapper = mountingMethod(compiled) 21 | expect(wrapper.find('does-not-exist').exists()).toEqual(false) 22 | }) 23 | }) 24 | -------------------------------------------------------------------------------- /test/specs/wrapper/filter.spec.js: -------------------------------------------------------------------------------- 1 | import { compileToFunctions } from 'vue-template-compiler' 2 | import { describeWithShallowAndMount } from '~resources/utils' 3 | 4 | describeWithShallowAndMount('filter', mountingMethod => { 5 | it('throws an error', () => { 6 | const compiled = compileToFunctions('
') 7 | const wrapper = mountingMethod(compiled) 8 | const message = 9 | '[vue-test-utils]: filter() must be called on a WrapperArray' 10 | const fn = () => wrapper.filter() 11 | expect(fn).toThrow(message) 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /test/specs/wrapper/get.spec.js: -------------------------------------------------------------------------------- 1 | import { compileToFunctions } from 'vue-template-compiler' 2 | import { describeWithShallowAndMount } from '~resources/utils' 3 | 4 | describeWithShallowAndMount('get', mountingMethod => { 5 | it('throws describing error when element not found', () => { 6 | const compiled = compileToFunctions('
') 7 | const wrapper = mountingMethod(compiled) 8 | expect(() => wrapper.get('.does-not-exist')).toThrow( 9 | 'Unable to find .does-not-exist within:
' 10 | ) 11 | }) 12 | it('gets the element when element is found', () => { 13 | const compiled = compileToFunctions('
') 14 | const wrapper = mountingMethod(compiled) 15 | expect(wrapper.get('.does-exist')).toBeTruthy() 16 | }) 17 | }) 18 | -------------------------------------------------------------------------------- /test/specs/wrapper/isVueInstance.spec.js: -------------------------------------------------------------------------------- 1 | import { describeWithShallowAndMount } from '~resources/utils' 2 | import { compileToFunctions } from 'vue-template-compiler' 3 | 4 | describeWithShallowAndMount('isVueInstance', mountingMethod => { 5 | it('returns true if wrapper is Vue instance', () => { 6 | const compiled = compileToFunctions('
') 7 | const wrapper = mountingMethod(compiled) 8 | expect(wrapper.isVueInstance()).toEqual(true) 9 | }) 10 | 11 | it('returns the tag name of the element if it is not a Vue component', () => { 12 | const compiled = compileToFunctions('

') 13 | const wrapper = mountingMethod(compiled) 14 | expect(wrapper.find('p').isVueInstance()).toEqual(false) 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /test/specs/wrapper/text.spec.js: -------------------------------------------------------------------------------- 1 | import { compileToFunctions } from 'vue-template-compiler' 2 | import { describeWithShallowAndMount } from '~resources/utils' 3 | 4 | describeWithShallowAndMount('text', mountingMethod => { 5 | it('returns text content of wrapper node', () => { 6 | const text = 'test text prop' 7 | const compiled = compileToFunctions(`
${text}
`) 8 | const wrapper = mountingMethod(compiled) 9 | 10 | expect(wrapper.text()).toEqual(text) 11 | }) 12 | 13 | it('returns trimmed text content of wrapper node', () => { 14 | const text = 'test text prop' 15 | const compiled = compileToFunctions(` 16 |
17 | ${text} 18 |
`) 19 | const wrapper = mountingMethod(compiled) 20 | 21 | expect(wrapper.text()).toEqual(text) 22 | }) 23 | }) 24 | --------------------------------------------------------------------------------