BDD in React

BDD ?

• A variation of TDD that tests for user scenarios
• Given, when, then ... (Given notes, when deleting, then remove a note)
• BDD consists of scenarios/specifications.

describe

we start with creating a describe block and move all the tests into this block

describe('App', () => {
....
....
});

and within the block we create another describe block

beforeEach

describe('App', () => {
....
  describe('when clicking the `add-gift` button', () => {
    beforeEach(()=> {
        app.find('.btn-add').simulate('click');
    });
    it('adds a new gift to `state` ', () => {

      expect(app.state().gifts).toEqual([{id: 1 }]);
    });

    it('adds a new gift to the rendered list', () => {

      expect(app.find('gift-list').children().length).toEqual(2);
    });
  }
.... 
});

afterEach

describe('App', () => {
....
  describe('when clicking the `add-gift` button', () => {
    beforeEach(()=> {
        app.find('.btn-add').simulate('click');
    });
    afterEach(()=> {
        app.setState({ gifts: [] });
    });

    it('adds a new gift to `state` ', () => {

      expect(app.state().gifts).toEqual([{id: 1 }]);
    });

    it('adds a new gift to the rendered list', () => {

      expect(app.find('gift-list').children().length).toEqual(1);
    });
  }
.... 
});

---

see also Unit Tests in React