將 enzyme 搭配 Karma 使用

Karma 是一款廣受歡迎的測試執行器，能夠在多個瀏覽器環境中執行測試。根據 Karma 設定，您可能有多種選項來設定 Enzyme。

搭配 Karma 的基本 Enzyme 設定

設定 Enzyme

建立 Enzyme 設定檔案。此檔案會使用合適的 React 介面設定 Enzyme。也可以用來初始化您希望提供給所有測試使用的介面。為了避免必須匯入此檔案和 Enzyme，您可以重新匯出此檔案中的所有 Enzyme 匯出，然後僅匯入此檔案。

/* test/enzyme.js */
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import jasmineEnzyme from 'jasmine-enzyme';

// Configure Enzyme for the appropriate React adapter
Enzyme.configure({ adapter: new Adapter() });

// Initialize global helpers
beforeEach(() => {
  jasmineEnzyme();
});

// Re-export all enzyme exports
export * from 'enzyme';

從 Enzyme 安裝檔案匯入 Enzyme

在您想使用 Enzyme 的任何地方匯入 Enzyme 安裝檔案，就像匯入 Enzyme 本身一樣。

/* some_test.js */
// Import anything you would normally import `from 'enzyme'` from the Enzyme setup file
import { shallow } from './test/enzyme';

// ...

替代的 karma-webpack 安裝

如果您使用 Karma 和 Webpack 使用 karma-webpack 的替代安裝，您可以在您的測試入門檔案中設定 enzyme，然後在個別測試中直接匯入 enzyme。

/* test/index_test.js */
import './enzyme';

const testsContext = require.context('.', true, /_test$/);

testsContext.keys().forEach(testsContext);

/* some_test.js */
// If Enzyme is configured in the test entry file, Enzyme can be imported directly
import { shallow } from 'enzyme';

// ...