Реагируйте на сценарий тестового случая обработки useEffect перед загрузкой и после загрузки данных

#reactjs #jestjs #enzyme

Вопрос:

У меня есть следующий компонент в react. И я использую jest 24.0.0 и Enzyme 3.3 для написания тестовых примеров. В следующем компоненте я хочу обработать три тестовых случая.

  1. Загрузочный текст появится без добавления,редактирования и добавления компонентов.
  2. Как только будет вызван useeffect и заданы данные, он отобразит кнопку добавления и редактирования и функцию макета на onClick.
  3. Компонент будет там, используя упомянутое имя класса
 Main Component   import Component from './Component'   const [posts, setPosts] = useState([])  useEffect(() =gt; {  fetch("https://jsonplaceholder.typicode.com/posts")  .then((response) =gt; response.json())  .then((data) =gt; {  setPosts(data)   }) }, [])  return (  lt;divgt;  lt;h1gt;Cool applt;/h1gt;  {!posts amp;amp; lt;divgt;Loading...lt;/divgt;}  {posts amp;amp; posts.length amp;amp; (  lt;divgt;   lt;button className="btnAdd" onClick={OnAddHandler}gt;Addlt;/buttongt;   lt;button className="btnEdit" onClick={onEditHanlder}gt;Editlt;/buttongt;  lt;/divgt;  )  lt;Component className="postComponent" posts = {posts} /gt;  lt;/divgt; ) 

Я попробовал какой-то способ, и он выглядит следующим образом

 it("Add,Edit Button is not visible on loading",()=gt;{ const wrapper = mount(lt;MainComponent/gt;) expect(wrapper.exists("btnAdd")).toBe(false) }) 

Но я не мог понять, как справиться с другим сценарием, как указано выше. Как мы можем проверить, вызывается ли эффект использования, получить данные ответа и сохранить их в состоянии.

может ли кто-нибудь взглянуть и просто опубликовать пример фрагмента, который был бы признателен.

Спасибо.