Storybook 擴充功能 Jest

用於檢視 Jest 單元測試結果的 Storybook 擴充功能。

框架支援

請查看上方的 Live Storybook。

安裝

透過將 @storybook/addon-jest 作為開發依賴項加入來安裝此擴充功能，使用

npm install --save-dev @storybook/addon-jest

或者如果您使用 yarn 作為套件管理器

yarn add --dev @storybook/addon-jest

設定

在您的 .storybook/main.js 中註冊此擴充功能

export default {
  addons: ['@storybook/addon-jest'],
};

Jest 設定

在執行 Jest 時，請務必將結果儲存為 JSON 檔案

"scripts": {
  "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
}

您可能需要將結果檔案加入到 .gitignore，因為它是產生的檔案

.jest-test-results.json

但與鎖定檔和快照非常相似，檢查產生的檔案也可以具有某些優勢。這取決於您。我們建議檢查測試結果檔案，這樣從乾淨的 git 克隆啟動 Storybook 不會需要先執行所有測試，但這可能表示您將來會在該檔案上遇到合併衝突（重新產生此檔案與重新產生鎖定檔和快照非常相似）。

產生測試結果

在您啟動 Storybook 之前，請確保已產生測試結果檔案。在開發期間，您可能會在監看模式下啟動 Jest，因此每次程式碼或測試變更時都會重新產生 JSON 檔案。

npm run test:generate-output -- --watch

並在 jest 設定中，將 jest-test-results.json 加入到 modulePathIgnorePatterns，以避免無限迴圈。

modulePathIgnorePatterns: ['node_modules', 'jest-test-results.json'],

此變更接著會使用 webpack 進行 HMR (熱模組重新載入)，並由此擴充功能顯示。

如果您想在開發或靜態建置期間自動預先執行 Jest，您可能需要考慮到，如果您的測試失敗，則指令碼會收到非 0 的結束代碼並會結束。您可以建立 prebuild:storybook npm 指令碼，該指令碼永遠不會失敗，只要附加 || true

"scripts": {
  "test:generate-output": "jest --json --outputFile=.jest-test-results.json || true",
  "test": "jest",
  "prebuild:storybook": "npm run test:generate-output",
  "build:storybook": "build-storybook -c .storybook -o build/",
  "predeploy": "npm run build:storybook",
  "deploy": "gh-pages -d build/",
}

用法

假設您已經為您的元件建立測試檔案（例如，MyComponent.test.js）。

故事層級

在您的故事檔案中，將 裝飾器 加入到您故事的預設匯出中，以顯示結果

// MyComponent.stories.js|jsx
import { withTests } from '@storybook/addon-jest';
import results from '../.jest-test-results.json';
import MyComponent from './MyComponent';

export default {
  component: MyComponent,
  title: 'MyComponent',
  decorators: [withTests({ results })],
};

您也可以透過加入 jest 參數，在您的故事中加入多個測試結果，例如

// MyComponent.stories.js|jsx

import MyComponent from './MyComponent';

import results from '../.jest-test-results.json';

import { withTests } from '@storybook/addon-jest';

export default {
  component: MyComponent,
  title: 'MyComponent',
  decorators: [withTests({ results })],
};

const Template = (args) => <MyComponent {....args} />;

export const Default = Template.bind({});
Default.args = {
  text: 'Jest results in Storybook',
};
Default.parameters = {
  jest: ['MyComponent.test.js', 'MyOtherComponent.test.js']
};

全域層級

為了避免在每個故事中匯入測試結果，您可以更新您的 .storybook/preview.js 並加入一個裝飾器，讓您僅針對已定義 jest 參數的故事顯示結果

// .storybook/preview.js
import { withTests } from '@storybook/addon-jest';
import results from '../.jest-test-results.json';

export const decorators = [
  withTests({
    results,
  }),
];

接著在您的故事檔案中

// MyComponent.stories.js|jsx

import MyComponent from './MyComponent';

export default {
  component: MyComponent,
  title: 'MyComponent',
};

const Template = (args) => <MyComponent {....args} />;

export const Default = Template.bind({});
Default.args={
  text: 'Jest results in Storybook',
};
Default.parameters = {
  jest: 'MyComponent.test.js',
};

如果未提供 jest 參數，則預設會從您的故事檔案名稱推斷。例如，如果您的故事檔案為 MyComponent.stories.js，則會使用 "MyComponent" 來尋找您的測試檔案結果。它目前在生產環境中不起作用。

停用

您可以將 jest 參數設定為 {disable: true}，為單一故事停用此擴充功能

// MyComponent.stories.js|jsx
import MyComponent from './MyComponent';

export default {
  component: MyComponent,
  title: 'MyComponent',
};

const Template = (args) => <MyComponent {...args} />;

export const Default = Template.bind({});

Default.args = {
  text: 'Jest results in Storybook',
};
Default.parameters = {
  jest: { disable: true },
};

與 Angular 搭配使用

將此擴充功能與 Angular 搭配使用需要一些額外的設定。您需要使用 jest-preset-angular 安裝並設定 Jest。

接著，在您的 .storybook/preview.js 中，您需要加入一個具有以下內容的裝飾器

// .storybook/preview.js
import { withTests } from '@storybook/addon-jest';
import results from '../.jest-test-results.json';

export const decorators = [
  withTests({
    results,
    filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$',
  }),
];

最後，在您的故事中，您需要加入以下內容

// MyComponent.stories.ts
import type { Meta, StoryFn } from '@storybook/angular';
import MyComponent from './MyComponent.component';

export default {
  component: MyComponent,
  title: 'MyComponent',
} as Meta;

const Template: StoryFn<MyComponent> = (args: MyComponent) => ({
  props: args,
});

export const Default = Template.bind({});
Default.parameters = {
  jest: 'MyComponent.component',
};

可用選項

• options.results：物件 jest 輸出結果。必要
• filesExt：字串測試檔案副檔名。選用。這讓您可以寫入 "MyComponent" 而不是 "MyComponent.test.js"。它會用作正規表示式來尋找您的檔案結果。預設值為 ((\\.specs?)|(\\.tests?))?(\\.js)?$。這表示它會比對：MyComponent.js、MyComponent.test.js、MyComponent.tests.js、MyComponent.spec.js、MyComponent.specs.js...

待辦事項

• 加入覆蓋率
• 更好顯示巢狀測試（describe）
• 顯示測試日期
• 加入單元測試
• 加入程式碼檢查
• 分割

貢獻

歡迎所有想法和貢獻。

授權

MIT © 2017-至今 Renaud Tertrais