Enhancement: Istanbul support #286

uglow · 2017-02-14T05:33:02Z

My current projects use Webpack + Karma + PhantomJS/Chrome + Istanbul to run unit tests inside a browser. It would be great if there was a way for Istanbul to "see" the JS code inside the <script> block in the Svelte file and add instrumentation. Or is there another way... given that I'm using Webpack, can I point Istanbul to the compiled version of the Svelte component?

I should add that I can successfully unit test the component. I just can't see evidence of this because I think Istanbul is ignoring the Svelte source file (even when I direct it to include *.html files for instrumentation).

The text was updated successfully, but these errors were encountered:

PaulBGD · 2017-02-14T07:09:50Z

How does Istanbul handle vue?

Swatinem · 2017-02-14T10:28:23Z

given that I'm using Webpack, can I point Istanbul to the compiled version of the Svelte component?

Try chaining the svelte loader to the babel loader with the istanbul preset.
I think that should theoretically work.

nsaunders · 2017-02-14T14:29:22Z

Another way to go is to break the logic of your component out into separate (pure JS) modules and then compose your component's exported object from those various pieces such that your component code is basically just declarative.

PaulBGD · 2017-02-14T14:40:44Z

@therealnicksaunders Svelte doesn't have support for that yet (#65)

nsaunders · 2017-02-14T18:19:50Z

@PaulBGD I definitely should have provided an example. Here's a trivial one where a helper is implemented in a separate module in order to facilitate testing the logic.

// helpers.js
export function convertFeetToInches(feet) {
  return feet * 12;
}

// helpers.spec.js
import { convertFeetToInches } from './helpers';

describe('convertFeetToInches', () => {
  it('should convert feet to inches', () => {
    expect(convertFeetToInches(2)).to.equal(24);
  });
});

<!-- InchesComponent.html -->
<script>
import { convertFeetToInches } from './helpers';

export default {
  data() {
    return { length: 0 };
  },
  helpers: { convertFeetToInches }
}
</script>
<span>{{convertFeetToInches(length)}} inches</span>

uglow · 2017-02-14T20:07:40Z

@therealnicksaunders - thats fair enough for logic, but I also want to test conditional rendering of markup.

uglow · 2017-02-14T21:38:36Z

@Swatinem Here's my original Webpack config (the relevant bits):

let srcLoader = {
  test: helpers.pathRegEx(/src\/.*\.(js|jsx)$/),
  use: [
    {
      'loader': 'babel-loader',
      'options': {
        'cacheDirectory': true
      }
    }
  ],
  exclude: moduleDirectories
};
config.module.rules.push(srcLoader);

let svelteLoader = {
  test: helpers.pathRegEx(/src\/.*\.svlt$/),  // Using .svlt for Svelte components
  use: [
    {loader: 'svelte-loader'},
  ],
  exclude: moduleDirectories
};
config.module.rules.push(svelteLoader);

The above configuration works in that I can use the component with my other source code (Angular in this case) and also perform unit tests. However, when I look at the code coverage of the JS files, it does not list my component in the list of files instrumented.

.babelrc:

{

  "env": {
    "test": {
      "plugins": [
        ["istanbul", {
          "exclude": [
            "**/unitTest/*.spec.(js|jsx)"
          ],
          "include": [
            "**/src/modules/**/*.(js|svlt)"
          ]
        }]
      ]
    }
  },
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    "transform-object-assign"
  ]
}

Now when I try adding svelte-loader before babel-loader:

let svelteLoader = {
  test: helpers.pathRegEx(/src\/.*\.svlt$/),
  use: [
    {loader: 'svelte-loader'},
    {loader: 'babel-loader'}
  ],
  exclude: moduleDirectories    // There should be no need to exclude unit or browser tests because they should NOT be part of the source code dependency tree
};
config.module.rules.push(svelteLoader);

Output:

> cross-env BABEL_ENV=test NODE_ENV=test karma start ./config/testUnit/karma.conf.js

webpack: wait until bundle finished: 

ERROR in ./src/modules/common/marketingPanel/marketingPanel.svlt
Module build failed: SyntaxError: Unexpected token (1:0)

> 1 | <div class="ap-container marketing-panel__container">
    | ^
  2 |   <div class="ap-content marketing-panel__content">
  3 |     <img class="marketing-panel__img" src="{{imgUrl}}" alt="{{imgDesc}}">
  4 |     <div class="marketing-panel__text-content">

 @ ./src/modules/common/marketingPanel/unitTest/marketingPanel.spec.js 3:0-52
 @ ./src/modules unitTest\/.*spec\.(js|jsx)$
 @ ./config/testUnit/test.files.js
webpack: Failed to compile.

If I reverse the loader order:

let svelteLoader = {
  test: helpers.pathRegEx(/src\/.*\.svlt$/),
  use: [
    {loader: 'babel-loader'},
    {loader: 'svelte-loader'}
  ],
  exclude: moduleDirectories    // There should be no need to exclude unit or browser tests because they should NOT be part of the source code dependency tree
};
config.module.rules.push(svelteLoader);

Output:

> cross-env BABEL_ENV=test NODE_ENV=test karma start ./config/testUnit/karma.conf.js

webpack: wait until bundle finished:

ERROR in ./src/modules/common/marketingPanel/marketingPanel.svlt
Module build failed: Error: /mydev/code/src/modules/common/marketingPanel/marketingPanel.svlt: don't know how to turn this value into a node
at Object.valueToNode (/mydev/code/node_modules/babel-types/lib/converters.js:337:9)
at Object.valueToNode (/mydev/code/node_modules/babel-types/lib/converters.js:332:46)
at Object.exit (/mydev/code/node_modules/istanbul-lib-instrument/dist/visitor.js:520:34)
at PluginPass.exit (/mydev/code/node_modules/babel-plugin-istanbul/lib/index.js:73:23)
at newFn (/mydev/code/node_modules/babel-traverse/lib/visitors.js:276:21)
at NodePath._call (/mydev/code/node_modules/babel-traverse/lib/path/context.js:76:18)
at NodePath.call (/mydev/code/node_modules/babel-traverse/lib/path/context.js:48:17)
at NodePath.visit (/mydev/code/node_modules/babel-traverse/lib/path/context.js:117:8)
at TraversalContext.visitQueue (/mydev/code/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitSingle (/mydev/code/node_modules/babel-traverse/lib/context.js:108:19)
at TraversalContext.visit (/mydev/code/node_modules/babel-traverse/lib/context.js:192:19)
at Function.traverse.node (/mydev/code/node_modules/babel-traverse/lib/index.js:114:17)
at traverse (/mydev/code/node_modules/babel-traverse/lib/index.js:79:12)
at File.transform (/mydev/code/node_modules/babel-core/lib/transformation/file/index.js:558:35)
at /mydev/code/node_modules/babel-core/lib/transformation/pipeline.js:50:19
at File.wrap (/mydev/code/node_modules/babel-core/lib/transformation/file/index.js:574:16)
at Pipeline.transform (/mydev/code/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
at transpile (/mydev/code/node_modules/babel-loader/lib/index.js:38:20)
at Object.module.exports (/mydev/code/node_modules/babel-loader/lib/index.js:133:12)
@ ./src/modules/common/marketingPanel/unitTest/marketingPanel.spec.js 3:0-52
@ ./src/modules unitTest\/.*spec\.(js|jsx)$
@ ./config/testUnit/test.files.js
webpack: Failed to compile.

Swatinem · 2017-02-14T21:42:47Z

looks more like karma has its own require hook or something. tbh, I have no idea how it works.
When using jest, you will have to write your own transform function https://facebook.github.io/jest/docs/configuration.html#transform-object-string-string

uglow · 2017-02-14T21:54:17Z

But the above errors are Webpack compilation errors - it hasn't reached Karma yet.

uglow · 2017-02-15T00:02:29Z

Made some progress. If I use Webpack and svelte-loader -> babel-loader, then turn off inline source maps for the babel-plugin-istanbul config in .babelrc, I can see the file is being code-covered, but the Istanbul HTML report-writer fails.

.babelrc:

{
  "env": {
    "test": {
      "plugins": [
        ["istanbul", {
          "exclude": [
            "**/unitTest/*.spec.(js|jsx)"
          ],
          "include": [
            "**/src/modules/**/*.(js|svlt)"
          ],
          "useInlineSourceMaps": false     //<---- added this
        }]
      ]
    }
  },
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    "transform-object-assign"
  ]
}

Output:

----------------------------------------|----------|----------|----------|----------|----------------|
File                                    |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------------------------------------|----------|----------|----------|----------|----------------|
 common/marketingPanel/                 |    66.99 |    36.17 |    63.89 |    70.37 |                |
  marketingPanel.svlt                   |    66.99 |    36.17 |    63.89 |    70.37 |... 341,342,352 |
 common/multiLineAddress/               |    27.78 |        0 |        0 |    27.78 |                |
  multiLineAddress.component.js         |      100 |      100 |      100 |      100 |                |
  multiLineAddress.controller.js        |    18.75 |        0 |        0 |    18.75 |... 21,27,31,35 |
----------------------------------------|----------|----------|----------|----------|----------------|
All files                               |     37.5 |    16.07 |    18.25 |    37.83 |                |
----------------------------------------|----------|----------|----------|----------|----------------|

15 02 2017 10:56:56.964:ERROR [coverage]: TypeError: Cannot read property 'text' of undefined
at /mydev/code/node_modules/istanbul/lib/report/html.js:288:53
at Array.forEach (native)
at annotateBranches (/mydev/code/node_modules/istanbul/lib/report/html.js:255:30)
at HtmlReport.writeDetailPage (/mydev/code/node_modules/istanbul/lib/report/html.js:426:9)
at /mydev/code/node_modules/istanbul/lib/report/html.js:489:26
at SyncFileWriter.writeFile (/mydev/code/node_modules/istanbul/lib/util/file-writer.js:57:9)
at FileWriter.writeFile (/mydev/code/node_modules/istanbul/lib/util/file-writer.js:147:23)
at /mydev/code/node_modules/istanbul/lib/report/html.js:488:24
at Array.forEach (native)
at HtmlReport.writeFiles (/mydev/code/node_modules/istanbul/lib/report/html.js:482:23)
at /mydev/code/node_modules/istanbul/lib/report/html.js:484:22
at Array.forEach (native)
at HtmlReport.writeFiles (/mydev/code/node_modules/istanbul/lib/report/html.js:482:23)
at HtmlReport.writeReport (/mydev/code/node_modules/istanbul/lib/report/html.js:566:14)
at writeReport (/mydev/code/node_modules/karma-coverage/lib/reporter.js:68:16)
at /mydev/code/node_modules/karma-coverage/lib/reporter.js:296:11
at /mydev/code/node_modules/karma/lib/helper.js:145:7
at /mydev/code/node_modules/graceful-fs/polyfills.js:287:18
at FSReqWrap.oncomplete (fs.js:123:15)

uglow · 2017-02-19T22:18:51Z

Tried using https://www.npmjs.com/package/karma-coverage-istanbul-reporter and v2.0.0 of https://github.com/deepsweet/istanbul-instrumenter-loader (which uses the newest istanbul-api) and get a similar error to before:

ERROR in ./src/modules/common/marketingPanel/marketingPanel.svlt
Module build failed: Error: don't know how to turn this value into a node
at Object.valueToNode (/mydev/code/node_modules/babel-types/lib/converters.js:337:9)
at Object.valueToNode (/mydev/code/node_modules/babel-types/lib/converters.js:332:46)
at Object.exit (/mydev/code/node_modules/istanbul-lib-instrument/dist/visitor.js:520:34)
at exit (/mydev/code/node_modules/istanbul-lib-instrument/dist/instrumenter.js:134:37)
at NodePath._call (/mydev/code/node_modules/babel-traverse/lib/path/context.js:76:18)
at NodePath.call (/mydev/code/node_modules/babel-traverse/lib/path/context.js:48:17)
at NodePath.visit (/mydev/code/node_modules/babel-traverse/lib/path/context.js:117:8)
at TraversalContext.visitQueue (/mydev/code/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitSingle (/mydev/code/node_modules/babel-traverse/lib/context.js:108:19)
at TraversalContext.visit (/mydev/code/node_modules/babel-traverse/lib/context.js:192:19)
at Function.traverse.node (/mydev/code/node_modules/babel-traverse/lib/index.js:114:17)
at traverse (/mydev/code/node_modules/babel-traverse/lib/index.js:79:12)
at Instrumenter.instrumentSync (/mydev/code/node_modules/istanbul-lib-instrument/dist/instrumenter.js:138:41)
at Instrumenter.instrument (/mydev/code/node_modules/istanbul-lib-instrument/dist/instrumenter.js:175:32)
at Object.module.exports (/mydev/code/node_modules/istanbul-instrumenter-loader/index.js:25:25)
@ ./src/modules/common/marketingPanel/unitTest/marketingPanel.spec.js 1:19889-19940
@ ./src/modules unitTest\/.*spec\.(js|jsx)$
@ ./config/testUnit/test.files.js

For me to be able to recommend Svelte as a viable option to other frameworks, the test-coverage use-case needs a solution.

Swatinem · 2017-02-20T07:57:23Z

Can you try to manually compile the svelte template, and then try to manually instrument it via istanbul? Do you get the same error there as well?
I think this is rather a problem with istanbul/babel than svelte in this case.

uglow · 2017-04-18T05:56:35Z

Closing to sveltejs/svelte-loader#22

Rich-Harris added the awaiting submitter needs a reproduction, or clarification label Feb 28, 2017

Rich-Harris added this to the N/A milestone Mar 1, 2017

uglow mentioned this issue Apr 5, 2017

Use Vue.js source-map technique for Svelte source code sveltejs/svelte-loader#22

Closed

uglow closed this as completed Apr 18, 2017

alejandroiglesias mentioned this issue Jan 20, 2021

Can we collect code coverage? bahmutov/cypress-svelte-unit-test#70

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Enhancement: Istanbul support #286

Enhancement: Istanbul support #286

uglow commented Feb 14, 2017 •

edited

Loading

PaulBGD commented Feb 14, 2017

Uh oh!

Swatinem commented Feb 14, 2017

Uh oh!

nsaunders commented Feb 14, 2017

Uh oh!

PaulBGD commented Feb 14, 2017

Uh oh!

nsaunders commented Feb 14, 2017

Uh oh!

uglow commented Feb 14, 2017

Uh oh!

uglow commented Feb 14, 2017 •

edited

Loading

Uh oh!

Swatinem commented Feb 14, 2017

Uh oh!

uglow commented Feb 14, 2017

Uh oh!

uglow commented Feb 15, 2017 •

edited

Loading

Uh oh!

uglow commented Feb 19, 2017

Uh oh!

Swatinem commented Feb 20, 2017

Uh oh!

uglow commented Apr 18, 2017

Uh oh!

Uh oh!

Enhancement: Istanbul support #286

Enhancement: Istanbul support #286

Comments

uglow commented Feb 14, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PaulBGD commented Feb 14, 2017

Uh oh!

Swatinem commented Feb 14, 2017

Uh oh!

nsaunders commented Feb 14, 2017

Uh oh!

PaulBGD commented Feb 14, 2017

Uh oh!

nsaunders commented Feb 14, 2017

Uh oh!

uglow commented Feb 14, 2017

Uh oh!

uglow commented Feb 14, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Swatinem commented Feb 14, 2017

Uh oh!

uglow commented Feb 14, 2017

Uh oh!

uglow commented Feb 15, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

uglow commented Feb 19, 2017

Uh oh!

Swatinem commented Feb 20, 2017

Uh oh!

uglow commented Apr 18, 2017

Uh oh!

uglow commented Feb 14, 2017 •

edited

Loading

uglow commented Feb 14, 2017 •

edited

Loading

uglow commented Feb 15, 2017 •

edited

Loading