diff --git a/package.json b/package.json index 8029eee1..1f17fab0 100644 --- a/package.json +++ b/package.json @@ -74,9 +74,9 @@ "vee-validate": "^4.0.2", "vue": "^3.0.4", "vue-apollo": "^3.0.5", - "vue-i18n": "^9.0.0-beta.6", + "vue-i18n": "^9.0.0-beta.10", "vue-jest": "^5.0.0-alpha.7", - "vue-router": "^4.0.0-rc.6", + "vue-router": "^4.0.1", "vuetify": "^2.3.19", "vuex": "^4.0.0-rc.2" }, diff --git a/src/__tests__/components/Router/App.vue b/src/__tests__/components/Router/App.vue index c8451c7a..fbfe7943 100644 --- a/src/__tests__/components/Router/App.vue +++ b/src/__tests__/components/Router/App.vue @@ -1,12 +1,6 @@ - + diff --git a/src/__tests__/components/Router/LocationDisplay.vue b/src/__tests__/components/Router/LocationDisplay.vue deleted file mode 100644 index eecf2959..00000000 --- a/src/__tests__/components/Router/LocationDisplay.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/__tests__/components/Router/NoMatch.vue b/src/__tests__/components/Router/NoMatch.vue deleted file mode 100644 index 8118731c..00000000 --- a/src/__tests__/components/Router/NoMatch.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/__tests__/vue-router-mocha.js b/src/__tests__/vue-router-mocha.js index 2f7553d1..c7263c78 100644 --- a/src/__tests__/vue-router-mocha.js +++ b/src/__tests__/vue-router-mocha.js @@ -1,18 +1,14 @@ -test.todo('Your test suite must contain at least one test.') +import '@testing-library/jest-dom' +import {render} from '..' -// import '@testing-library/jest-dom' -// import {render} from '..' +import About from './components/Router/About.vue' -// import About from './components/Router/About.vue' +const routes = [] +test('uses require("vue-router").default when require("vue-router") is undefined (useful for mocha users)', () => { + // Test for fix https://github.com/testing-library/vue-testing-library/issues/119 + jest.mock('vue-router', () => undefined) -// const routes = [] -// test('uses require("vue-router").default when require("vue-router") is undefined (useful for mocha users)', () => { -// // Test for fix https://github.com/testing-library/vue-testing-library/issues/119 -// jest.mock('vue-router', () => { -// return undefined -// }) - -// expect(() => render(About, {routes})).toThrowError( -// new TypeError("Cannot read property 'default' of undefined"), -// ) -// }) + expect(() => render(About, {routes})).toThrowError( + new TypeError("Cannot read property 'default' of undefined"), + ) +}) diff --git a/src/__tests__/vue-router.js b/src/__tests__/vue-router.js index d2e098d3..221175ab 100644 --- a/src/__tests__/vue-router.js +++ b/src/__tests__/vue-router.js @@ -1,38 +1,34 @@ -test.todo('Your test suite must contain at least one test.') - -// // Please notice that this example is a draft example on how to test -// // the router. -// // Related issue on Vue Test Utils: https://github.com/vuejs/vue-test-utils-next/issues/152 - -// import '@testing-library/jest-dom' -// import {render, fireEvent} from '..' -// import App from './components/Router/App.vue' -// import Home from './components/Router/Home.vue' -// import About from './components/Router/About.vue' - -// const routes = [ -// {path: '/', component: Home}, -// {path: '/about', component: About}, -// ] - -// test('full app rendering/navigating', async () => { -// // Notice how we pass a `routes` object to our render function. -// const {queryByTestId} = render(App, {routes}) - -// expect(queryByTestId('location-display')).toHaveTextContent('/') - -// await fireEvent.click(queryByTestId('about-link')) - -// expect(queryByTestId('location-display')).toHaveTextContent('/about') -// }) - -// test('setting initial route', () => { -// // The callback function receives three parameters: the Vue instance where -// // the component is mounted, the store instance (if any) and the router -// // object. -// const {queryByTestId} = render(App, {routes}, (vue, store, router) => { -// router.push('/about') -// }) - -// expect(queryByTestId('location-display')).toHaveTextContent('/about') -// }) +// Please notice that this example is a draft example on how to test +// the router. +// Related issue on Vue Test Utils: https://github.com/vuejs/vue-test-utils-next/issues/152 + +import '@testing-library/jest-dom' +import {waitFor} from '@testing-library/dom' +import {render, fireEvent} from '..' +import App from './components/Router/App.vue' +import Home from './components/Router/Home.vue' +import About from './components/Router/About.vue' + +const routes = [ + {path: '/', component: Home}, + {path: '/about', component: About}, +] + +test('full app rendering/navigating', async () => { + // Notice how we pass a `routes` object to our render function. + const {findByText, getByText, getByTestId} = render(App, {routes}) + + // Vue Router navigation is async, so we need to wait until the + // initial render happens + expect(await findByText('You are home')).toBeInTheDocument() + + await fireEvent.click(getByTestId('about-link')) + + // Same thing here: Vue Router navigation is async, so we need to wait until the + // navigation happens + await waitFor(() => + expect(getByTestId('location-display')).toHaveTextContent('/about'), + ) + + expect(getByText('You are on the about page')).toBeInTheDocument() +}) diff --git a/src/index.js b/src/index.js index 4fbdf6e0..2dc2432c 100644 --- a/src/index.js +++ b/src/index.js @@ -15,19 +15,16 @@ function render( TestComponent, { store = null, - // routes = null, + routes = null, container: customContainer, baseElement: customBaseElement, ...mountOptions } = {}, - // configurationCb, ) { const div = document.createElement('div') const baseElement = customBaseElement || customContainer || document.body const container = customContainer || baseElement.appendChild(div) - // let additionalOptions = {} - const plugins = [] if (store) { @@ -35,29 +32,23 @@ function render( plugins.push(createStore(store)) } - // if (routes) { - // const requiredRouter = require('vue-router') - // const {createRouter, createWebHistory} = - // requiredRouter.default || requiredRouter - // plugins.push(createRouter({history: createWebHistory(), routes})) - // } + if (routes) { + const requiredRouter = require('vue-router') + const {createRouter, createWebHistory} = + requiredRouter.default || requiredRouter - // Should we expose vue 3 app? if so, how? - // if (configurationCb && typeof configurationCb === 'function') { - // additionalOptions = configurationCb(router) - // } + const routerPlugin = createRouter({history: createWebHistory(), routes}) + plugins.push(routerPlugin) + } const mountComponent = (Component, newProps) => { const wrapper = mount( Component, merge({ attachTo: container, - global: { - plugins, - }, + global: {plugins}, ...mountOptions, props: newProps || mountOptions.props, - // ...additionalOptions, }), )