如何在 Typescript 中将 AVA 与 JQuery 一起使用？

Question

我尝试用 JQuery 测试一个库，但出现错误。

示例：

import { test } from 'ava'
import $ from 'jquery'
import {fixture} from 'ava-browser-fixture'

test.beforeEach('setup fixture',
    fixture("./src/__test__/html/test.html")
);

test("Test JQuery", t => {
    $(t.context.document).ready(function () { // <=== ERROR with yarn test
        $('#test').append("test")
    });
});

Config.json

  "ava": {
    "source": [
      ...
   ],
    "require": [
      "babel-register",
      "ava-browser-fixture"
    ],
    "babel": "inherit"
  }

错误：jquery_1.default 不是函数

您有解决此错误的想法吗？

谢谢

======详情

您可以使用项目 "typescript-starter" 测试我的配置。它是用于构建 javascript 库和项目的打字稿样板。命令 "yarn test".

出错

这里是 tsconfig.json（这里是目标和库中的 es5...但结果与 es6 相同）：

{
  "extends": "./config/tsconfig.flexible", 
  "compilerOptions": {
    "target": "es5",
    "outDir": "build/main",
    "rootDir": "src",
    "moduleResolution": "node",
    "module": "commonjs",
    "declaration": true,
    "importHelpers": true,
    "inlineSourceMap": true,
    "listFiles": false,
    "traceResolution": false,
    "pretty": true,
    "lib" : [
      "es5",
      "DOM"
    ],
    "types" : [
      "node"
    ],
    "baseUrl": ".", // required for "paths"
    "paths": {
      "sgvizler2": ["src/index.ts"] // write tests without relative paths
    }
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules/**"
  ],
  "compileOnSave": false
}

Answer 1

简答：import $ = require('jquery')

更长的答案：库 jquery 是一个 CJS 模块，您应该使用上述语法加载它，而不是依赖 CJS 和 ESM 之间的互操作，除非您的目标是 ES2015。

这个说来话长。如果您有兴趣，请从这里开始： https://github.com/Microsoft/TypeScript/issues/16093

更新：随着 TypeScript@2.7 的发布，您现在可以直接执行 import EditableElement from 'Transformer'。

在您的 tsconfig.json

中打开 esModuleInterop

Answer 2

我在这里找到了答案：https://github.com/rollup/rollup/issues/1267

答案很重要：

import { test } from 'ava'
import {fixture} from 'ava-browser-fixture'

import * as jqueryProxy from 'jquery'
const jquery: JQueryStatic = (<any>jqueryProxy).default || jqueryProxy

test.beforeEach('setup fixture',
    fixture("./src/__test__/html/test.html")
);

test("Test JQuery", t => {
    jqueryProxy(t.context.document).ready(function () {
        jqueryProxy('#test').append("test")
    });
});

再见

如何在 Typescript 中将 AVA 与 JQuery 一起使用？

How use AVA with JQuery in Typescript?

jquery

unit-testing

browserify

typescript

ava