Karma で Enzyme を使う

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';

// ...