Testing default properties

[dannymk]

...
      <div className="first-component">
        {this.props.name}
      </div>
...
First.defaultProps = {
   name: 'Carlos'
};

It would be great to have examples for testing default properties.

Out of the box I use:

expect(component.props.children).to.equal('Carlos');

I would expect to test this way instead:

expect(component.props.name).to.equal('Carlos');

[weblogixx]

Hi @dannymk,

the next version of the generator will feature enzyme, which will make stuff like this much easier to use. This will provide a nicer api for getting and testing props.

[dannymk]

Has this been updated? Is enzyme supported now? Any examples?

[weblogixx]

Hi @dannymk,

it is supported in the current beta (npm install -g generator-react-webpack@beta), but currently not implemented in the stable version. We have to wait for webpack-2 to get stable to release it.

We are currently adding some new features (for example adding new components without generating styles, a cssmodule setup etc). Hope we will be able to release soon.

About the enzyme setup: It is not that hard to implement. Have a look at https://github.com/weblogixx/react-webpack-template/blob/2.x/conf/webpack/Test.js#L79 to see how the test webpack config has to be altered. Also, you have to add https://github.com/weblogixx/react-webpack-template/blob/2.x/conf/webpack/Test.js#L15 (externals section) and install the required plugins.

Then all you have to do is make your tests look like https://github.com/weblogixx/react-webpack-template/blob/2.x/test/components/AppTest.js.

Unfortunately, we will not add support for enzyme and webpack-2 for generator-react-webpack in version 3, you will have to wait for the new generator to arrive. Hope I could help you.

[dannymk]

I will have to make due with whatever you guys provide. I am teaching a local open source development group and really wanted to have these tests done before Monday. Keeping my fingers crossed that we will have this by the end of the year :-) Thank you for your feedback.

[weblogixx]

Hi @dannymk,

you could also go another way and use the generator 4 (beta). I got some projects running with it, it is (nearly) stable, with just a few edge cases (e.g. postCSS setup does not work currently). It has enzyme backed in as default, which makes testing much smoother.

Another possibility would be to use react-addons-testutils. You can see how to test a default prop in the stackoverflow example provided here (also, I did not test it, it should work...): http://stackoverflow.com/questions/30614454/how-to-test-a-prop-update-on-react-component

If you present the generator, it would be nice if you could give us some feedback after your lesson. Things like: What where people missing in the usage etc. Would be really interesting to get some (more) real world feedback :).

Hope this helps!

[dannymk]

Well, for one it would be great to have out of the box working examples of actual ES6 components being tested. Even if it is just one. I tried about a month ago to give this same presentation and hit all kinds of problems when trying to test default properties. Also, there is no clear upgrade path for someone using the generator. Dependencies are broken so examples fail. Does that help?

[weblogixx]

Hi @dannymk,

what do you mean when saying there is no clear upgrade path? For other stuff (like adding react router support, using PostCSS, ...) there will be a Wiki for version 4.0.

I use this generator on a daily basis in a couple of projects, none of them have broken dependencies (at least not in the stable version, we are currently working on the next one that really has some missing deps...). Upgrading should be as simple as:

• run npm update
• run npm outdated once in a while to have a look if there are new versions of software you may use.
• Adjust the semver range for an outdated package and install the current one if you want to (e.g. karma is now version ^1.x, but we still ship ^0.13. Has to do with some problems in karma 1).

Basically, the generator itself just creates your project. It does not have the abilitty to track updates, nor should it to. It is meant to get you started fast and allow you to create new components or even flux stores.

That said, version 4 will be fully backwards compatible to version 3 projects. That is to say your old projects will work exactly like they do now, only new projects will get benefits (e.g. enzyme testing).

[dannymk]

OK, this helps. When and if I run across an actual problem I will report them here. Thank you for your help and support.