How to integrate Jest and Flow

Question

I know some people use the Jest together with the Flow, even more for being from Facebook,

I’m with a project React, and I’m trying to do this integration, but Jest does not recognize the typing markings of the Flow.

Error message

 FAIL  __tests__/components/Ui/CheckboxWithLabel.test.js
  ● Test suite failed to run

    /home/cargobr/Projetos/Estudos/Terminator-React-Starter-Kit/src/app/components/CheckboxWithLabel.js: Unexpected token (6:12)
        4 | export default class CheckboxWithLabel extends React.Component {
        5 |   state: {isChecked: boolean};
      > 6 |   onChange: function;
          |             ^
        7 |   setState: function;
        8 |   props: {labelOn: boolean, labelOff: boolean};
        9 | 

I installed the flow-typed and then executed flow-typed install [email protected], but it hasn’t worked out yet.

Piece of package.json

{
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router-dom": "^4.0.0",
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^20.0.3",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^2.9.1",
    "eslint": "^3.18.0",
    "eslint-plugin-react": "^6.10.0",
    "jest": "^20.0.4",
    "react-addons-test-utils": "^15.6.0",
    "react-test-renderer": "^15.6.1",
    "regenerator-runtime": "^0.10.5",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  },
  "scripts": {
    "start": "webpack-dev-server",
    "test": "jest"
  },
  "jest": {
    "testRegex": "__tests__/components/.*./*.test.js"
  }
}

.eslintrc

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parser": "babel-eslint",
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "jest": true
  }
}

Answer 1

Hello, according to the documentation, you need to define the parameters and in them define the types.

onChange: (text: String) => {}
<input onChange={(e) => {this.onChange(e.target.value)}}

I believe that setState does not receive this validation but the function that calls it.

addTitle ({title: String}) => this.setState({title}) 

https://flow.org/en/docs/types/functions/