Ava: Recipe for testing with React

[vadimdemedes]

[MoOx]

Also relevant #186

[MoOx]

I will be happy to handle that as soon as recent change in master are released, as well as a way to allow people to use fancy stuff like css modules in their code to test.

[jamestalmage]

I think @kentcdodds may already have a good start on this. He's apparently been teaching AVA with React in class. Not sure if he's got time to make an actual PR, but given his extensive work in this area, it would be good if he was involved.

[MoOx]

Ok, just ping me if you need a hand. I am going to write a blog post or 2 about AVA and AVA with React/webpack loaders.

[jamestalmage]

@MoOx - Not saying you shouldn't be the one to do the PR, just that @kentcdodds should be looped in.

Please let us know about your blog posts when they go live!

[MoOx]

I will (maybe even before, during post review) :)

[kentcdodds]

as well as a way to allow people to use fancy stuff like css modules in their code to test.

AVA with React/webpack loaders.

If you can do webpack loaders in AVA tests, I want to see that. In my mind, this is a real challenge for any project using webpack heavily!

I'd love to review what you come up with :D

[adriantoine]

To test with webpack loaders, there is this plugin: https://github.com/istarkov/babel-plugin-webpack-loaders, we use it for unit testing and backend rendering of react components using the css loader.

Has anyone considered using enzyme with ava?

[MoOx]

I use this exact babel plugin. Enzyme seems like going backward to me. jQuery syntax seriously? expect-jsx is clearly enough and make test very simple and clear.

[kentcdodds]

I would recommend that the recipe only reference these abstractions but not actually use them. Just use the official React testing utils for the examples to give a good baseline and let other people choose what they'd prefer.

[kentcdodds]

Also, I heard that using that plugin made things extremely slow. Has this been your experience?

[adriantoine]

@MoOx do you have an example of using ava with expect-jsx? Sounds interesting

[MoOx]

@kentcdodds totally
@adriantoine https://github.com/sindresorhus/ava/issues/186#issuecomment-161317068

[MoOx]

@kentcdodds It's slower because (for now I hope) you have to disable babel cache to don't miss update in css or any other files consumed by webpack that are not recognized by node/babel. You can subscribe to this thread if you are curious about how this will end :)
https://github.com/MoOx/statinamic/issues/301

[kentcdodds]

While we're on the subject of Webpack, what do you do about webpack aliases and custom modulesDirectories?

[MoOx]

I don't use those. I avoid webpack whenever I can. I only use it for loaders (transformation) and try to make my code reusable/universal.

[kentcdodds]

That's a good way to go I think :)

[istarkov]

Babel plugin webpack supports aliases and modulesDirectories.

[kentcdodds]

Babel plugin webpack

Just to be clear, you're talking about this one?

[istarkov]

Yes.

[sindresorhus]

This looks interesting: https://twitter.com/bruderstein/status/718113603484823553

Plugin for unexpected to allow for testing the full virtual DOM, and against the shallow renderer

[MoOx]

Sounds a bit overkill to me. I am going to release some simple helpers (around 20 lines of code) and will let you know about it.

[kentcdodds]

Yeah, I'd prefer to limit the number of abstractions in a recipe personally. Then just reference the other abstractions.

[MoOx]

I just published this small module https://github.com/MoOx/jsx-test-helpers

Code is simple https://github.com/MoOx/jsx-test-helpers/blob/master/src/index.js
And I pushed an annotated test file https://github.com/MoOx/jsx-test-helpers/blob/master/src/__tests__/index.js
Comments welcome.

For the webpack thing, I already pushed something on my js-boilerplate but I need to make a proper article about the entire setup.

[iam4x]

I adopted another solution using js-dom, enzyme and chai-enzyme:

• package.json ava config
• helpers / setup jsdom
• helpers / mount component

and tests are written this way:

• simple concurrent tests
• serial tests with xhr calls

(my example has also CircleCI configuration with coverage)

[adriantoine]

By the way, unexpected-react doesn't work with react@15 because it relies on react/addons which has been deprecated in [email protected] and removed in react@15.

[adriantoine]

and @MoOx solution works quite well!