What is the best way to combine Flow with Jest for seamless integration?

It appears that Jest does not recognize Flow's typing annotations, despite the combination being used by some individuals.

Upon running jest, an error is encountered:

 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 |

Attempts to resolve this issue with the installation of flow-typed and 

flow-typed install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8c2cddbdce89a988698869c">[email protected]</a>
have proven fruitless.

Partial 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
  }
}
javascriptfrontendflowtypejestjs

Answer №1

Perhaps it's because the term "function" should be written as "Function" with a capitalized first letter.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve various elements using a loop and dynamic identifiers (perhaps within a multi-dimensional array)

Apologies for the confusing title. I am currently working on a piece of code which can be found here: https://jsfiddle.net/8ers54s9/13/ This code creates a basic text area and compares it to a predefined array to identify common words within a string. If ...

javascriptjquery

The process of making a pop-up modal instead of just relying on alerts

Attempting to change from using an alert to a pop-up with a simple if statement, but encountering some issues. Here is the current code: if(values == ''){ $('body').css('cursor','auto'); alert("Blah Blah..." ...

javascriptjqueryhtmlcss

What is the best way to showcase the object type within an Elements array?

//Can someone help me figure out how to address the issue outlined below? s.getDescendants()=[THREE.Light,THREE.Mesh,THREE.Mesh] //Desired output: [THREE.Light,THREE.Mesh,THREE.Mesh] //Current output: [object Object,object Object,object Object] ...

javascriptarraysthree.jschildren

Display the <div> element at the current scroll position on the page

Alright, I have a challenging question for you! I don't have the ability to search the internet for this one because I can't quite put it into words. All I have are some images and wild guesses on how it's done. Maybe you'll find it int ...

phpjavascript

Toggle button to reveal or conceal the highlighted URL positioned directly beneath it

Recently, I've been on the hunt for a button that has an interesting functionality: when clicked, it displays a highlighted URL below or beside it. And then, with another click, hides it again. I have a faint memory of encountering such a button in th ...

javascripthtmlcss

What is the best method for breaking down this JSON data into distinct 'objects'?

I am struggling with deserializing JSON data into multiple instances of an object I have defined. Here is how the object is structured: function Question_Value__c () { this.Id=null; this.Name=null; this.Question__c=null; this.Order__c=null ...

javascriptjsondeserialization

Utilize Require.js to Load Dropzone.js Library

I am interested in integrating Dropzone.js into an application that is built using Backbone and Require.JS. However, I am unsure of the correct implementation process. Should I utilize require()? What is the most effective way to handle this integration? ...

javascriptrequirejsdropzone.js

Tips for invoking a JavaScript class method from an HTML document

I've created a Typescript class that dynamically inserts an HTML element to a page after it's loaded. Here is the code snippet: const calcElement: string = ` <div class="container"> <span class="cc-title">Field</span> ...

javascripthtml

Best practices for extracting values from an array in JavaScript

I am looking to extract specific values from a MAP in JavaScript based on its id ("codi" within the object). My array resembles the following but is larger: 0: {codi: '291', literal: 'MEDIFIATC Progres 2010 ', check: true} 1: {codi: &a ...

javascriptarraysjsonperformanceloops

What could be causing the 404 error when my Angular POST request calls a PHP file?

I have uploaded the code for my files - index.html, app.js, and insert.php. I have installed the following dependencies: express, mysql, and morgan. In my directory, I have the following files: /node_modules app.js index.html insert.php package.jso ...

javascriptphpmysqlangularjshttp-status-code-404

Using MVC4 and jQuery to unselect items from an Html.CheckboxListFor

In my search page, I am utilizing jQuery to toggle the visibility of different sections based on user input. Specifically, I have a Html.Textbox and Html.CheckboxListFor that are shown or hidden depending on whether there is any input in the textbox or if ...

javascriptjqueryasp.net-mvc-4checkboxlist

Issues with dynamically adding or removing scroll in jQuery are not being resolved

I am trying to implement a dynamic scrolling feature in my post scenario. The goal is to automatically add a vertical scroll when the number of dynamic inputs reaches a certain threshold. Specifically, if there are more than 5 dynamic inputs created, a ver ...

javascriptjqueryhtmlcss

What is the best way to trigger actions from child components within React Redux?

My server contains the following code snippet: <ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider> The <Layout> component includes more nested components. Further dow ...

javascriptreactjsreact-redux

How come my HTML form keeps refreshing instead of displaying an alert after submission, even though I've included onsubmit="return false"? Additionally, it seems to be throwing an error

Why is this basic HTML and JavaScript code not functioning properly? Instead of alerting once the form is submitted, it refreshes the page and throws an error. It has also been reported to sometimes throw a CORS error when using 'module' as scri ...

javascripthtml

How come I am unable to attach outerHTML to an element using javascript?

I am facing an issue where I am trying to move an element from one part of the page to another using JavaScript. I attempted to use the outerHTML property and the appendChild method to achieve this, but I keep encountering an error message stating that Arg ...

javascripthtmlcss

What is the most effective way to organize a collection according to the specific order specified in another array?

I have an array of objects, with each element containing another nested object like this: data = [ { name: "A", type: "AA", children: [ { id: 1, name: "Child-A", admin: ["Y"] }], other: "NA" }, { name: "B", type: "BB", ch ...

javascriptangulartypescriptsorting

What is the best way to delete the "Click to sort Ascending" text from the header of each column in a bootstrap-vue table?

Recently, I came across a bootstrap-vue table that caught my attention: https://i.sstatic.net/5jENs.png Below is the code snippet for the table setup: <template> <div class="container"> <h1 class="pt-2 pb-3">Bo ...

javascriptvue.jsvuejs2bootstrap-vue

Combining Two Models in Sails.js

I'm facing an issue with linking two models in sails. I have two models: 'Singer' and 'Country'. In the 'Singer' model, I have an attribute 'singer_country' which represents the id of the 'Country' mod ...

javascriptmongodbsails.jsejs

Having trouble configuring bcryptjs in a React.js project

I have been working on setting up a single registration page within a react component. However, I encountered an issue when trying to hash the password before sending the response to my back-end. I am puzzled as to why the code snippet below is not functi ...

javascriptreactjsbcrypt

What is the best way to manage the "checked" state of an input checkbox using React?

I'm currently developing an application that features a form with radio buttons. One of the radio button options can be toggled on/off using a checkbox, but I want to ensure that the checkbox is disabled if the corresponding radio button is not selec ...

javascriptreactjscheckbox