How to write tests for vue menu component using Jest

[Lynds]

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.

[Paul_Wilkins]

I find that it’s much harder to write tests for things that already exist, because that thing hasn’t been made to be easy to test.

If I were in your situation, I would remove all of the menu behaviour completely and start again, using the previous code as a template for future work.

I would ask myself, what behaviour that doesn’t yet exist without the menu do I want to occur. Write a test for that behaviour. Then add a piece of the that menu feature that does that behaviour.