Error when <transition> is the tag wrapper

[marcosmoura]

I'm using AVA with Avoriaz. Both on latest version. If the wrapper tag is a functional component, like <transition>, Avoriaz throws an error:

Uncaught Exception
TypeError: Cannot read property 'split' of undefined
  zn (node_modules/vue/dist/vue.min.js:6:31287)
  Vn (node_modules/vue/dist/vue.min.js:6:30990)
  Timeout._onTimeout (node_modules/vue/dist/vue.min.js:7:907)

My component:

<template>
  <transition name="page-container" appear>
    <div class="page-container">
      <slot />
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'page-container'
  }
</script>

My test case:

import test from 'ava'
import { mount } from 'avoriaz'
import PageContainer from './PageContainer.vue'

const wrapper = mount(PageContainer)

test('should have the correct name', t => {
  t.is(wrapper.name(), 'page-container')
})

test('should render parent wrapper', t => {
  const hasPageWrapper = wrapper.contains('.page-wrapper')

  t.is(hasPageWrapper, true)
})

What do you think that could be?

[eddyerburgh]

Temporary solution is to run transition tests in the browser, because they don't error in there. You can use this boilerplate as an example - https://github.com/eddyerburgh/avoriaz-karma-mocha-example

I've had a quick look at the error in Vue, in this function - https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/transition-util.js#L113 - styles['animation Delay'] is undefined, so when the code tries to split undefined it errors.

I'm not sure why, but I think it's probably due to the stylesheet implementation/ some other function in browserEnv (jsDOM).

[eddyerburgh]

Transitions haven't been added to JSDOM yet - https://github.com/tmpvar/jsdom/issues/1781.

You'll need to run transition tests in the browser