Блог

Я хотел бы протестировать конкретные методы в своих компонентах Vue с одним файлом, используя Jest. Я использую Vue 3 с API композиции, и я хотел бы использовать этот <script setup> подход, но, похоже, это предотвращает это.

Это работает:

Компонент:

 <script>
export default {
  setup() {
    const testMethod = function(input) {
      return input   1;
    };
    return { testMethod };
  },
};
</script>
 

Тест:

 test('should be 2', () => {
  expect(TestComponent.setup().testMethod(1)).toBe(2); // success
});
 

Это не работает:

Компонент:

 <script setup>
const testMethod = function(input) {
  return input   1;
};
</script>
 

Тест:

 test('should be 2', () => {
  expect(TestComponent.setup().testMethod(1)).toBe(2); // TypeError: Cannot destructure property 'expose' of 'undefined' as it is undefined.
  expect(TestComponent.testMethod(1)).toBe(2); // TypeError: _testComponent.default.testMethod is not a function
});
 

Существует ли другой способ достичь этого или доступ к методам в компоненте невозможен с помощью этого <script setup> подхода?

Правка: В частности, ищу решения, которые не требуют монтажа гаджета с помощью чего-то вроде vue-тестов.

Привязки, объявленные в <script setup> , по умолчанию скрыты, но вы можете предоставить любой из них экземпляру компонента с помощью defineExpose() :

 // MyComponent.vue
<script setup>
const testMethod = function(input) {
  return input   1;
};

defineExpose({
  testMethod
})
</script>
 

Затем в своем тесте получите доступ к открытым привязкам через wrapper.vm (экземпляр компонента из @vue/test-utils оболочки).:

 // MyComponent.spec.js
import MyComponent from '@/components/MyComponent.vue'

test('should be 2', () => {
  const wrapper = shallowMount(MyComponent)
  expect(wrapper.vm.testMethod(1)).toBe(2)
})
 

ДЕМОНСТРАЦИЯ