Тест Jest / Enzyme выдает ошибку при использовании хуков

У меня есть простой компонент React, который использует хук useState. Этот компонент работает в приложении правильно, но мой тест Jest выдает ошибку «Хуки могут быть вызваны только внутри тела функционального компонента». Насколько я могу судить, я правильно вызываю useState, и, опять же, он отлично работает, когда я запускаю приложение.

Я использую версию 16.8.4 для react и react-dom, что подтверждается 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 (с использованием Enzyme):

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 и конфигурации веб-пакетов и не нашел различий.


reactjs jestjs react-hooks enzyme
person Jim Ade    schedule 11.03.2019    source источник
comment
Вы пробовали использовать mount вместо shallow?   -  person zsgomori    schedule 11.03.2019
comment
Это работает, спасибо! Это огромная помощь, но не дает ответа на вопрос, почему shallow () не работает.   -  person Jim Ade    schedule 12.03.2019

Ответы (2)


arrow_upward
3
arrow_downward

Похоже, я был слишком нетерпелив. На данный момент (2019-03-12) Enzyme просто еще не поддерживает React Hooks. Хотя я смог запустить свой тест, используя mount (), а не shallow (), похоже, есть и другие проблемы, и я не знаю, когда Enzyme будет поддерживать эти функции. Я вернусь к использованию более ранней версии React и пропущу хуки, пока либо Enzyme не поддержит их, либо мы не решим прекратить использование Enzyme.

person Jim Ade    schedule 12.03.2019

arrow_upward
0
arrow_downward

Я пробовал этот код с той же версией реакции, и он работает. Похоже, у вас проблема, связанная с конкретной версией фермента или конфигурацией фермента.

Я пробовал это с помощью «фермента»: «^ 3.9.0» и «фермента-адаптера-реакции-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));
});
person Valerii    schedule 11.03.2019
comment
Спасибо, что посмотрели на это. Я попытался использовать mount (), как предложил @zsmogori, и тест запустился. Я не знаю достаточно о разнице, чтобы догадаться, почему это должно иметь значение, но это помогает мне преодолеть мой текущий блок. - person Jim Ade; 12.03.2019