Jest / Enzyme test выдает ошибку при использовании хуков - PullRequest
Новая
       24

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

1 голос
/ 11 марта 2019

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

Я использую версию 16.8.4 обоих реагирующих и реагирующих доменов, что проверено npmls.

Вот компонент целиком: 

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 и не могу найти никаких отличий.

Ответы [ 2 ]

3 голосов
/ 12 марта 2019

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

0 голосов
/ 12 марта 2019

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

Я пробовал это с «энзимом»: «^ 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));
});
...