Как использовать хуки внутри jest тестов

Question

Я недавно начал изучать Jest и никак не могу понять, как использовать хуки в тестах Jest. Суть в том, что не работают именно React хуки. При помещении хука в 'name.test.tsx' выдает ошибку :

useSubmitAuthor > 1
-----
TypeError: Cannot read properties of null (reading 'useState')Jest

Хотя я не уверен правильно ли так делать

код useInputChange.tsx :

import { ChangeEvent } from 'react';

function useInputChange(setText: (text: string) => void) {
  if (setText) {
    return {
      onChange: (event: ChangeEvent<HTMLInputElement>) => setText(event.target.value),
    };
  }

  return { onChange: () => {} };
}

export default useInputChange;

код useInputChange.text.tsx :

import '@testing-library/jest-dom';
import React, { useState } from 'react';

describe('useInputChange', () => {
  it('1', () => {
    const [text, setText] = useState('') // тут ошибка
    expect(text).toBe('')
    
    render(
      <div>
        <input type="text" data-testid="input" />
        <p>{text}</p>
      </div>
    );
  });
});

Answer 1

Хук нужно передать коллбэком в renderHook() а setState() в act()

renderHook() и act() импортируются из @testing-library/react

Было:

import '@testing-library/jest-dom';
import React, { useState } from 'react';

describe('useInputChange', () => {
  it('1', () => {
    const [text, setText] = useState('') // тут ошибка
    expect(text).toBe('')
    
    render(
      <div>
        <input type="text" data-testid="input" />
        <p>{text}</p>
      </div>
    );
  });
});

Стало:

import '@testing-library/jest-dom';
import {
  render, renderHook, act
} from '@testing-library/react';
import React, { useState } from 'react';

describe('useInputChange', () => {
  it('1', () => {
    const { result } = renderHook(() => useState(''));
    const [text, setText] = result.current;
    act(() => setText('123123'));
    expect(result.current[0]).toBe('123123');

    render(
      <div>
        <input type="text" data-testid="input" />
        <p>{text}</p>
      </div>
    );
  });
});

Источник: https://itchef.ru/articles/99719/

БЛОГ НА HUSL

Как использовать хуки внутри jest тестов

Ответы (1 шт):