Code coverage is including .svg file

[mindjuice]

I have essentially the default app generated by create-react-app, but with some packages added to enable React testing for Jest (and test file moved into __test__).

If I run jest --coverage everything works properly, however, if I add the following line to my App.js file, I get an error from running the same command:

import logo from '../../public/images/logo.svg';

The error is:

> jest --coverage

 FAIL  src/App/__test__/App.test.js
  ● Test suite failed to run

    /Users/kenc/dev/test/public/images/logo.svg: Unexpected token (1:0)
      > 1 | <svg id="Layer_3" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 51.47 28.89"><defs><style>.cls-1{fill:#f7941d;}</style></defs>
<title>Artboard 1</title><path class="cls-1" d="LONG PATH REMOVED TO KEEP THIS SHORT"/>
<rect class="cls-1" x="24.15" y="10.57" width="4.41" height="3.12"/></svg>

----------|----------|----------|----------|----------|----------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------|----------|----------|----------|----------|----------------|
All files |  Unknown |  Unknown |  Unknown |  Unknown |                |
----------|----------|----------|----------|----------|----------------|
Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.134s
Ran all test suites.

I assume this is because jest is incorrectly trying to check code coverage for the .svg file.

I tried adding some config to my package.json to prevent it from looking at .svg files:

  "jest": {
    "coveragePathIgnorePatterns":["/node_modules/", ".*.svg"]
  }

That seemed to let it get further, as it now shows this error:

> jest --coverage

 FAIL  src/App/__test__/App.test.js
  ● Test suite failed to run

    /Users/kenc/dev/test/public/images/logo.svg:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg id="Layer_3" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.47 28.89">
                                                                                             ^
    SyntaxError: Unexpected token <

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
      at Object.<anonymous> (src/App/index.js:4:42)
      at Object.<anonymous> (src/App/__test__/App.test.js:3:40)

----------|----------|----------|----------|----------|----------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------|----------|----------|----------|----------|----------------|
All files |  Unknown |  Unknown |  Unknown |  Unknown |                |
----------|----------|----------|----------|----------|----------------|
Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.992s
Ran all test suites.

How can I prevent Jest from including .svg files in the coverage check?

[cpojer]

This is unrelated to coverage. You are trying to import an svg file which you cannot do in node.js. Check out the tutorial here: http://facebook.github.io/jest/docs/tutorial-webpack.html#content

[austincondiff]

Ever find a solution? Having this exact issue.

[SimenB]

Did you try the link in the post above yours?

[alp82]

Unfortunately that link is dead. There is also #2663, but although i tried the solutions there i had no luck so far.

[SimenB]

Oh, that's not good. Correct link is http://facebook.github.io/jest/docs/en/webpack.html

/cc @ericnakagawa is the "tutorial" part of the url gone on purpose? Is it possible to set up custom redirects?

[alp82]

Thanks. I gave an update at #2663 (comment) because it is still not working for me.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.