Unit Testing in Vue.js - Why isn't my data showing?!? [Solved]

1

Solved: my test was expecting project to be an Object and not an Array of Objects

Hi guys,

I’m pretty new to testing and really want to learn it, but can’t figure out why my Vue props aren’t showing up in the test. I’m using Jest and following along the standard methods in the Vue documentation. Here’s what’s happening:

  • I import the component into the test file and console log out the html
  • Then I run yarn run test:unit
  • In the console.log() the HTML shows but no props data…

1. Here is my CardItem.vue file

<div class="card-body">
            <a href="https://codepen.io/JackEdwardLyons/pen/bEpPqB" target="_blank">
                <h4 class="card-title" data-test__project-title>
                    {{ project.projectTitle }}
                    <small class="author sm-60">
                        posted by {{ project.projectAuth }}
                    </small>
                </h4>
            </a>
</div>
<script>
export default {
  props: ['project']
}
</script>

2. Here, I am importing the CardItem Component into Test Suite

import { mount } from '@vue/test-utils'
import CardItem from '@/components/CardItem.vue'

describe('CardItem.vue', () => {
  it('renders the MainCard template with correct props', () => {
    const CARD_ITEM = mount(CardItem, {
      propsData: {
        project: [
          {
            projectTitle: 'Testing Vue App',
            projectAuth: 'Jack'
          }
        ]
      }
    })

    console.log(CARD_ITEM.html()) 

    expect(CARD_ITEM.props().project[0].projectTitle).toBe('Testing Vue App')
  })
})

3. This is what the console.log(CARD_ITEM.html()) returns (where is the props data??)

<div class="card-body">
            <a href="https://codepen.io/JackEdwardLyons/pen/bEpPqB" target="_blank">
                <h4 class="card-title" data-test__project-title>
                    
                    <small class="author sm-60">
                        posted by
                    </small>
                </h4>
            </a>
</div>

Can anyone help me? Thank you in advance!! :slight_smile: