React-app-rewired: Flow + babel-plugin-flow-react-proptypes does not work with Jest

[comerc]

// config-overrides.js

const babelLoader = function (conf) {
  return conf.loader === 'babel'
}

function rewire(config, env) {
  const babelrc = config.module.loaders.find(babelLoader).query
  babelrc.plugins = [
    'flow-react-proptypes',
  ].concat(babelrc.plugins || [])
  return config
}

module.exports = rewire

I assume that the type conversion from Flow to PropTypes occurs after Jest.

[comerc]

babel-plugin-tcomb - the same problem

[jihchi]

Did you have example project for this issue?

[comerc]

how to reproduce:

$ git clone https://github.com/comerc/yobr/tree/Jest
$ yarn install
$ yarn test

second terminal:

$ yarn start

http://localhost:3000/post/add

Place of example error:

// @flow
// src/components/PostForm/PostForm.js
type Props = {
  id: number, // instead of id?
}

[jihchi]

Warning came from your code.
Change this line from id: null to id: 0 then your warning will disappear.

[comerc]

I know. It is special for you. I want to see this error in test.

[jihchi]

Oh, I see. Sorry, I didn't saw it.

[comerc]

Addition: rewire from config-overrides.js does not execute for command yarn test (i.e. react-app-rewired test).

[timarney]

Might be worth setting up a branch - eject see if you can get things working without any rewires (mod the webpack config, .babelrc direct). This would narrow things down to an issue with this lib vs and issue with CRA or one of the plugins or webpack etc....

I haven't used babel-plugin-tcomb or flow-react-proptypes so can't assist much.

For the tests are you saying that it's not hitting the config-overrides or that it's not applying your modifications?

[comerc]

Please see reconstruction.

Eject true case

$ git clone [email protected]:comerc/yobr.git
$ cd yobr
$ git checkout eject_Jest+Flow
$ yarn
$ yarn test

.babelrc

{
  "presets": ["react-app"],
  "plugins": [
    "styled-jsx-postcss/babel",
    "flow-react-proptypes"
  ]
}

Rewired wrong case

$ git checkout rewired_Jest+Flow
$ rm -rf node_modules/
$ yarn
$ yarn test

config-overrides.js

const babelLoader = function (conf) {
  return conf.loader === 'babel'
}
function rewire(config, env) {
  const babelrc = config.module.loaders.find(babelLoader).query
  babelrc.plugins = [
    'styled-jsx-postcss/babel',
    'flow-react-proptypes',
  ].concat(babelrc.plugins || [])
  return config
}
module.exports = rewire

[timarney]

Okay from what I see the issue is in this file -

https://github.com/timarney/react-app-rewired/blob/master/packages/react-app-rewired/config/jest/babelTransform.js

We currently don't expose a way push plugins into the Jest Babel config.

module.exports = babelJest.createTransformer({
  presets: [require.resolve('babel-preset-react-app')],
  plugins: customPlugins,
  babelrc: false
});

I think ideally we could allow for a .babelrc file.

I don't have much time right now, I will dig into this as time allows. That said open to a PR as always.