TDD with reactjs, reactify, babelify, browserify, gulp

3
votes

I am looking for running test on a project which use :

  • browserify with these transform :
    • babelify
    • reactify

I did try the combo JSDOM + Mocha but testing a component which has not been builded yet will fail on require call from a component to another :

> mocha --compilers js:babel/register --recursive

module.js:338
    throw err;
    ^
Error: Cannot find module 'system/services/AuthService'

I think I need to run mocha test during the gulp build watchify and build tasks. I am not sure if handling the test during the build process is a good option.

Normaly, after a successful build I have a file in client/build/js/bundle.js in ES5.

I want to be able to test my component using the ES6 file which require a browserify for being readble by my testing lib.

Does anyone could provide me a good option, with some npm modules or anything that could help me achieve TDD in my environment ?

1
reactjstddgulpbrowserify
Well worth a shot in my opinion: reactjsnews.com/testing-the-easy-way or if you'd rather go the usual way reactjsnews.com/testing-in-react – romseguy
Thanks but both examples shows how to use test tools, but not how import by require from app components are managed. This will fail when I'll require a file that does require some other file accessible only through browserify – Dimitri Kopriwa

1 Answers

0
votes

Maybe Mochify is a good fit for your use case. Here's a React example: https://github.com/mantoni/mochify.js/wiki/Testing-a-ReactJS-Component-with-Mochify