reactjs - 在 jasmine 助手中调用 Enzyme.configure

Question

我通过 Karma、Jasmine 和 webpack 将 Enzyme 与 React 16 结合使用。我有一个测试，在 beforeEach 函数中配置 Enzyme 适配器:

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import App from 'app';

describe('App', () => {
  let wrapper;

  beforeEach(() => {
    Enzyme.configure({ adapter: new Adapter() });

    wrapper = shallow(<App />);
  });

  it('should render an h1 header', () => {
    expect(wrapper.type()).toBe('h1');
  });

  it('should render Hello, World!', () => {
    expect(wrapper.text()).toEqual('Hello, World!');
  });
});

一切正常。

由于我不想在每个 enzyme 测试中都执行此操作，因此我尝试将该代码移至 enzyme _helper.js 文件中:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

我已将该文件添加到 Karma 加载的文件列表中，并通过 webpack 构建它(这样我就可以使用 ES6 格式)。我已经验证(通过 console.log 并通过调试器运行)辅助程序已加载，但是当测试文件中的测试运行时，我得到:

   Error:
         Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To
         configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
         before using any of Enzyme's top level APIs, where `Adapter` is the adapter
         corresponding to the library currently being tested. For example:
         import Adapter from 'enzyme-adapter-react-15';
         To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html

有什么建议我可能做错了什么吗？

Answer 1

您无法在帮助程序中配置它，但您可以创建一个 Enzyme 设置文件，该文件重新导出所有 Enzyme 导出内容并将其导入您的测试中，而不是 Enzyme。

/* test/enzyme.js */

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import jasmineEnzyme from 'jasmine-enzyme';

Enzyme.configure({adapter: new Adapter()});

// I also like to use this file to initialize jasmine-enzyme
beforeEach(() => {
    jasmineEnzyme();
});

export * from 'enzyme';

然后在测试中导入 enzyme 设置文件而不是 Enzyme。

/* myModule.test.js */

import {shallow} from './test/enzyme';