打字稿`声明全局`阻止Jest测试套件运行

时间:2017-07-27 21:47:53

标签: typescript jestjs

我使用react,redux和jest的应用程序有一个带有此代码的打字稿文件:

declare global {
  interface Window { eventSource: any;}

  class EventSource {
    errorers: any;
    onerror: any;
    onmessage: () => void;

    addEventListener(event: string, cb: () => void): void;

    constructor(name: string);
  }
}

我正在使用jest测试框架在应用程序中使用es6 javascript的其他区域运行测试,它们工作正常。不幸的是,有两个测试套件由于以下错误而无法运行,而另一个就像它一样:

/Users/blyncsy/Documents/blyncsyu/client/app/bundles/analytic/data-hub.ts:3
declare global {
        ^^^^^^
SyntaxError: Unexpected identifier

  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:321:12)
  at Object.<anonymous> (app/bundles/Pulse/actions/odAnalyzerActions.js:2:16)
  at Object.<anonymous> (app/bundles/Pulse/containers/od-analyzer/ODLineRenderer.js:6:26)

如果上面列出的那个被注释掉,那么这个相同的打字稿文件的其他部分会搞砸测试运行器。此文件在第一个测试套件中正在测试的actions文件中引用,并且该文件中的操作正在由第二个套件测试的文件中引用。我假设在测试遇到这个.ts文件之前需要做一些事情来预编译这个.ts文件,但是我还没弄清楚如何去做。这是webpack配置:

/* eslint comma-dangle: ["error",
 {"functions": "never", "arrays": "only-multiline", "objects":
 "only-multiline"} ] */

const webpack = require('webpack');
const pathLib = require('path');

const devBuild = process.env.NODE_ENV !== 'production';

const config = {
  entry: [
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    './app/bundles/analytic',
    './app/bundles/Pulse/startup/registration',
  ],
  output: {
    filename: 'webpack-bundle.js',
    path: pathLib.resolve(__dirname, '../app/assets/webpack'),
  },
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", '.js', '.jsx'],
  },
  plugins: [
    new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
  ],
  module: {
    rules: [
      {
        test: /travel-info-type.ts/,
        use: [{
          loader: 'expose-loader',
          options: 'TravelInfoType'
        }]
      },
      {
        test: /heatmap-getter.ts/,
        use: [{
          loader: 'expose-loader',
          options: 'HeatmapGetter'
        }]
      },
      {
        test: /data-hub.ts/,
        use: [{
          loader: 'expose-loader',
          options: 'DataHub'
        }]
      },
      {
        test: require.resolve('react'),
        use: {
          loader: 'imports-loader',
          options: {
            shim: 'es5-shim/es5-shim',
            sham: 'es5-shim/es5-sham',
          }
        },
      },
      {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
      // Extract css files
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

module.exports = config;

if (devBuild) {
  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map';
} else {
  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}

感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

您的错误

  

/Users/blyncsy/Documents/blyncsyu/client/app/bundles/analytic/data-hub.ts:3

表示Jest正在尝试运行.ts文件。您需要使用ts-jest来转换此TS文件。

更多

这在TypeScript文档中有记录:https://facebook.github.io/jest/docs/getting-started.html#using-typescript