WASM imports in ava environment

[jerrygreen]

I'd like to do something like this:

import test from 'ava'

test('add', async (t) => {
  const wasm = await import('./dist/optimized') // <--- .wasm file
  const val = wasm.add(1, 2)
  t.is(val, 3)
})

Because in my application I can do this:

const AsmComponent = dynamic({
  loader: async () => {
    const wasmModule = await import('../../../asm/dist/optimized') // <--- the same exact .wasm file
    return (props) => <>{wasmModule.add(1, 2)}</>
  },
  ssr: false,
})

And I can use it with React like so:

          <p>Execute function from wasm module:</p>
          <p>
            1 + 2 = <AsmComponent />
          </p>

And it works:

But in ava I get an error:

$ C:\Users\Jerry\projects\project-x\src\asm\node_modules\.bin\ava

  add

  Rejected promise returned by test. Reason:

  Error (NodeError) {
    code: 'ERR_MODULE_NOT_FOUND',
    message: 'Cannot find module \'C:\\Users\\Jerry\\projects\\project-x\\src\\asm\\assembly\\dist\\optimized\' imported from C:\\Users\\Jerry\\projects\\project-x\\src\\asm\\assembly\\index.test.js',
  }

  » file:///assembly/index.test.js:4:16

  ─

  1 test failed

I'm not sure if it's a bug, or a feature that I lack, so I started a discussion instead of an issue. But I'd like to be able to import .wasm from ava tests, to test my WebAssembly module logic, and I'd be glad to hear anything related to this topic. Is it bug or what? Is it possible to import wasm from ava tests?

[novemberborn]

This error is coming from Node.js, not AVA.

Any chance you're compiling your application code with Babel or TypeScript? It might be modifying the exact import statement used. You might need to import optimized.wasm, with the extension.

[novemberborn]

If I understand ts-node correctly, in that setup it becomes responsible for compiling TypeScript and importing dependencies. Perhaps something is going wrong there.

[jerrygreen]

I removed ava config entirely, leaving all the defaults, I renamed file to index.test.js, and I run ava again, trying to both 1. leave .wasm extension and 2. cut the extension part

And again I have the same exact errors (ERR_UNKNOWN_FILE_EXTENSION with file extension, and ERR_MODULE_NOT_FOUND without file extension).

I even changed where file placed, and put it near the test file, so the path looks simpler:

import test from 'ava'

test('add', async (t) => {
  const wasm = await import('./dist/optimized')
  const val = wasm.add(1, 2)
  t.is(val, 3)
})

VSCode can find declaration file to show me hints:

All files listed in bash:

$ ls dist/optimized*
dist/optimized.d.ts  dist/optimized.wasm  dist/optimized.wasm.map  dist/optimized.wat

Yet, I still get the same exact errors. Pure js. No typescript or ts-node.

[novemberborn]

VS Code may just resolve the relative path and find the .d.ts.

I don't know how Node.js is supposed to deal with this. There shouldn't be anything special about AVA. Can you make it work with a *.js file, without AVA? And then a *.ts file, again without AVA?

[jerrygreen]

Don't you use VSCode? It resolves the path relative to file, so file is indeed there.

Can you make it work with a *.js file, without AVA? And then a *.ts file, again without AVA?

In my original initial message I shared the code example and a screenshot indicating that it works. It is .tsx file under NextJS project, using the same exact version of Node and Typescript. I.e. it not only resolves types, but the wasm module indeed imported and works.

Though I just found that you're completely right that by running pure node on a script similar to this test, I'm getting the same exact error, ERR_MODULE_NOT_FOUND. I actually thought wasm supported by node, but it seems it's probably NextJS feature to support that, - it probably has some webpack configuration to resolve this imports or something... I can probably use fetch instead, to import wasm in test, - though it's not only much less comfortable code (comparing to imports), but also VSCode won't load the declaration file from fetch, only from import syntax, therefore those hints won't be shown. AVA doesn't use webpack, right? 😅 Would've been overkill... So I might not expect support of wasm imports in my testing environment, - until it's supported directly by Node?

UPD. I FOUND IT:

Node actually requires --experimental-wasm-modules flag to support wasm imports, so I added it to ava config, and then with the .wasm extension part in the import now imports actually happen, so this code is now working:

import test from 'ava'

test('add', async (t) => {
  const wasm = await import('./dist/optimized.wasm')
  const val = wasm.add(1, 2)
  t.is(val, 3)
})

Types are working too (though I had to rename optimized.d.ts into optimized.wasm.d.ts:

Test finally passed:

Thx for pointing out that it's something wrong with node! (or, with how node is executed... without experimental flag)

Ava is simpler than I thought, and I like it

[novemberborn]

Glad you figured it out!

We try to modify the environment as little as possible, if at all. As you found, JavaScript tooling can add a lot of hard to understand behavior.