Functional component and css modules $style error

[dmitry-saritasa]

➜  frontend git:(feature/PRJ-156-example-of-unit-tests) ✗ npm list vue-jest vue jest
'Tipz:' npmL vue-jest vue jest

├── jest@22.4.4 
├── vue@2.5.16 
├── vue-jest@2.6.0

Component

<template functional>
  <div :class="[$style.authenticatedUser, data.class, data.staticClass]">
    <router-link :to="{ name: 'user-profile' }"
                 :class="[$style.link, $text.h5]"
                 :exact-active-class="$style.active">
      <svg v-svg
           :class="$style.icon"
           symbol="ic_account"
      />
      {{ props.user.firstName }}
      {{ props.user.lastName }}
    </router-link>
  </div>
</template>

<style src="_assets/scss/base/_typography.scss" lang="scss" module="$text">
</style>

<style lang="scss" module>
@import '~@/assets/scss/utils';

.link {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding: 0 10px;
  font-weight: bold;
  color: $white;
  text-decoration: none;
  text-transform: capitalize;
  opacity: 0.8;

  &:active,
  &:link,
  &:visited {
    color: $white;
    text-decoration: none;
    box-shadow: none;
  }

  &:hover {
    &::before,
    &::after {
      position: absolute;
      left: 0;
      display: block;
      width: 100%;
      height: 1px;
      content: '';
      background-color: $tertiary;
      opacity: 1;
    }

    &::after {
      top: 0;
    }

    &::before {
      bottom: 0;
    }
  }
}

.active {
  opacity: 1;

  &::before,
  &::after {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    content: '';
    background-color: $tertiary;
  }

  &::after {
    top: 0;
  }
  &::before {
    bottom: 0;
  }
}

.icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
  fill: $white;
}

</style>

Test

import { shallow, createLocalVue } from '@vue/test-utils';
import AuthenticatedUser from './authenticated-user';

const localVue = createLocalVue();

describe('src/apps/auth/components/authenticated-user', () => {
  it('exports a valid component', () => {
    expect(AuthenticatedUser).toMatchSnapshot();
  });

  it('renders user first name and last name', () => {
    const wrapper = shallow(AuthenticatedUser, {
      localVue,
      propsData: {
        user: {
          firstName: 'Jim',
          lastName:  'Smith',
        },
      },
    });

    expect(wrapper.text()).toBe('Jim Smith');
  });
});

Output

 FAIL  src/apps/auth/components/authenticated-user.unit.js
  src/apps/auth/components/authenticated-user
    ✓ exports a valid component (11ms)
    ✕ renders user first name and last name (27ms)

  ● src/apps/auth/components/authenticated-user › renders user first name and last name

    TypeError: Cannot read property 'authenticatedUser' of undefined

      3 |     <router-link :to="{ name: 'user-profile' }"
      4 |                  :class="[$style.link, $text.h5]"
    > 5 |                  :exact-active-class="$style.active">
      6 |       <svg v-svg
      7 |            :class="$style.icon"
      8 |            symbol="ic_account"

[jeremyzahner]

@dmitry-saritasa This was already fixed in #92. It has not gotten released so far tho. @eddyerburgh Maybe we could do that?

[jeremyzahner]

Ping @eddyerburgh.

Could we maybe release the added functionality from #92 as a patch?

[eddyerburgh]

This was released in v3