大佬教程收集整理的这篇文章主要介绍了Enzyme/Jest：Hooks 只能在函数组件内部调用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
假设我有一个像这样的组件：
export function Click(props: { counter: number }) {
const [ counter,setCounter ] = useState(props.counter);
return (
<header classname="App-header">
<h1 data-test="counter">{counter}</h1>
<button onClick={() => setCounter(counter + 1)}>
Click me
</button>
</header>
);
}
我的测试文件是这样的：
import React from 'react';
import { mount } from "enzyme";
import App,{ Click } from './App';
class Setup<Props> {
constructor(FunctionComponent: React.FC<Props>,props: Props) {
return mount(
<>
{FunctionComponent(props)}
</>
)
}
}
test("Doesn't work",() => {
const wrapper = new Setup(Click,{ counter: 0 });
expect(wrapper.find(`[data-test="counter"]`)).toHaveLength(1);
});
这会返回一个错误：
Hooks can only be called insIDe of the body of a function component.
但我真的不知道如何解决它。 你看，我不能使用功能组件，因为它会破坏目的。 我的想法是创建一个库来帮助我编写测试，所以我想使用类。
要成为返回 JSX 的组件函数，应将其用作 <Component /> 而不是 Component()。
hooks-rules 文档说：
不要在循环、条件或嵌套函数中调用 Hook。
不要从常规 JavaScript 函数调用 Hook。
不要调用它们，渲染它们。
例如
App.tsx：
import React from 'react';
import { useState } from 'react';
export function Click(props: { counter: number }) {
const [counter,setCounter] = useState(props.counter);
return (
<header className="App-header">
<h1 data-test="counter">{counter}</h1>
<button onClick={() => setCounter(counter + 1)}>Click me</button>
</header>
);
}
App.test.tsx：
import React from 'react';
import { mount,ReactWrapper } from 'enzyme';
import { Click } from './App';
class Setup<Props> {
constructor(FunctionComponent: React.FC<Props>,props: Props) {
return mount(<FunctionComponent {...props} />);
}
}
describe('68201330',() => {
test('it should pass',() => {
const wrapper = new Setup(Click,{ counter: 0 }) as ReactWrapper;
expect(wrapper.find(`[data-test="counter"]`)).toHaveLength(1);
});
});
测试结果：
PASS examples/68201330/App.test.tsx (8.477 s)
68201330
✓ it should pass (31 ms)
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 83.33 | 100 | 50 | 83.33 |
App.tsx | 83.33 | 100 | 50 | 83.33 | 11
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed,1 total
Tests: 1 passed,1 total
Snapshots: 0 total
Time: 9.331 s,estimated 10 s
以上是大佬教程为你收集整理的Enzyme/Jest：Hooks 只能在函数组件内部调用全部内容，希望文章能够帮你解决Enzyme/Jest：Hooks 只能在函数组件内部调用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。