Answers for "react ezyme simulate click"

0

react enzyme simulate click

// App.js
function App() {
  const [count, setCount] = React.useState(0)

  const onClick = () => {
    setCount((prevState) => prevState + 1)
  }

  return (
    <div>
      <button onClick={onClick}>{count}</button>
    </div>
  )
}

export default App

//App.test.js
describe('Counter Group', () => {
  it('calls incCounter function when button is clicked', () => {
    const wrapper = shallow(<App />)
    const initClickCount = 2

    for (let i = 0; i < initClickCount; i++) {
      wrapper.find('button').simulate('click')
    }

    expect(wrapper.find('button').text()).toContain(2)

    console.log(wrapper.debug())
  })
})
Posted by: Guest on November-20-2020
0

react ezyme simulate click

// button.js
import React from "react";

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState({ count: 1 });
  }

  renderState() {
    return this.state.count;
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick}>{this.count}</button>
      </div>
    );
  }
}

export default Button;

//button.test.js
import React from "react";
import { mount } from "enzyme";
import Button from "./Button";

describe("button test", () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<Button />);
  });

  it("test increment button", () => {
    // click event inc from zero to one
    wrapper.find("button").simulate("click");
    // replace value click event with new value to 3
    wrapper.setState({ count: 3 });
    // expect value is correct or not
    expect(wrapper.state("count")).toBe(3);
    expect(wrapper.instance().renderState()).toBe(3);
  });
});
Posted by: Guest on November-21-2020
0

react enzyme simulate click sub component

//Counter.js
import React from 'react'

function Counter() {
  const [count, setCount] = React.useState(0)

  const onClick = () => setCount((prevState) => prevState + 1)

  return (
    <div>
      <button onClick={onClick}>{count}</button>
    </div>
  )
}

export default Counter

//App.js
import React from 'react'
import Counter from './Counter'

const App = (props) => {
  return (
    <>
      <Counter />
    </>
  )
}

export default App

//App.test.js
import React from 'react'
import { mount } from 'enzyme'
import App from './App'
import Counter from './Counter'

describe('Counter Group', () => {
  it('calls incCounter function when button is clicked', () => {
    const wrapper = mount(<App />)
    const subComponent = wrapper.find(Counter)
    const initClickCount = 2

    expect(subComponent.find('button').exists()).toBeTruthy()

    for (let i = 0; i < initClickCount; i++) {
      subComponent.find('button').simulate('click')
    }

    expect(subComponent.find('button').text()).toContain(2)

    console.log(wrapper.debug())
  })
})
Posted by: Guest on November-20-2020

Code answers related to "react ezyme simulate click"

Code answers related to "Javascript"

Browse Popular Code Answers by Language