Блог

Я пытаюсь написать тест для таргетинга, правильно ли передан prop по умолчанию в HTML с помощью jest и vue-test-utils . Кажется, я не могу найти свой целевой селектор. Я хочу иметь возможность проверить, что конкретный p тег содержит правильный текст. В этом случае, если передается имя prop, оно отображает это. Если нет, то функция по умолчанию отображает payTo значение по умолчанию.

Я пробовал несколько комбинаций привязки к оболочке, но безрезультатно.

 console.log(wrapper.html()) // presents all the page html
  

 console.log(wrapper.classes()) // array showing only one class ('.row-space-between')
  

Вот мой компонент:

 <template>
  <div class="row-space-between">
    <div>
      <h3>{{ $t('label.payTo') }}</h3>
      <p>{{ merchantName.payTo }}</p> // TARGET SELECTOR
    </div>
    <div class="align-right">
      <h3>{{ $t('label.estimatedTotal') }}</h3>
      <p>{{ amount }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayTo',
  props: {
    'merchant-name': {
      type: Object,
      // default: {} with type obj or arr default function is required
      default: function () {
        return { merchantName: {
          payTo: 'Order Total'
         }
       }
    },
    amount: {
      type: String,
      default: ''
    }
  }
}
  

И вот мой тест:

 describe('PayTo.vue', () => {
  let wrapper

  beforeEach(() => {
    wrapper = shallowMount(PayTo, {
      mocks: {
        $t
      },
      propsData: {
        merchantName: {
          payTo: 'foo-merchant-name'
        },
        amount: '$110.00'
      }
    })
  })
  it('[positive] should render correct contents', () => {
    // PayTo.props.merchantName.default()
    expect(wrapper.html()).toMatchSnapshot()
  })

  // The following two tests satisfy testing the default function in PayTo.vue props validation if not tested, coverage falls to zero

  // This test is meaningless until I can be more specific in targeting

  it('[positive] should display `AWS`', () => {
    wrapper.setProps({
      merchantName: {
        payTo: 'AWS'
      }
    })
    expect(wrapper.contains('p'))
  })

  it('[negative] should display `Order Total`', () => {
    wrapper.setProps({
      merchantName: {
        payTo: 'Order Total'
      }
    })
    console.log(wrapper.contains('div > p'))
    expect(wrapper.contains('p'))
  })
  

Здесь можно было бы использовать :first-child псевдокласс:

 expect(wrapper.contains("div:first-child > p")).toBeTruthy()
  

Я бы также проверил, что текст в p соответствует ожидаемому значению:

 expect(wrapper.find("div:first-child > p").text()).toBe("Order Total")
  

Также обратите внимание, что значение по умолчанию вашего merchant-name prop не должно содержать другого merchantName ключа. В противном случае, когда этот реквизит не указан, payTo доступ к нему был бы осуществлен merchantName.merchantName.payTo .

 props: {
  "merchant-name": {
    type: Object,
    default: function() {
      return {
        // merchantName: {  // DON'T DO THIS
        //  payTo: "Order Total"
        // }

        payTo: "Order Total"
      }
    }
  },
}