Блог

Главная - Вопросы по программированию - Как мы можем протестировать крючки useState внутри функции void с помощью jest и enzyme?

Как мы можем протестировать крючки useState внутри функции void с помощью jest и enzyme?

#reactjs #unit-testing #jestjs #onclick #enzyme

Вопрос:

Я новичок в модульном тестировании и написании тестовых примеров с использованием jest и enzyme в React. Может ли кто-нибудь, пожалуйста, помочь мне написать тестовый пример для этого примера?

 const [open, setOpen] = useState(false);
const handleClose = () => {
    setOpen(!open);
}

//this handleClose is an onClick event

Комментарии:

1. Имитируйте щелчок, подтвердите видимый пользователю результат изменения состояния.

2. Извините, я не могу дозвониться до вас. Если вы не возражаете, не могли бы вы подробнее рассказать об этом в ответе?

3. Мы не можем видеть достаточно вашего компонента, чтобы точно сказать вам, как его протестировать. Кроме того, это, как правило, не служба написания кода-я бы рекомендовал поискать соответствующие учебные пособия и просмотреть их, чтобы понять, как использовать Jest и Enzyme в целом.

Ответ №1:

Это должно быть сделано таким образом, чтобы проверить, где будет использоваться открытое состояние:

 import { mount } from 'enzyme';
import React, { useState } from 'react'

const App = () => {
  const [open, setOpen] = useState(false);

  const handleClose = () => {
    setOpen(!open);
  };

  return (
    <>
      <button id="btn-click" onClick={handleClose}>
        Click here
      </button>
      <span id="is-open">{open ? "is open" : "is closed"}</span>
    </>
  );
};

it('when the button is clicked someone must be opened', () => {
  const wrapper = mount(<App />)
  wrapper.find('#btn-click').simulate('click')
  expect(wrapper.find('is-open').children()).toContain('is open')
})
Метки: