Error in vue-vanilla when running tests

[nene]

When running npm run test, not all tests pass, but instead fail with syntax error.

To Reproduce

1. Clone the repository
2. Check out master branch
3. npm ci
4. npm run init
5. npm run build
6. npm run test

Tests fail with error:

> @jsonforms/vue@2.5.1-beta.0 test /Users/nene/github/jsonforms/packages/vue/vue
> vue-cli-service test:unit

lerna ERR! npm run test exited 1 in '@jsonforms/vue-vanilla'
lerna ERR! npm run test stdout:

> @jsonforms/vue-vanilla@2.5.1-beta.0 test /Users/nene/github/jsonforms/packages/vue/vue-vanilla
> vue-cli-service test:unit

 WEBPACK  Compiling...

 ERROR  Failed to compile with 6 errors

 error  in ./src/styles/styles.ts

Module parse failed: Unexpected token (28:15)
File was processed with these loaders:
 * ../../../node_modules/cache-loader/dist/cjs.js
 * ../../../node_modules/babel-loader/lib/index.js
 * ../../../node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|   const userStyles = (0, _vue.inject)('styles', _defaultStyles.defaultStyles);
| 
>   if (!element?.options?.styles) {
|     return userStyles;
|   }

 @ ./src/styles/index.ts 7:14-33
 @ ./src/index.ts
 @ /Users/nene/github/jsonforms/node_modules/cache-loader/dist/cjs.js??ref--14-0!/Users/nene/github/jsonforms/node_modules/babel-loader/lib!/Users/nene/github/jsonforms/node_modules/ts-loader??ref--14-2!/Users/nene/github/jsonforms/node_modules/cache-loader/dist/cjs.js??ref--1-0!/Users/nene/github/jsonforms/node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--1-1!./tests/unit/util/TestComponent.vue?vue&type=script&lang=ts
 @ ./tests/unit/util/TestComponent.vue?vue&type=script&lang=ts
 @ ./tests/unit/util/TestComponent.vue
 @ ./tests/unit/util/util.ts
 @ ./tests/unit/util/index.ts
 @ ./tests/unit/array/ArrayListRenderer.spec.ts
 @ /Users/nene/github/jsonforms/node_modules/mochapack/lib/entry.js

 error  in ./src/controls/NumberControlRenderer.vue?vue&type=script&lang=ts

there are several other errors, though I think only the first one matters, as it points to the failure of handling the optional chaining operator at line:

if (!element?.options?.styles) {

Might be a problem with tsconfig setup. I notice that in tsconfig.base there's "target": "es5" while vue-vanilla/tsconfig.json has "target": "esnext".

Expected behavior
Tests pass.

Used Setup:

• OS: MacOS 11.2.3
• NodeJS: 14.16.0
• npm: 6.14.11
• Framework: vue
• RendererSet: vanilla

[sdirix]

Hi @nene, thanks for report!

Can you try again with Node 12? This is at the moment the only supported environment for development. I'll update the root readme soon to actually reflect that. We use Linux as development platform and there all reasonable Node versions work. However on Mac/Windows we have had quite some issues in the recent past. Our Github actions currently build with Node 12 against all platforms.

Might be a problem with tsconfig setup. I notice that in tsconfig.base there's "target": "es5" while vue-vanilla/tsconfig.json has "target": "esnext".

We're currently working on improving our build, switching to a simple rollup-based environment for most packages (not only vue) and will also standardize the typescript configs. However the error you are seeing is very likely unrelated. From my experience these loader issues stem from local resolving issues. Linux, Mac and Windows are behaving very differently here, not only in general but also with each Node version. This leads to problems with our complicated setup, as we have Vue 2 AND Vue 3 plus their respective development tooling in the same monorepo.

When you find ways to improve the setup to make it more consistent for non-Linux systems, I would happy accept suggestions or contributions.

[nene]

So, I switched to node 12.22.1 and tried to run the tests again:

rm -rf node_modules
npm ci
npm init
npm run build
npm run test

I still get an error about the same thing:

> @jsonforms/vue@2.5.1-beta.0 test /Users/nene/github/jsonforms/packages/vue/vue
> vue-cli-service test:unit


lerna ERR! npm run test stderr:
FAIL tests/unit/JsonForms.spec.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/nene/github/jsonforms/packages/vue/vue/src/jsonFormsCompositions.ts:104
      const dispatchMethods = dispatchMap?.(dispatch);
                                          ^

    SyntaxError: Unexpected token '.'

       7 | import UnknownRenderer from './UnknownRenderer.vue';
       8 | import maxBy from 'lodash/maxBy';
    >  9 | import { rendererProps, useJsonFormsRenderer } from '../jsonFormsCompositions';
         | ^
      10 |
      11 | export default defineComponent({
      12 |   name: 'dispatch-renderer',

      at ScriptTransformer._transformAndBuildScript (../../../node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (../../../node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/components/DispatchRenderer.vue:9:1)

[sdirix]

The current master build including tests runs successfully with Github Actions With Node 12 on macos-latest. Maybe there is something non-deterministic going on as the Mac build also failed one time seemingly at random before. Sadly I don't have a Mac to see how often this problem occurs or whether that is actually the same problem you are experiencing.

Do you need the Vue tests to run? If you're not interested in the Vue renderers you could also just disable the Vue packages for your local development.

[nene]

Do you need the Vue tests to run?

Well, I was trying to make some changes across the whole repo... but when I'm not starting out with green tests, then I'm kind of working in the dark :(

[kimamil]

Hi @sdirix just wondering if anything improved here? While I can download and run the vue seed on macOS as well as using jsonforms as is, I am not able to get my custom array control to run, with similar errors as described by nene.

I basically copied the ArrayListRenderer.vue and ArrayListElement.vue. I modified the template and adjusted the imports. However, I am stuck with two Problems, both related to definitions using the "<>" Generics definition.

ArrayListRenderer.vue

ArrayListElement.vue

resulting in the following errors when trying to serve the app:

As suggested above, I also tried with node 12.22.12 but get the same errors.

I have the feeling this is related to this report and didn't want to open a separate issue on it.

Any help is appreciated.

[kimamil]

So I was able to fix the linting issues by setting up a clean vue project, selecting features manually and adding typescript. Still can't figure out how to create a custom array control in vue :/

[sdirix]

I see you already found your answers ;)