Remove flow types from the npm distribution

[sansumbrella]

When I add mapbox-gl-js-mock to my project to a create-react-app project, I expect to be able to run unit tests that involve Mapbox types.

I add the mock as a dev dependency:

yarn add --dev mapbox-gl-js-mock

I then use it as a mock in my jest tests:

jest.mock("mapbox-gl", () => require("mapbox-gl-js-mock"));

Finally, I see failing tests because the Flow type annotations confuse Jest.

/node_modules/mapbox-gl-js-mock/node_modules/mapbox-gl/src/geo/lng_lat.js:24
        lng: number;
           ^
    SyntaxError: Unexpected token :

Unfortunately, Jest does not apply transformations to files in node_modules/, so I don't see a good way around this issue shy of updating the mock to not have type annotations. Any configuration suggestions that solve the problem would be great.

For what it's worth, the create-react-app typescript integration works just fine, but the workings of that are hidden in the react-scripts. After following the suggestions for enabling flow in create-react-app, I still have this issue.

[sansumbrella]

I have also tried the remove-flow-types-loader in webpack in combination with react-app-rewired to customize webpack without success.

[yookoala]

Encountered the same problem. Does anybody have a solution yet?

[mwarren2]

Is Babel in your mix? @babel/plugin-transform-flow-strip-types

[yookoala]

I'm using create-react-app and having problem with the jest test through react-scripts. So the water is pretty deep. I'm trying out a solution react-app-rewired with babel-jest.

[yookoala]

Solution

1. Install react-app-rewired and rewrite package.json according to the documentation.
2. Install @babel/plugin-transform-flow-strip-types.
3. Create a new config-overrides.js with the jest attribute like this:

module.exports = {
    jest: (config) => {
        if (typeof config.plugins === 'undefined') {
            config.plugins = [];
        }
        config.plugins.push('transform-flow-strip-types');
        return config;
    },
}

Then the test works.

[gabimoncha]

@yookoala I tried your solution and still have this problem. Are you defining the plugin in .babelrc or package.json? Also, are you using @babel/preset-env and @babel/preset-flow?

[yookoala]

@gabrielmoncea: I have never handled my own babel config in this project. I don't even have a babelrc. I am using the CRA default setup with only the changes I wrote in my last comment.

Again, I only have problem when running test. There is no issue building or running test server.

[gabimoncha]

@yookoala weird. I tried w/ & w/o any babel config but still got this error

[yookoala]

@gabrielmoncea: What is the version of your CRA?

[gabimoncha]

My project initialised one year ago with 2.1.5, but I migrated to 3.1.1 and still nothing.

[gabimoncha]

@yookoala I just bootstrapped a new project with latest version of CRA and got the same test fail reason

[ted-moke]

@gabrielmoncea I also couldn't get @yookoala fix to work. Ended up omitting this mock plugin and mocking just a bare object from this thread.

jest.mock('mapbox-gl/dist/mapbox-gl', () => ({
  GeolocateControl: jest.fn(),
  Map: jest.fn(() => ({
    addControl: jest.fn(),
    on: jest.fn(),
    remove: jest.fn(),
  })),
  NavigationControl: jest.fn(),
}));```