React recipe

[adriantoine]

Fixes #446

Hi!

Here is a first attempt to a React recipe. I'm not a native english speaker so, please carefully read the whole recipe and fix my grammar 😛 : https://github.com/adriantoine/ava/blob/master/docs/recipes/react.md

I might have forgotten something, please let me know!

Also, as a native french speaker, I'll be happy to make the translation to French once this is merged.

[thangngoc89]

I think you should add a note about adding babel-preset-react to AVA in order to use JSX inside test files

[adriantoine]

@thangngoc89 there is one in the first part "Setting up Babel": https://github.com/sindresorhus/ava/pull/747/files#diff-2cb79c7fb78b66228297358846395c3aR7

[thangngoc89]

@adriantoine sorry. I missed that

[sindresorhus]

Linkify babel-preset-react and linkify sample project configuration instead of showing the full URL.

[sindresorhus]

configuration => config

[sindresorhus]

Nice work @adriantoine. This looks very promising :)

// @MoOx @kentcdodds @istarkov

[sindresorhus]

Also, as a native french speaker, I'll be happy to make the translation to French once this is merged.

@forresst FYI ;)

[adriantoine]

@sindresorhus thanks! I'll have a look at those comments

[MoOx]

Nice.

[MoOx]

I would add a note about how to play with webpack, loaders for assets etc by poiting users to this https://github.com/istarkov/babel-plugin-webpack-loaders#dynamic-config-path

[MoOx]

I would also add a note on the second solution to let user know that this one can "simulate" events too ;)

[kentcdodds]

I would add a note about how to play with webpack

That's not really React specific. We should make that a recipe and reference it.

[adriantoine]

@MoOx https://github.com/istarkov/babel-plugin-webpack-loaders#dynamic-config-path I think it should be added to the babelrc recipe, rather than the react one.

[sindresorhus]

with AVA, to get more information about => with AVA. For more information about

[sindresorhus]

please have a look at => have a look at the

[adriantoine]

Thanks @sindresorhus and @forresst, it's all fixed!

[adriantoine]

Another thing is, an update has been made to unexpected-react to make it work with React 15, I've created a repo to try it with AVA. It works well and I quite like the colourful JSX output:

compared to jsx-test-helpers:

On the other hand, you have to install unexpected and unexpected-react to your project which are both really big compared to jsx-test-helpers, so it might not suit everyone.

Should I mention unexpected-react just like expect-jsx has been mentioned? Is it worth an extra section? (considering expect-jsx doesn't have its own section)

[sindresorhus]

I think it's worth mentioning.

[adriantoine]

I've updated the recipe with a new section for "Other assertion libraries" where I put expect-jsx and unexpected-react.

I need another round of review:
https://github.com/adriantoine/ava/blob/master/docs/recipes/react.md

Thanks!

[scarletsky]

Hello @adriantoine , I follow your react recipes with some problem.

It works as expected when your component is in the test file. But when you require the component from another file (some thing like import Foo from './Foo'), it will throw errors like #458.

Any guides ?

[MoOx]

You might need to use "babel": "inherit", see https://github.com/sindresorhus/ava#es2015-support

[scarletsky]

@MoOx
Yes, "babel": "inherit" works when I add "react" to my .babelrc file.

But I want to know why my config do not work.

// .babelrc
{
  "presets": ["es2015", "stage-1"],
  "plugins": [
    "transform-decorators-legacy"
  ],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

// package.json
{
  "ava": {
    "verbose": true,
    "files": [
      "tests/client/App.js"
    ],
    "require": [
      "babel-register",
      "babel-polyfill"
    ],
    "babel": {
      "babelrc": true,
      "presets": ["react"]
    }
  }
}

From the docs:

When specifying the Babel config for your tests, you can set the babelrc option to true. This will merge the specified plugins with those from your babelrc.

According to my understanding, my config should work too.
Do I miss anything ?

[MoOx]

Why don't you add react preset in your babelrc?

[scarletsky]

@MoOx Because I use babel in server side. In client side, I do something like:

// webpack.config.js
var babelrc = JSON.parse(
  fs.readFileSync('./.babelrc', 'utf8')
)
// .....
{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel',
  query: Object.assign(
    {},
    babelrc,
    {
      presets: babelrc.presets.concat('react'),
      cacheDirectory: true
    }
  )
}

This works very well.

[scarletsky]

@MoOx Can you tell me why my prev config do not work ?

[MoOx]

Sorry I don't have the answer. I use a single babel config for browser and node (for tests I use babel-plugin-webpack-loaders)

[sindresorhus]

Alright. Let's merge! Superb work on this one @adriantoine. I think a lot of people will benefit from the recipe :)

[sindresorhus]

[adriantoine]

Great thanks! 😄

[forresst]

Great @adriantoine

Also, as a native french speaker, I'll be happy to make the translation to French once this is merged.

@adriantoine It is with pleasure that I will review . Ping me !

[adriantoine]

@forresst yep, I'm working on it!