Question

我有一个使用useState挂钩的简单React组件。该组件在应用程序中可以正常工作，但是我的Jest测试给我错误“只能在函数组件的主体内部调用挂钩”。据我所知，我正确地调用了useState，再次，当我运行该应用程序时，它工作正常。

我使用的是react和react-dom的16.8.4版本，已通过npm ls验证。

以下是全部内容：

import React, {useState} from 'react';
import './ExampleComponent.css';

function ExampleComponent(props) {
  const [count, setCount] = useState(0);
  const handler = () => setCount(count + 1);
  return (
    <div className='example-component'>
      <span>This component is a test</span>
      <button onClick={handler}>Test</button>
      <input readOnly={true} value={count}></input>
    </div>
  );
};

export default ExampleComponent;

这是对应的Jest测试（使用酶）：

import React from 'react';
import ExampleComponent from './ExampleComponent';

describe('<ExampleComponent />', () => {
  const options = {
    targetElementId: 'fake-element-id'
  };
  const wrapper = shallow(<ExampleComponent options={options} />);
  it('renders a div', () => expect(wrapper.find('div').exists()).toBe(true));
});

我在某些资料中已经读到Enzyme不能与钩子一起使用，但是我有一个没有问题的同事。我已经比较了package.json文件和webpack配置，发现没有区别。

Answer 1

我使用了与它完全相同的反应蚂蚁版本尝试了此代码。看来您遇到了与特定酶版本或酶配置有关的问题。

我尝试使用“ enzyme”：“ ^ 3.9.0”和“ enzyme-adapter-react-16”：“ ^ 1.10.0”

import React from 'react';
import { shallow } from 'enzyme';
import * as Enzyme from "enzyme";
import Adapter from 'enzyme-adapter-react-16';
import {ExampleComponent} from './App';

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

describe('<ExampleComponent />', () => {
  const options = {
    targetElementId: 'fake-element-id'
  };
  const wrapper = shallow(<ExampleComponent options={options} />);
  it('renders a div', () => expect(wrapper.find('div').exists()).toBe(true));
});

使用挂钩时，开玩笑/酶测试会引发错误

1 个答案: