Jest

顯示元件 Jest 報告的 React Storybook 擴充套件

在 Github 上檢視

66k

每週下載次數

由 Storybook 製作

Storybook 擴充套件 Jest

用於檢查 Jest 單元測試結果的 Storybook 擴充套件。

框架支援

查看上面的線上 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：OBJECT jest 輸出結果。必要
filesExt：STRING 測試檔案副檔名。可選。這讓您可以撰寫 "MyComponent" 而非 "MyComponent.test.js"。它將用作 regex 以尋找您的檔案結果。預設值為 ((\\.specs?)|(\\.tests?))?(\\.js)?$。這表示它會比對：MyComponent.js、MyComponent.test.js、MyComponent.tests.js、MyComponent.spec.js、MyComponent.specs.js...