search

biglovisa / react-tdd-exercises

Test suites to practice tdd:ing react components
13 stars 3 forks source link

readme

React TDD examples

A repository with test suites for React components.

Testing tools: Enzyme, Mocha, Chai

Up and running

In your terminal, clone the repository and install the dependencies:

$ git clone git@github.com:applegrain/react-tdd-exercises.git
$ cd react-tdd-exercises
$ npm install

How-to

In ./test there are enumerated test suites, and every test in the suites are skipped. Work with one test suite at a time, starting with 00-hello-world. Unskip one test at a time and write code to make it pass.

Running the tests

To run the entire test suite:

$ npm test

To run a specific test, chain the .only() function call to your it block.

it.only("contains a div with class `hello-world`", function() {
    expect(shallow(<HelloWorld />).contains(<div className="hello-world" />)).to.equal(true);
  });

The same applies for describe block:

describe.only("Component: Hello World", function() {

  ...

});

To exclude some tests or test suites from running with the entire test suite, add the .skip() call to either it or describe blocks.

You can also add prepend it and describe blocks with an x:

describe.only("Component: Hello World", function() {

  xit.only("contains a div with class `hello-world`", function() {
      expect(shallow(<HelloWorld />).contains(<div className="hello-world" />)).to.equal(true);
  });

});

Browser debugging

If you want to debug your component from the browser, open src/index.js and change the imported component on line 4 to the one you are working with. Then, run webpack from your browser to bundle your code, and then open index.html.

From your terminal, run:

$ webpack
$ open index.html

About the tools