https://github.com/silvestrevivo/testing-counter

Unit-testing/React exercise developed with Jest + Enzyme, following the the Udemy tutorial from @flyrightsister
https://github.com/silvestrevivo/testing-counter

enzyme first jest reactjs udemy-tutorial unit-testing

Last synced: about 1 month ago
JSON representation

Unit-testing/React exercise developed with Jest + Enzyme, following the the Udemy tutorial from @flyrightsister

• Host: GitHub
• URL: https://github.com/silvestrevivo/testing-counter
• Owner: silvestrevivo
• Created: 2019-02-20T22:14:36.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T02:21:55.000Z (about 2 years ago)
• Last Synced: 2023-03-02T11:26:52.073Z (almost 2 years ago)
• Topics: enzyme, first, jest, reactjs, udemy-tutorial, unit-testing
• Language: JavaScript
• Homepage:
• Size: 3.16 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# testing-counter

Unit-testing/React exercises developed with Jest + Enzyme, following the the Udemy tutorial from @flyrightsister

## First challenge

### app.js

```javascript

import React, { Component } from 'react';

import './App.css';

class App extends Component {

  state = {

    counter: 0

  }

  render() {

    const { counter } = this.state

    return (

      


        
The counter is currently {counter}

         this.setState({ counter: counter + 1 })}>Increment counter

      

    );

  }

}


export default App;

```

### app.test.js

```jsx

import React from 'react';

import Enzyme, { shallow } from 'enzyme';

import EnzymeAdapter from 'enzyme-adapter-react-16';

import App from './App';

Enzyme.configure({ adapter: new EnzymeAdapter() });

/**

 * Factory function to create a ShallowWrapper for the App Component

 * @function setup

 * @param {object} props - Component props specific for this setup

 * @param {object} state - Initial state for setup

 * @returns {ShallowWrapper}

 */

const setup = (props = {}, state = null) => {

  // => const wrapper = shallow()

  if (state) wrapper.setState(state)

  return wrapper;

}

/**

 * Return ShallowWrapper containing node with the given data-test value

 * @function findByTestAttr

 * @param {ShallowWrapper} wrapper - Enzyme shallow wrapper to searth within

 * @param {string} val - Value to data-test attribute for search

 * @returns {ShallowWrapper}

 */

const findByTestAttr = (wrapper, val) => {

  return wrapper.find(`[data-test='${val}']`);

}

test('renders without errors', () => {

  const wrapper = setup();

  const appComponent = findByTestAttr(wrapper, 'component-app');

  expect(appComponent.length).toBe(1);

})

test('renders increment button', () => {

  const wrapper = setup();

  const button = findByTestAttr(wrapper, 'increment-button');

  expect(button.length).toBe(1);

})

test('renders counter display', () => {

  const wrapper = setup();

  const counterDisplay = findByTestAttr(wrapper, 'counter-display');

  expect(counterDisplay.length).toBe(1);

})

test('counter starts at 0', () => {

  const wrapper = setup();

  let initialCounterState = wrapper.state('counter');

  expect(initialCounterState).toBe(0)

})

test('clicking button increments counter display', () => {

  // define the counter at 7

  const counter = 7;

  const wrapper = setup(null, { counter });

  // find button and click

  const button = findByTestAttr(wrapper, 'increment-button');

  button.simulate('click');

  wrapper.update();

  // find counterdisplay an equal to 8

  const counterDisplay = findByTestAttr(wrapper, 'counter-display');

  expect(counterDisplay.text()).toContain(counter + 1);

})

```

## Second challenge

```jsx

import React, { Component } from 'react';

import './App.css';

class App extends Component {

  state = {

    counter: 0,

    warning: false

  }

  decrement = () => {

    const { counter } = this.state

    if (counter > 0) {

      this.setState({ counter: counter - 1, warning: false })

    } else {

      this.setState({ warning: true })

    }

  }

  render() {

    const { counter, warning } = this.state

    return (

      


        
The counter is currently {counter}

         this.setState({ counter: counter + 1, warning: false })}>Increment counter

         this.decrement()}>Decrement counter

        {warning && 
It can not be negative
}

      

    );

  }

}


export default App;

```

```jsx

import React from 'react';

import Enzyme, { shallow } from 'enzyme';

import EnzymeAdapter from 'enzyme-adapter-react-16';

import App from './App';

Enzyme.configure({ adapter: new EnzymeAdapter() });

/**

 * Factory function to create a ShallowWrapper for the App Component

 * @function setup

 * @param {object} props - Component props specific for this setup

 * @param {object} state - Initial state for setup

 * @returns {ShallowWrapper}

 */

const setup = (props = {}, state = null) => {

  // => const wrapper = shallow();

  if (state) wrapper.setState(state)

  return wrapper;

}

/**

 * Return ShallowWrapper containing node with the given data-test value

 * @function findByTestAttr

 * @param {ShallowWrapper} wrapper - Enzyme shallow wrapper to searth within

 * @param {string} val - Value to data-test attribute for search

 * @returns {ShallowWrapper}

 */

const findByTestAttr = (wrapper, val) => {

  return wrapper.find(`[data-test='${val}']`);

}

test('renders without errors', () => {

  const wrapper = setup();

  const appComponent = findByTestAttr(wrapper, 'component-app');

  expect(appComponent.length).toBe(1);

})

test('renders counter display', () => {

  const wrapper = setup();

  const counterDisplay = findByTestAttr(wrapper, 'counter-display');

  expect(counterDisplay.length).toBe(1);

})

test('counter starts at 0', () => {

  const wrapper = setup();

  let initialCounterState = wrapper.state('counter');

  expect(initialCounterState).toBe(0)

})

describe('Increment', () => {

  test('renders increment button', () => {

    const wrapper = setup();

    const button = findByTestAttr(wrapper, 'increment-button');

    expect(button.length).toBe(1);

  })

  test('clicking button increments counter display', () => {

    // define the counter at 7

    const counter = 7;

    const wrapper = setup(null, { counter });

    // find button and click

    const button = findByTestAttr(wrapper, 'increment-button');

    button.simulate('click');

    wrapper.update();

    // find counterdisplay an equal to 8

    const counterDisplay = findByTestAttr(wrapper, 'counter-display');

    expect(counterDisplay.text()).toContain(counter + 1);

  })

})

describe('Decrement', () => {

  test('renders decrement button', () => {

    const wrapper = setup();

    const button = findByTestAttr(wrapper, 'decrement-button');

    expect(button.length).toBe(1);

  })

  test('clicking button decrement counter display', () => {

    // define the counter at 5, for example

    const counter = 5;

    const wrapper = setup(null, { counter });

    // find a button to click

    const button = findByTestAttr(wrapper, 'decrement-button');

    button.simulate('click');

    wrapper.update();

    //find counterdisplay an equal to 4

    const counterDisplay = findByTestAttr(wrapper, 'counter-display');

    expect(counterDisplay.text()).toContain(counter - 1);

  })

  test('error does not show when not needed', () => {

    const wrapper = setup();

    const warningDisplay = findByTestAttr(wrapper, 'warning-display');

    expect(warningDisplay.exists()).toBeFalsy();

  })

  describe('counter is 0', () => {

    let counter;

    let wrapper;

    let counterDisplay;

    beforeEach(() => {

      counter = 0;

      wrapper = setup(null, { counter });

      counterDisplay = findByTestAttr(wrapper, 'counter-display');

    })

    test('clicking button decrement', () => {

      // find a button to click

      const button = findByTestAttr(wrapper, 'decrement-button');

      button.simulate('click');

      wrapper.update();

      //find counterdisplay an equal to 0 and appears a warning message

      const warningDisplay = findByTestAttr(wrapper, 'warning-display');

      expect(wrapper.state().counter).toBeGreaterThanOrEqual(0)

      expect(counterDisplay.text()).toContain(counter);

      expect(warningDisplay.text()).toEqual('It can not be negative');

    })

    test('clicking button increment', () => {

      const warningDisplay = findByTestAttr(wrapper, 'warning-display');

      // find a button to click

      const button = findByTestAttr(wrapper, 'increment-button');

      button.simulate('click');

      wrapper.update();

      //find counterdisplay an equal to 1

      const counterDisplay = findByTestAttr(wrapper, 'counter-display');

      expect(counterDisplay.text()).toContain(counter + 1);

      expect(warningDisplay.exists()).toBeFalsy();

    })

  })

})

```