use components discovery with tests

[bob-lee]

Describe the bug
Tried this library first time, dynamic imports are working great!
About auto scan feature, I found it saves many lines of codes but some tests are getting error:

[Vue warn]: Unknown custom element: <MyComponentB> - did you register the component correctly? ...

this is the case where I have MyComponentA and MyComponentB defined under /components folder and MyComponentA is using MyComponentB.

If I resurrect lines of codes that imports MyComponentB in MyComponentA, the test are working back ok but I wonder if I am missing something?

Additional context
nuxt@2.13.0
@nuxt/components@1.0.3
@vue/test-utils@1.0.3

[danielroe]

I think it would be possible to create something that auto imports components at test level. Otherwise @nuxt/components only is usable at pages/layouts level (typically tested via e2e rather than unit) rather than within components.

[lambda0xff]

Yes, please implement auto imports at test level.

[Merott]

As a workaround, I'm registering all components as global Vue components in my jest setup file:

[
  'app/components/MyComponentA.vue',
  'app/components/MyComponentB.vue',
  'ui-kit/components/ComponentA.vue',
  'ui-kit/components/ComponentB.vue',
  'ui-kit/components/ComponentC.vue',
].forEach((path) => {
  const name = path.match(/(\w*)\.vue$/)[1];
  const prefix = path.startsWith('ui-kit/') ? 'Ui' : '';
  Vue.component(`${prefix}${name}`, require(path).default);
});

I could automate this by pulling in the configuration/using globs, but I don't feel the need to make it more complicated than this, especially that I'm working on the project alone.

I've spent the past couple of days messing with my project configuration. Not sure if it's been worth all the trouble, but I hope this helps somebody!

[harrytran998]

As a workaround, I'm registering all components as global Vue components in my jest setup file:

[
  'app/components/MyComponentA.vue',
  'app/components/MyComponentB.vue',
  'ui-kit/components/ComponentA.vue',
  'ui-kit/components/ComponentB.vue',
  'ui-kit/components/ComponentC.vue',
].forEach((path) => {
  const name = path.match(/(\w*)\.vue$/)[1];
  const prefix = path.startsWith('ui-kit/') ? 'Ui' : '';
  Vue.component(`${prefix}${name}`, require(path).default);
});

I could automate this by pulling in the configuration/using globs, but I don't feel the need to make it more complicated than this, especially that I'm working on the project alone.

I've spent the past couple of days messing with my project configuration. Not sure if it's been worth all the trouble, but I hope this helps somebody!

@Merott Can you show your jest config file, please?

[Merott]

@harrytran998 are you running into a particular issue? I don't have anything special for auto-scanning components in my jest config file:

// jest.config.js

const path = require('path');

module.exports = {
  moduleNameMapper: {
    '^@@?/(.*)$': '<rootDir>/$1',
    '^~~?/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
  },
  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
  },
  testPathIgnorePatterns: ['<rootDir>/(.vscode|node_modules|cypress)/'],
  setupFilesAfterEnv: [path.resolve(__dirname, 'jest.setup.ts')],
  snapshotSerializers: ['jest-serializer-vue'],
};

[bob-lee]

Thanks @Merott, I ended up doing:

// test/setupTest.js (jest setup)

const components = [
  '../components/MyComponentA.vue',
  '../components/MyComponentB.vue',
]
components.forEach((path) => {
  const name = path.match(/(\w*)\.vue$/)[1];
  Vue.component(`${name}`, require(path).default);
});

then could use auto scan feature freely. Happy for now.

[JBustin]

Thanks, I have tried this solution which works.
But the duration of my tests went from 20ms to 40ms. Normal, because we load all components before each test suites.
I have failed to improve it.
Code lines VS unit tests duration, I vote to keep unit test duration low. I hope for a good solution at the end.

[ryoju-ohata]

This solution is great, but it fails when some component is contained within auto-scanning components.

[ryoju-ohata]

The following code can automatically register components.

// jest.setup.js
import path from 'path'
import glob from 'glob'
import Vue from 'vue'

glob.sync(path.join(__dirname, './src/components/**/*.vue')).forEach(file => {
  const name = file.match(/(\w*)\.vue$/)[1]
  Vue.component(name, require(file).default)
})

global.Vue = Vue

[DragonWhisperer]

I hope someone will give it a clean solution.
Just register all the components in the folder is not enough because I use font-awasom-icon component inside the tested component, and I get error:

[Vue warn]: Unknown custom element: <font-awesome-icon>

I can use stubs:

const wrapper = mount(MyComponent, { stubs: ['font-awesome-icon'] })

But it's not clean.

[fbtwitter]

I don't know if it's truly not affecting to any configuration that running on test system..

But i found this configuration working to me, and these setting helps me prevents warning @bob-lee mentions.
https://dev.to/bawa_geek/how-to-setup-jest-testing-in-nuxt-js-project-5c84

By adding code in ./test/jest.setup.js

import Vue from 'vue'
import { config } from '@vue/test-utils'

Vue.config.silent = true

// Vue.config.ignoredElements = ['nuxt-link']
// Mock Nuxt components
config.stubs.nuxt = { template: '<div />' }
config.stubs['nuxt-link'] = { template: '<a><slot /></a>' }
config.stubs['no-ssr'] = { template: '<span><slot /></span>' }

and add these lines in config file ./jest.config.js
setupFilesAfterEnv: ['./test/jest.setup.js']

[brendan1212]

// test/setupTest.js (jest setup)

const components = [
  '../components/MyComponentA.vue',
  '../components/MyComponentB.vue',
]
components.forEach((path) => {
  const name = path.match(/(\w*)\.vue$/)[1];
  Vue.component(`${name}`, require(path).default);
});

@danielroe Is there something that could be implemented to include auto-scanning? This solution here works, but I can't get @ryoju-ohata 's solution working.

[pi0]

There are actually two solutions to polyfill components in test environment:

• Importing .nuxt/components/plugin.js (auto registers to global Vue)
• Importing .nuxt/components/index.js and register manually

For both, we need a nuxt build step. (an upcoming nuxt dryrun would make it faster to only generate templates)