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

// ...