Nuxt.js: Unable to run ava tests using v1.0.0-rc4

Created on 15 Aug 2017  Â·  7Comments  Â·  Source: nuxt/nuxt.js

I'm following the documentation for end to end testing and it is throwing errors for v1.0.0-rc4 but it seems to be working when I revert to v1.0.0-alpha2. Here is the error message:

index › Init Nuxt.js

16:   config.dev = false // production build
17:   nuxt = new Nuxt(config)
18:   await nuxt.build()

Rejected promise returned by test. Reason:

TypeError {
  message: '_nuxt2.default is not a constructor',
}

https://nuxtjs.org/guide/development-tools#end-to-end-testing
https://nuxtjs.org/examples/testing

I've cloned the starter-template and then followed the examples and documentation at the links above (though they do have a few discrepancies).

This question is available on Nuxt.js community (#c1223)

Most helpful comment

I fixed the issue, but had to look through the Nuxt test cases for express to find the answer.

https://github.com/nuxt/nuxt.js/blob/dev/test/express.test.js

It looks like several things have changed with the import that need to be altered in the example for them to start working again with the latest release candidate. The most important parts seem to be starting express directly and importing { Nuxt, Builder } from nuxt instead. Here is a possible solution:

import test from 'ava'
import express from 'express'
import { Nuxt, Builder } from 'nuxt'
import { resolve } from 'path'

const port = 4000
let nuxt = null
let server = null

test.before('Init Nuxt.js', async t => {
  const app = express()
  const rootDir = resolve(__dirname, '..')
  let config = {}

  try {
    config = require(resolve(rootDir, 'nuxt.config.js'))
  } catch (e) {
    console.log('Unable to locate nuxt config!')
  }

  config.rootDir = rootDir
  config.dev = false

  nuxt = new Nuxt(config)

  await new Builder(nuxt).build()

  app.use(nuxt.render)

  server = app.listen(port)
})

test('Route / exits and render HTML', async t => {
  let context = {}
  const { html } = await nuxt.renderRoute('/', context)
  t.true(html.includes('<h1 class="red">Hello world!</h1>'))
})

test('Route / exits and render HTML with CSS applied', async t => {
  const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
  const element = window.document.querySelector('.red')
  t.not(element, null)
  t.is(element.textContent, 'Hello world!')
  t.is(element.className, 'red')
  t.is(window.getComputedStyle(element).color, 'red')
})

test.after('Closing server and nuxt.js', t => {
  server.close()
  nuxt.close()
})

All 7 comments

Same here

I fixed the issue, but had to look through the Nuxt test cases for express to find the answer.

https://github.com/nuxt/nuxt.js/blob/dev/test/express.test.js

It looks like several things have changed with the import that need to be altered in the example for them to start working again with the latest release candidate. The most important parts seem to be starting express directly and importing { Nuxt, Builder } from nuxt instead. Here is a possible solution:

import test from 'ava'
import express from 'express'
import { Nuxt, Builder } from 'nuxt'
import { resolve } from 'path'

const port = 4000
let nuxt = null
let server = null

test.before('Init Nuxt.js', async t => {
  const app = express()
  const rootDir = resolve(__dirname, '..')
  let config = {}

  try {
    config = require(resolve(rootDir, 'nuxt.config.js'))
  } catch (e) {
    console.log('Unable to locate nuxt config!')
  }

  config.rootDir = rootDir
  config.dev = false

  nuxt = new Nuxt(config)

  await new Builder(nuxt).build()

  app.use(nuxt.render)

  server = app.listen(port)
})

test('Route / exits and render HTML', async t => {
  let context = {}
  const { html } = await nuxt.renderRoute('/', context)
  t.true(html.includes('<h1 class="red">Hello world!</h1>'))
})

test('Route / exits and render HTML with CSS applied', async t => {
  const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
  const element = window.document.querySelector('.red')
  t.not(element, null)
  t.is(element.textContent, 'Hello world!')
  t.is(element.className, 'red')
  t.is(window.getComputedStyle(element).color, 'red')
})

test.after('Closing server and nuxt.js', t => {
  server.close()
  nuxt.close()
})

Might be a good idea to update the example and the documentation before officially closing this issue? I feel like having a working test example on the website would be good for the official 1.0 release.

@mcfarljw Sorry we have to close resolved issues related to the nuxt itself for better support. Indeed adding examples to the docs is a good idea and your example seems nice. Feel free making a PR/Issue to nuxt/docs updating provided examples to match 1.x.

I have issue with nuxt ^0.10.7 (webpack) and AVA for unit testing.
Didn't getting any solution.
I want to test each component and functions written in library (*.js).
Any help will be appreciated.

There's one thing that is not clear for me when using Ava and Nuxt, and that is: splitting up tests into multiple files.

Every Ava file runs in its own process, so you'll need a Nuxt instance for every file. Or does anyone have a better setup for this? I'd rather not put every test in a single file. It would be much prefered to spin up Nuxt once, and pass it to my tests, instead of spinning up multiple of Nuxt instances for each file.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mikekidder picture mikekidder  Â·  3Comments

vadimsg picture vadimsg  Â·  3Comments

jaredreich picture jaredreich  Â·  3Comments

bimohxh picture bimohxh  Â·  3Comments

gary149 picture gary149  Â·  3Comments