Add Nuxt.js recipe #2092
Add Nuxt.js recipe #2092
Conversation
|
bump |
There was a problem hiding this comment.
Hey @vinayakkulkarni thanks for the PR. I've been focusing on getting the 2.0 beta release out so unfortunately this fell by the wayside. Overall, and note that I'm not familiar with Vue & Nuxt, it's unclear why this requires Babel. Some other setup seems like it may be your preference rather than strictly necessary for testing with AVA. See my comments below. Let me know what you think, thanks.
docs/recipes/nuxt.md
Outdated
| hooks(['vue', 'js']).exclude(({filename}) => filename.match(/\/node_modules\//)).plugin('babel').push(); | ||
| ``` | ||
|
|
||
| **`.babelrc`:** |
There was a problem hiding this comment.
I believe Babel is recommending the config goes into babel.config.js files these days. Why does this require Babel at all?
There was a problem hiding this comment.
- Mostly for the
module-resolver
docs/recipes/nuxt.md
Outdated
| ], | ||
| "alias": { | ||
| "@": ".", | ||
| "~": "." |
There was a problem hiding this comment.
Are these typical aliases for Vue projects? It seems irrelevant for this recipe.
There was a problem hiding this comment.
Nuxt also has aliases which are helpful when writing Vue components in Nuxt apps.
There was a problem hiding this comment.
Are these typical aliases for Vue projects? It seems irrelevant for this recipe.
Yes, There can be components deep inside directories and test directory ideally also imitate the project structure (snapshots looks really seksy), so having ../../../../../pages/dashboard/sidebar/nav/logout.vue would be very ugly inside the test which lies inside /test/pages/dashboard/sidebar/nav/logout.spec.js. Hence the alias!
There was a problem hiding this comment.
Thanks for updating this @vinayakkulkarni. I think some of the setup could still be simplified, and I just noticed that the wrapper variable is reused between tests which won't always work. Could you have another look at this?
| ```js | ||
| import {mount, createLocalVue} from '@vue/test-utils'; | ||
| import test from 'ava'; | ||
| import Index from '@/pages/index.vue'; |
There was a problem hiding this comment.
Given that this is an example, maybe we could simplify it by removing the @ resolver? It'll be easier to understand the test example.
You could still document how to hook up Babel so it processes .vue files.
| const localVue = createLocalVue(); | ||
|
|
||
| test.beforeEach(() => { | ||
| wrapper = mount(Index, { |
There was a problem hiding this comment.
You cannot use a shared variable in a beforeEach() hook. It works in this example, because the tests are synchronous. But if you had asynchronous tests then the beforeEach hooks would run and change the wrapper value.
If it can be shared, use test.before(). But perhaps better yet is to assign it to the context:
test.beforeEach(t => {
t.context.wrapper = mount(Index, { localVue })
})
test('is a Vue instance', t => {
t.true(t.context.wrapper.isVueInstance())
})
|
Closing due to inactivity. |
Fixes #2063
Nuxtas well asAvacould be found here