A repository with test suites for React components.
Testing tools: Enzyme, Mocha, Chai
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
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.
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);
});
});
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