能否将React组件测试中的重复导入与配置代码提取至独立文件？

绝对可以！把这些重复的测试初始化代码抽成独立文件是非常棒的实践，既能减少冗余，还能让所有测试的配置保持一致，维护起来也更方便。下面是具体的实现方案：

首先新建一个testConfig.js文件（也可以命名为setupTests.js，很多测试框架会自动识别这个文件名），把所有重复的导入和初始化逻辑放进去：

// testConfig.js
import React from 'react';
import ReactDOM from 'react-dom';
import renderer from 'react-test-renderer';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// 统一配置Enzyme
Enzyme.configure({ adapter: new Adapter() });

// 导出常用的工具，让测试文件可以直接导入使用
export { React, ReactDOM, renderer, Enzyme, shallow };

现在你的测试文件就不用再写一堆重复的导入和配置了，直接导入这个配置文件即可：

// SomeComponent.test.js
import { React, shallow, renderer } from './testConfig';
import SomeComponent from './index';

describe('SomeComponent', () => {
  // 你的测试逻辑...
  it('should render without errors', () => {
    const wrapper = shallow(<SomeComponent />);
    expect(wrapper.find('.component-class').exists()).toBe(true);
  });

  it('should match snapshot', () => {
    const tree = renderer.create(<SomeComponent />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

如果你用的是Create React App或者Jest，它会自动识别src/setupTests.js这个文件——在所有测试执行前，Jest会自动运行这个文件里的代码。这种情况下你甚至不需要在每个测试文件里导入配置：

// src/setupTests.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// 全局配置Enzyme
Enzyme.configure({ adapter: new Adapter() });

// 这里还可以添加全局测试逻辑，比如扩展expect的匹配器，或者全局mock某些模块

此时测试文件只需要导入自己需要的组件和工具即可：

// SomeComponent.test.js
import React from 'react';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';
import SomeComponent from './index';

describe('SomeComponent', () => {
  // 测试逻辑...
});

• 如果手动使用testConfig.js，要注意文件路径的正确性，确保测试文件能正确导入它。
• 自动加载的setupTests.js是全局执行的，不需要导出内容，适合放全局初始化逻辑。
• 可以根据项目需求扩展配置文件，比如添加React Testing Library的初始化、全局测试辅助函数等。

内容的提问来源于stack exchange，提问作者mikemklee