Jest測試Vue組件的指令參數

在使用Jest進行Vue組件測試時，如果你需要測試組件中的指令（例如v-bind、v-on等）或者傳遞給組件的props，你可以通過掛載組件并檢查其渲染結果或觸發事件來進行。

以下是一個使用Vue 3和Jest測試Vue組件指令參數的基本示例：

首先，安裝必要的依賴：

npm install vue@next vue-loader@next vue-template-compiler@next @vue/test-utils@next jest vue-jest babel-jest @babel/core @babel/preset-env --save-dev

然后，創建一個簡單的Vue組件MyComponent.vue：

  <div>
   <button @click="handleClick" :disabled="isDisabled">Click Me</button>
  </div>
</template><script>
export default {
  props: {
    isDisabled: Boolean
  },
  methods: {
    handleClick() {
      this.$emit('clicked');
    }
  }
}
</script>

接下來，編寫一個測試文件MyComponent.spec.js：

import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('emits "clicked" event when button is clicked and not disabled', async () => {
    const wrapper = mount(MyComponent, {
      propsData: {
        isDisabled: false
      }
    });

    // 確保按鈕沒有被禁用
    expect(wrapper.find('button').attributes('disabled')).toBeUndefined();

    // 觸發點擊事件
    await wrapper.find('button').trigger('click');

    // 檢查是否觸發了"clicked"事件
    expect(wrapper.emitted('clicked')).toHaveLength(1);
  });

  it('does not emit "clicked" event when button is disabled', async () => {
    const wrapper = mount(MyComponent, {
      propsData: {
        isDisabled: true
      }
    });

    // 確保按鈕被禁用
    expect(wrapper.find('button').attributes('disabled')).toBe('disabled');

    // 嘗試觸發點擊事件
    await wrapper.find('button').trigger('click');

    // 檢查是否沒有觸發"clicked"事件
    expect(wrapper.emitted('clicked')).toBeUndefined();
  });
});

在這個測試中，我們檢查了兩種情況：當按鈕未被禁用時，點擊按鈕會觸發clicked事件；當按鈕被禁用時，點擊按鈕不會觸發clicked事件。

請注意，這個例子假設你已經配置了Jest和Vue Test Utils，并且你的項目結構和配置文件（如jest.config.js）已經設置好了。如果你還沒有配置，你需要根據你的項目需求進行相應的配置。