Nuxt testing @nuxt/test-utils or @vue/test-utils ?

[carlossolmedo]

Hello there,

I recently started with the tests, but unfortunately I didn't find good documentation about testing in the nuxt website. Probably someone knows the good sources or the correct approach.

Thank you 🙂

I found : @nuxt/test-utils

[Cobertos]

@vue/test-utils is still useful for when you want to test a component separately from the app.

So for example, in my app I have a ProductBanners.vue which I test standalone.

import test from 'ava';
import { mount, createLocalVue } from '@vue/test-utils';
import { Product } from '@/assets/js/Product.js';
import ProductBanners from '@/components/product/ProductBanners.vue';

test.before('setup local Vue for these tests', (t) => {
  const localVue = createLocalVue();
  t.context.localVue = localVue;
});

test('ProductBanners - Shows nothing if not special', (t) => {
  // arrange
  const product = new Product({
    name: 'Test Product',
    price: '3.00'
  });
  const { localVue } = t.context;
  const mounted = mount(ProductBanners, { localVue,
    propsData: {
      product
    }
  });

  // assert
  const txt = mounted.element.textContent;
  t.assert(txt.match(/Test Product/i), 'Show name of product');
});

I've personally not used @nuxt/test-utils, but it looks like it's more for testing your entire app at once. This is more of an integration test or end-to-end test. In the past, you'd normally have to set it all up manually, as can be seen from the default create-nuxt-app ava e2e test template. I imagine @nuxt/test-utils basically just packages up all the boilerplate into one library.

Here's an example of a more boilerplate-y e2e test without @nuxt/test-utils

import fs from 'fs';
import util from 'util';
import test from 'ava';
import sinon from 'sinon';
import { Nuxt, build } from 'nuxt';
import config from '../nuxt.config.js';
config.dev = false; // Needs to be prod for tests
config.buildDir = '.nuxt-test';

const rmdir = util.promisify(fs.rmdir);

// Make sure you use an extra '--' in your ava invokation (or potentially you might
// need two '--'s if you're running from npm run)
const needsRebuild = process.argv.includes('--rebuild-app');

// Init Nuxt.js and start listening on localhost:4000
test.before('Init Nuxt.js', async (t) => {
  const nuxt = new Nuxt(config);
  // Rebuild the production test app if passed a flag for it
  if (needsRebuild) {
    await rmdir('.nuxt-test', { recursive: true });
    await new Promise((resolve, reject) => {
      nuxt.hook('builder:prepared', () => console.log('builder:prepared'));
      nuxt.hook('builder:extendPlugins', () => console.log('builder:extendPlugins'));
      nuxt.hook('build:templates', () => console.log('build:templates'));
      nuxt.hook('build:extendRoutes', () => console.log('build:extendRoutes'));
      nuxt.hook('build:compile', () => console.log('build:compile'));
      nuxt.hook('build:compiled', () => console.log('build:compiled'));
      nuxt.hook('build:done', () => {
        console.log('build:done');
        resolve();
      });
      build(nuxt);
    });
  }
  nuxt.listen(4000, 'localhost');
  // Enable live build & reloading on dev
  // if (isDev) {
  //   build(nuxt)
  // }
  t.context.nuxt = nuxt;
});

test('/login - Renders form', async t => {
  const { nuxt } = t.context;
  const window = await nuxt.renderAndGetWindow('http://localhost:4000/login');
  t.truthy(window.document.querySelector('form.login-form [name="email"]'));
  t.truthy(window.document.querySelector('form.login-form [name="password"]'));
  t.truthy(window.document.querySelector('form.login-form button[type="submit"]'));
});

[carlossolmedo]

I asked myself the same question, but your answer help me to see more clearly. I think you're right.
Likewise, I'll try it both. ;)

Thank you so much @Cobertos for your explanation 🙂