Comment utiliser AVA avec JQuery dans Typescript?

Question

J'essaye de tester une lib avec JQuery mais j'ai une erreur.

Exemple:

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" 
    } 

Erreur: jquery_1.default est pas une fonction

Avez-vous une idée de résoudre cette erreur?

Merci

Détails ======

Vous pouvez tester ma config avec le projet "typescript-starter". Il s'agit d'une planche à caractères dactylographiée pour la construction de bibliothèques et de projets javascript. L'erreur est avec la commande "test de fil".

Voici le tsconfig.json (ici avec ES5 dans la cible et lib ... mais même résultat avec 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

J'ai trouvé ma réponse ici: https://github.com/rollup/rollup/issues/1267

La réponse est non trivial:

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") 
    }); 
}); 

Bye

Answer 2

Réponse courte: import $ = require('jquery')

Deuxième réponse: La bibliothèque est jquery un module CJS et vous devriez le charger en utilisant la syntaxe ci-dessus au lieu de compter sur l'interopérabilité entre CJS et ESM, sauf si vous ciblez ES2015.

Il y a une longue histoire là-dessus. Si vous êtes intéressé, commencez ici: https://github.com/Microsoft/TypeScript/issues/16093

MISE À JOUR: avec TypeScript@2.7 publié, vous pouvez le faire directement import EditableElement from 'Transformer'.

Allumez esModuleInterop dans votre tsconfig.json