Enzyme 测试中常见的 “component is not a function” 错误解决方案
在使用 Enzyme 进行前端测试的过程中，我们可能会遇到 “component is not a function” 错误。这种错误通常是由于我们在测试时没有正确地导入组件所造成的。下面我们来详细了解一下这种错误的解决方案。
错误情况
我们先来看一下一个实例代码，其中我们要测试 App 组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ --- ---- -------
-------------- ---- -- -- -
----------- ------- ---------- -- -- -
----- --- - ------------ ---
----------------------------------------
--
--看起来代码没什么问题，但当我们运行测试的时候，控制台会提示：
TypeError: component is not a function
这说明我们没有正确地导入组件，可以尝试在 import App from './App' 后加上一个逗号，把重新导入的类型穿透：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ - --- - ---- -------- -- ---------
-------------- ---- -- -- -
----------- ------- ---------- -- -- -
----- --- - ------------ ---
----------------------------------------
--
--然而，这种方法并不总是能解决问题，因为有时候会有多个组件作为导出。在这种情况下，我们需要采用其他的方法来解决这个错误。
解决方案
这里我们介绍两种常见的解决方案：
- 直接从文件中导出的组件
如果我们的组件是从文件中的导出，我们可以按照如下方式导入并测试：
import App from './App' // 直接从文件中导入组件
import { shallow } from 'enzyme'
describe('<App />', () => {
it('renders without crashing', () => {
const app = shallow(<App />)
expect(app.find('.App')).toHaveLength(1)
})
})- 从一个默认导出组件中导入
如果我们的组件是从默认导出组件中导出，我们可以按照下面的方式导入：
-- -------------------- ---- -------
------ - ------- - ---- --------
------ ---------------- ---- --------------------
----- --- - --------------------------------- -- ------
-------------- ---- -- -- -
----------- ------- ---------- -- -- -
----- --- - ------------ ---
----------------------------------------
--
--其中，ComponentWrapper 是我们的默认导出组件，在这个组件中，我们使用 react-redux 来连接我们的组件，以实现类似 redux 的全局状态管理：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
----- --------------- - ----- -- ----
----- ------------------ - --
----- ---------------- ------- --------- -
-------- -
------ -
---- --------------- --
-
-
-
------ ------- ------------------------ -------------------------------------这个解决方案适用于在我们自己的组件中使用 react-redux 进行全局状态管理的场景。
结论
通过上面的讨论，我们可以看到， “component is not a function” 错误通常是由于我们在测试时没有正确地导入组件所造成的。通常有两种解决方案：
- 直接从文件中导出的组件
- 从一个默认导出组件中导入。
希望这篇文章能够帮助您解决 Enzyme 测试中常见的 “component is not a function” 错误，同时提高您在前端测试方面的技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677205ee6d66e0f9aad3c109