Question

How to write tests for vue menu component using Jest

Posted June 21, 2021 632 views
JavaScriptVue.js

I’m very new to Vue/Jest and I have been struggling to fathom how to write my tests for a menu component and I can’t seem to find the answers. I need to write test cases for the props that are passed in the menu. One test case is when the burger menu is clicked and the menu is shown. The other is to check whether the account and logout menu items is shown or not shown.

In my MobileMenu.vue file:

 <transition name="fade">
      <div
        v-show="active"
        class="overlay"
        @click.stop="$emit('toggle-menu')"
      />
    </transition>
    <transition name="slide-left">
      <ul
        v-show="active"
        class="mobile-menu"
        @click="handleClick"
      >
        <li
        class="close"
        @click.stop="$emit('toggle-menu')"
        >
        </li>
        <template v-if="isLogged">
          <MobileMenuItem
            to="/account/dashboard"
            name="My Account"
            data-testid="loggedIn-menu-items"
          />
          <MobileMenuItem
            to="/logout"
            name="Logout"
            data-testid="loggedIn-menu-items"
          />
        </template>
      </ul>
    </transition>

    <script>
        import MobileMenuItem from '@/components/layout/menu/MobileMenuItem'
        export default {
            name: 'MobileMenu',
            components: { MobileMenuItem },
            props: {
                active: {
                    type: Boolean,
                    default: false,
                },
                isLogged: {
                    type: Boolean,
                    default: false,
                }
            },
            methods: {
                handleClick($event) {
                    if ($event.target.tagName === 'A') {
                        this.$emit('toggle-menu')
                    }
                }
            }
        }
    </script>

In my MobileMenu.spec.js:

 import Vue from 'vue'
    import Vuetify from 'vuetify'
    import '@testing-library/jest-dom/extend-expect'
    import { render, screen } from '@testing-library/vue'
    import MobileMenu from '@/components/layout/menu/MobileMenu.vue'

    function renderComponent(props = {}) {
        return render(MobileMenu, {
          props,
          mocks: {
            $vuetify: { breakpoint: {}}
          },
        });
    }

    describe('Testing MobileMenu Component props', () => {
    it('becomes active when the hamburger button is clicked', () => {

    })

    it('if a user is not logged in, do not show my account and logout', () => {
      expect(screen.queryByTestId('loggedIn-menu-items')).not.toBeInTheDocument();
      //expect(screen.queryByTestId('loggedIn-menu-items')).toHaveLength(0)
        // const { container } = renderComponent()
        // console.log(container)
        // renderComponent({
        //     isLogged: false
        // })
        // console.log(screen.queryByTestId('loggedIn-menu-items'))
        // expect(screen.queryByTestId('loggedIn-menu-items')).not.toBeInTheDocument()
        //console.log(screen.queryByTestId('loggedIn-menu-items'))
        //expect(screen.queryByTestId('loggedIn-menu-items')).toHaveLength(0)
    })

    it('if a user is logged in, show my account and logout', () => {
      renderComponent({
        isLogged: true
      })
      expect(screen.getByTestId('loggedIn-menu-items')).toBeTruthy();
      // const elements = screen.queryByTestId('loggedIn-menu-items');
      // console.log(elements)
      //expect(screen.getByTestId('loggedIn-menu-items').length).toHaveLength(2);


        //expect(screen.queryByTestId('loggedIn-menu-items')).toBeInTheDocument()

        //console.log(screen.queryByTestId('loggedIn-menu-items'))

        //expect(screen.queryByTestId('loggedIn-menu-items')).toHaveLength(2)
    })
})

As you can see I’ve attempted quite a bit to get this right but I am really struggling with it and my tests keep failing.

Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!