storybook 可以獨立建立元件，並搭配 @storybook/addon-controls 控制 props 輸入及 @storybook/addon-actions 顯示 emit 輸出的內容，當然可以透過手動開啟 GUI 來測試元件是否符合規格，storybook 已經完成 render 的步驟，自動化的測試只差一步了！
storybook 可以搭配 interaction 套件進行元件測試，先按照「[Vue.js] storybook安裝方式與環境建置」完成 vue+storybook 的安裝，文內還是使用 Vue2，如果使用 Vue3 其實步驟差異不大。
安裝
執行指令
設定
請開啟 .storybook/main.js，註冊這個 addon interactions 套件，@storybook/addon-interactions 一定要放在 @storybook/addon-actions 或 @storybook/addon-essentials 的後面。
module.exports = {
addons: [
'@storybook/addon-actions', // or '@storybook/addon-essentials'
'@storybook/addon-interactions',
],
features: {
interactionsDebugger: true,
},
};
撰寫測試
寫測試前，要先了解測試元件的重點是「邏輯！」
第一視覺的邏輯，經由 props 或 slots 改變元件顯示上的差異，例如文字內容或是決定是否顯示哪些區域等；第二行為的邏輯，當使用者輸入或點擊按鈕等，此時畫面產生的變化或是 emit 的事件內容等。
使用 jest + testing library 做測試，testing library底層為 vue test utils，兩者相比 testing library 可以更聚焦於元件測試，不容易因為非邏輯的變更，連同測試都要一起做調整。
簡單寫一個元件 NameEditor.vue，有兩個 props，按下按鈕可以發出 event。
<template>
<div>
<div
v-text="message" />
<input
type="text"
placeholder="name"
v-model.trim="name">
<button
type="button"
@click="onButtonClick"
v-text="buttonText" />
</div>
</template>
<script>
import {ref} from 'vue';
export default {
props: {
message: {
type: String,
required: true,
},
buttonText: {
type: String,
required: true,
},
},
setup(props, {emit}) {
const name = ref(undefined);
const onButtonClick = () => {
emit('subit', name);
};
return {
name,
onButtonClick,
};
},
};
</script>
接著，NameEditor.stories.js story基本的內容：
import {userEvent, screen} from '@storybook/testing-library';
import {expect} from '@storybook/jest';
import NameEditor from './NameEditor';
export default {
title: 'NameEditor',
argTypes: {
message: {
control: 'text',
},
buttonText: {
control: 'text',
},
onNameSubmit: {
action: 'submit',
},
},
};
const Template = (args, {argTypes}) => ({
props: Object.keys(argTypes),
components: {
NameEditor,
},
template: `
<NameEditor
:message="message"
:button-text="buttonText"
@submit="onNameSubmit" />
`,
});
export const Default = Template.bind({});
Default.args = {
message: 'Input your name',
buttonText: 'Submit',
};
interaction 的測試，必須寫在 play 裡面，測試流程是先輸入文字後，按下按鈕：
Default.play = async ({args}) => {
const mockName = 'Chenuin';
const button = screen.getByRole('button');
await userEvent.type(screen.getByPlaceholderText('name'), mockName); // input name
await userEvent.click(button); // click button
const {message, buttonText, onNameSubmit} = args;
expect(onNameSubmit).toHaveBeenCalledTimes(1);
expect(onNameSubmit).toBeCalledWith(mockName);
expect(screen.getByText(message)).toBeTruthy();
expect(button.textContent).toBe(buttonText);
};
可以透過 args 取得 argTypes 的內容，發出的 event 自動 mock 可以直接驗證，只要把握 testing library獲取Dom的方式，需要注意 getBy... 和 queryBy... 兩者差別，前者若取不到任何相符條件的element，會拋出exception，後者不會。其他部分就是 jest 語法。
執行
開啟 storybook 就會自動執行測試內容，如果有錯誤也會將訊息顯示畫面。
(畫面如下)
到這邊就告一段落，如果希望能夠導入CI，可以使用 @storybook/test-runner 。
開啟 package.json 加入 npm script
{
"scripts": {
"test-storybook": "npx test-storybook"
}
}
預設 test runner 會找到 http://localhost:6006 進行測試，可以加上 --url 來改變路徑。
如果不是本地啟用storybook，可以利用 https://www.chromatic.com/ 來管理 storybook，就可以透過 internet 進行。Chromatic 可以用來發布 storybook、主要方便團隊 UI Review，藉此進行 CI 測試整合會更加容易。
參考資料
storybook 套件
- https://storybook.js.org/docs/vue/essentials/actions
- https://storybook.js.org/docs/vue/essentials/controls
- https://storybook.js.org/docs/vue/essentials/interactions
- https://storybook.js.org/addons/@storybook/test-runner/
