flowtype coverage report is not picking up types I have already defined

Question

I'm in the process of gradually introducing flowtype into our react/es7 code base.

Running flow no longer gives errors which is very nice. But I'm baffled by why certain lines aren't covered.

Here is the output for flow coverage --json. The screen shot captures a few common coverage issues I'm experiencing.

1. Type already covered by flow-typed still not being used (Line #6): I have flow-typed install react-bootstrap and I can confirm that ./flow-typed/npm/react-bootstrap_v0.32.x.js and ./flow-typed/npm/react-boothstrap_vx.x.x.js exists.

$ fd react-bootstrap ./flow-typed
flow-typed/npm/react-bootstrap_v0.32.x.js
flow-typed/npm/react-bootstrap_vx.x.x.js

2. Custom library definition file not be picked up (Line #8-9): . I have added the following definition file and made sure that it's used in .flowconfig's [libs] section.

declare module "@fortawesome/fontawesome-common-types" {
  declare type IconDefinition = { icon: Array<mixed> };
}

declare module "@fontawesome/react-fontawesome" {
  import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
  import type { Component } from "react";
  declare export class FontAwesomeIcon extends React$Component<{
    icon: IconDefinition,
    ...
  }> {}
}

My .flowconfig as follows:

$ cat .flowconfig
[lints]
all=warn

[include]
frontend

[ignore]
# Run `flow ls` to get a list of all files visible to flow
.*/frontend/admin/.*

[libs]
flow-typed
node_modules/fbjs/flow/lib
frontend/types

[untyped]

[options]
module.file_ext=.js
module.file_ext=.jsx
module.system.node.allow_root_relative=true
module.system.node.root_relative_dirname=./frontend
log.file=/tmp/flowtype.log
esproposal.decorators=ignore

# Flowtype doesn't support using css in jsx.
# https://gist.github.com/lambdahands/d19e0da96285b749f0ef
module.name_mapper='.*\(.css\)' -> 'empty/object'

3. Custom types not being recognised (Line #16 and #20): The EditorContextualProps has already been defined in editor/types.jsx as following:

export type EditorContextualProps = {|
  orderItem: OrderItem,
  zoomLevel: ZoomLevel,
  ...EditorContextualProps,
  ...OrderItemEditCallbacks,
  ...PhotoEditCallbacks,
  handleCloseModal: () => void
|};

4. Classes defined in other files are not being used (Line #27): The orderItem: OrderItem is already defined in a file called order_item.js as follows:

export default class OrderItem {
  id: string;
  product: string;
  size: string;
  props: { [string]: ?string };
  options: Array<string>;
  quantity: number;
  photos: Array<Photo>;
  subtotal: string;
  ...
}

Thanks for reading this far. Cheers.

Answer 1

1. Don't know if you should have flow-typed/npm/react-bootstrap_vx.x.x.js. This looks like a stub, which may conflict with 0.32.0? You may want to delete this and it should resolve not getting any type coverage.
2. Line 8 not getting correct type might be because you've declared your module as, @fontawesome/react-fontawesome instead of @fortawesome/react-fontawesome.
3. This and 4. may be related. It looks like your syntax is kind of off, not sure if it's as a result of trying to simplify your example. For instance, I'm not sure why you spread EditorContextualProps into itself, and although you can use the class OrderItem as a type, the syntax for the class is using half type and half class syntax.

If you can refine your example a little bit or update your question to include a try flow it can help paint a better picture.