What's the right way to write Jest tests verified with Flow?

Question

I imagine people commonly use Flow and Jest (and React) together, but Flow doesn't seem to know about Jest (or Jasmine) globals. When I add // @flow to my tests, I get Flow errors like this:

src/__tests__/Thing-test.js:3
  3: jest.unmock('../Thing')
     ^^^^ identifier `jest`. Could not resolve name

src/__tests__/Thing-test.js:7
  7: describe('Thing', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

src/__tests__/Thing-test.js:8
  8:   it('does stuff', () => {
       ^^ identifier `it`. Could not resolve name

I could write a Flow interface for Jest/Jasmine, but that seems lengthy and like I must be missing something. Letting Flow process node_modules/jest-cli doesn't seem to help.

You can create/install a declaration file for Jest. Either [manually](https://flowtype.org/docs/declarations.html#pointing-your-project-to-declarations) or using [flow-typed](https://github.com/flowtype/flow-typed): `flow-typed install jest`. Also take a look at this repository where everything is configured: [node-flowtype-boilerplate](https://github.com/jsynowiec/node-flowtype-boilerplate) — Jakub Synowiec, Oct 31 '16 at 21:59

Kutyel · Accepted Answer · 2018-06-09T12:15:39.170

38

Although Jest is written with flow annotations they strip types for the npm version so we don't need babel to run it. Fortunately the types are already in flow-type so the solution is quite easy (just as mentioned in the comment):

npm install -g flow-typed

flow-typed install jest@22.x.x # <-- replace the version with the latest

Although I had to add this line as well to my .eslintrc.json:

{
  "env": {
    "jest": true
  }
}

edited Jun 09 '18 at 12:15

answered Nov 22 '16 at 09:51

Kutyel

6,297
2
26
55

10

This didn't work for me. WebStorm still shows a Flow error: identifier 'it'. could not resolve name My project was set up with create-react-app. I don't have file .eslintrc.json – bedouger Jan 17 '17 at 02:09
7

Make sure you also have `flow-typed` in your `.flowconfig` `[libs]` section as suggested [here](https://github.com/styled-components/styled-components/issues/458#issuecomment-292932110). – Kevin Cooper Sep 21 '17 at 02:22
You don't need to explicitly add `flow-typed` to `.flowconfig`, at least not these days: https://flow.org/en/docs/libdefs/#toc-what-s-a-library-definition – damd Mar 22 '18 at 10:05
i initially didn't notice the `flow-typed install jest@22` line . +1 – Tom Jun 08 '18 at 14:17
3

You'll likely have no fix until you also `flow stop` and `flow`. the flow cache can cause severe frustration. – Dawson B Sep 19 '18 at 20:51
1

I have a similar problem as @bedouger, already did all the setup (installed plugins, libdefs, set config rules, resetted flow server) with no joy so far. I'll get back here and add proper feedback if I can find a fix. – Amy Pellegrini Feb 22 '19 at 15:42

score 24 · Answer 2 · edited Jun 20 '20 at 09:12

24

The accepted answer does not work if you use Create-React-App. Here is how you would set up jest with CRA:

1.Install flow to your project

If you use create-reat-app, here is a guide for this step.

yarn add -D flow-bin
yarn run flow init

2. Install jest flow types

npx flow-typed install jest@22 // maybe you need a different version

(You can use npx jest -v to check your jest version if you use create-react-app.)

3. Register flow-typed in config

(Update: as @Black points out in the comments, this step may not even be neccessary)

In your .flowconfig, add flow-typed to libs section.

...
[libs]
flow-typed
...

I use yarn, npm should work just the same.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 11 '18 at 20:46

Hinrich

11,828
4
37
54

`flow-typed` is added by default to `[libs]` section. No need to do that manually https://flow.org/en/docs/config/libs/ – Black Oct 24 '18 at 12:33
@Black Thanks for pointing that out, I updated my answer to reflect your comment. – Hinrich Oct 24 '18 at 14:02
1

For me only works when I added in `[libs]`. Thanks for this – Renato Cassino May 28 '20 at 18:49

score 7 · Answer 3 · answered Jun 18 '17 at 07:25

7

If you created your project with create-react-app you have to manually add jest to your packages.json. Otherwise flow-typed won't install the needed type definitions because create-react-app doesn't add this dependency to packages.json.

yarn add --dev jest
flow-typed install

answered Jun 18 '17 at 07:25

Jan Kühnlein

71
1
3

1

According to Dan Abramov, it is not recommended to install Jest with CRA: *If you have both react-scripts and jest in your package.json things will go badly wrong in the future.* https://github.com/facebook/jest/issues/5401#issuecomment-378089822 – stone Apr 03 '18 at 23:41
The above answer assumes that you have `flow-typed` installed globally, via `npm install -g flow-typed`. Alternatively, add it as a project dependency via `yarn add -D flow-typed`, then you can run it `npx flow-typed install` – pete May 09 '18 at 15:31

score 0 · Answer 4 · edited Feb 28 '19 at 23:04

0

You can also run it as a one liner. Here you go:

npm i -D flow-typed && npx flow-typed install jest@"$(npx jest -v)"

edited Feb 28 '19 at 23:04

Paul Roub

35,100
27
72
83

answered Feb 28 '19 at 22:47

uloco

1,913
3
17
34

score -1 · Answer 5 · answered Mar 09 '16 at 20:51

-1

I think declare var jest: any; should do the trick (put it either on top of each test file, or somewhere in your flow lib directory).

answered Mar 09 '16 at 20:51

Nikita

19
1

What's the right way to write Jest tests verified with Flow?

5 Answers5

Linked