Протестируйте счетчик в reactjs

Question

Ниже я добавил код моего счетчика. Теперь я хочу проверить это только с JEST.

import React, { useState } from 'react';

function Counter() {

    const [state, setState] = useState(0);

    function counterFun() {
        setState(state + 1)
    }

    return (
        <div>
            <button onClick={counterFun}>Counter</button>

            <h1>Counter is:{state} </h1>
        </div>
    )
}

export default Counter;

Я написал мой тест ниже:

   

import React from 'react';
import ReactDom from 'react-dom';
import Counter from './Counter';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16'
import { render, fireEvent } from '@testing-library/react'

configure({adapter: new Adapter()});

it('increment count by 1 when button clicked', () => {
    const wrapper = shallow(<Counter />);
    const incrementBtn = wrapper.find('button');
    incrementBtn.simulate('click')
    const text = wrapper.find('h1').text();
    expect(text).toEqual('Counter is: 1');
  })

.. но я не уверен, что это правильно. Я хочу проверить, работает ли мой счетчик после каждого события щелчка. Как это сделать?

Answer 1

Проблема решена. В моей разметке html возникла проблема с дополнительным пробелом. Я изменил: <h1>Counter is:{state} </h1> на <h1>Counter is:{state}</h1>

Answer 2

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

import { shallow } from 'enzyme';

it('increment count by 1 when button clicked', () => {
    const wrapper = shallow(<Counter />);
    const incrementBtn = wrapper.find('button.increment');
    incrementBtn.simulate('click')
    const text = wrapper.find('h1').text();
    expect(text).toEqual('Counter is: 1');
  })