How use AVA with JQuery in Typescript?

Question

I try to test a lib with JQuery but I have an error.

Example :

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

Error : jquery_1.default is not a function

Have you an idea to resolve this error ?

Thanks

====== Details

You can test my config with the project "typescript-starter". It is a typescript boilerplate for building javascript libraries and projects. Error is with the command "yarn test".

Here the tsconfig.json (here with es5 in target and lib... but same result with 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
}

unional · Answer 1 · 2018-02-15T20:57:17.163

0

Short answer: import $ = require('jquery')

Longer answer: The library jquery is a CJS module and you should load it using the above syntax instead of relying on interop between CJS and ESM, unless you are targeting ES2015.

There is a long story on this. If you are interested, start here: https://github.com/Microsoft/TypeScript/issues/16093

UPDATE: with TypeScript@2.7 released, you can now do import EditableElement from 'Transformer' directly.

Turn on esModuleInterop in your tsconfig.json

edited Feb 15 '18 at 20:57

answered Aug 04 '17 at 02:33

unional

14,651
5
32
56

I have an error with your code : error TS1202: Import assignment cannot be used when targeting ECMAScript 2015 modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead. – Karima Rafes Aug 04 '17 at 13:23
You are targeting es2015. Any particular reason? – unional Aug 04 '17 at 16:07
I'm a noob about Typescript. I use a typescript boilerplate for building my first javascript library. I need to change the configuration ? https://github.com/bitjson/typescript-starter – Karima Rafes Aug 05 '17 at 08:39
change to `target: "es5"`and that problem will go away. – unional Aug 05 '17 at 08:41
With target es5 For the line "import $ = require('jquery')" I have the error "TS1202: Import assignment cannot be used when targeting ECMAScript 2015 modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead." – Karima Rafes Aug 05 '17 at 08:50
You still have target: es2015. Can you post your tsconfig.json? – unional Aug 05 '17 at 08:51
I added the tsconfig in the question. – Karima Rafes Aug 05 '17 at 08:57
That's strange. The config is fine. You should not see that error. Are you doing `tsc -w`? Maybe you should stop the compiler and start again? It is not picking up the updated config. – unional Aug 05 '17 at 09:02
yarn build is OK but yarn test generate this error see package.json https://github.com/bitjson/typescript-starter/blob/master/package.json – Karima Rafes Aug 05 '17 at 09:06
I change also the target with es2015 in the file config/export/tsconfig.module but I have the same error. – Karima Rafes Aug 05 '17 at 09:13

score 0 · Accepted Answer · answered Aug 10 '17 at 15:37

I found my answer here : https://github.com/rollup/rollup/issues/1267

The answer is not 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

How use AVA with JQuery in Typescript?

2 Answers2