React TDD examples

A repository with test suites for React components.

Testing tools: Enzyme, Mocha, Chai

• Contributing Guidelines 💝
• Up and running
• How-to
• Running the tests
• Browser debugging
• About the tools

---

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

• React: a rendering library
• Enzyme: a testing utility library for React
• Mocha: a JavaScript testing framework
• Chai: a JavaScript assertion library