Jest 在使用 Flow 泛型类型时抛出 ReferenceError

Question

我有一个使用 Redux、Flow-typed 和 Jest 的 React 应用程序。为了创建我的减速器，我使用了自定义通用工厂createReducer<S> (initialState: S, actions: any): Reducer<S>

这样我就可以创建一些减速器：

const FooReducer = createReducer<FooState>(initialState, {
  'ACTION_ADD_USER': () => 'Foo',
})

我有以下测试用例：

// @flow

import { createReducer } from 'create-reducer'

type AppState = { name: string }

const initialState: AppState = { name: '' }

const NameReducer = createReducer<AppState>(initialState, {
  'NAME_CHANGE': (state, name) => ({ ...state, name })
})

it('should change the name', () => {
  const action = { type: 'NAME_CHANGE', name: 'bar' }

  expect(NameReducer({ name: 'foo' }, action)).toEqual({ name: 'bar' })
})

Jest 抛出以下错误：

FAIL temp.spec.jsx

  ● Test suite failed to run

    ReferenceError: AppState is not defined

       7 | const initialState: AppState = { name: '' }
       8 | 
    >  9 | const NameReducer = createReducer<AppState>(initialState, {
         |                                   ^
      10 |   'NAME_CHANGE': (state, name) => ({ ...state, name })
      11 | })
      12 | 

      at Object.AppState (temp.spec.jsx:9:35)

出于某种原因，Jest 无法找到我的类型定义，即使它是在那里声明的。我一直在彻底寻找解决方法，但到目前为止还没有任何运气。希望有人知道这里出了什么问题？

附录：

环境

babel-core        6.26.0
babel-jest        23.6.0
babel-loader      6.4.1
babel-preset-flow 6.23.0
flow-bin          0.89.0
flow-typed        2.2.0
jest              23.6.0

.babelrc（更新）：

{
  "plugins": [
    "syntax-dynamic-import",
    "transform-runtime",
    "transform-object-rest-spread",
    "transform-class-properties",
    "transform-es2015-destructuring"
  ],
  "presets": [
    "babel-preset-flow",
    "es2015",
    "react",
    "stage-0"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    },
    "test": {
      "presets": [
        "es2015",
        "react",
        "stage-0"
      ]
    }
  }
}

jest.config.js

module.exports = {
  roots: ['<rootDir>/spec/javascripts'],
  moduleNameMapper: {
    'c3': '<rootDir>/__mocks__/c3.js',
    '\\.(css|less|sass|scss)$': '<rootDir>/spec/javascripts/__mocks__/styleMock.js',
    '\\.(gif|ttf|eot|svg)$': '<rootDir>/spec/javascripts/__mocks__/fileMock.js'
  },
  moduleFileExtensions: [
    'jsx',
    'js'
  ],
  setupFiles: [
    '<rootDir>/spec/javascripts/__mocks__/global-mocks.js'
  ],
  moduleDirectories: [
    'node_modules',
    'app/javascript/src'
  ],
  transform: {
    '^.+\\.jsx?$': './node_modules/babel-jest'
  },
  testURL: 'http://localhost',
  testRegex: '.*.spec.jsx',
  verbose: true
}

createReducer.js

function createReducer<S> (initialState: S, handlers: any): Reducer<S> {
  return function reducer (state = initialState, action) {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action)
    } else {
      return state
    }
  }
}

Answer 1

babel-preset-flow 被调用为flow 预设在.babelrc 文件中。这是更新版本：

{
  "plugins": [
    "syntax-dynamic-import",
    "transform-runtime",
    "transform-object-rest-spread",
    "transform-class-properties"
  ],
  "presets": [
    "flow",
    "es2015",
    "react",
    "stage-0"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

默认和测试环境需要相同的配置（这里不需要 env/test 配置）。

transform-es2015-destructuring 插件已经包含在babel-preset-es2015 中。