Testing Svelte Components

[hwangkyle]

It seems like using Jest for testing Svelte components requires a lot of moving parts. I will document what I have done here:

svelte.config.cjs

I put this in a separate file since it seems cleaner to do so.

module.exports = {
    "testEnvironment": "jsdom",
    "transform": {
        "^.+\\.js$": "babel-jest",
        "^.+\\.svelte$": ["svelte-jester",{"preprocess": true}]
    },
    "transformIgnorePatterns": [
        "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
    ],
    "moduleFileExtensions": ["js","svelte","json"],
    "moduleNameMapper": {
        "^.+\\.(gif|png)$": "<rootDir>/mocks/fileMock.js"
    }
};

• "testEnvironment": "jsdom" is used because this error is thrown otherwise (window is referred to in src/utils/dimensions.js):
  • Note that this causes different behavior, such as structuredClone not working.

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.
    ReferenceError: window is not defined

• "^.+\\.svelte$": ["svelte-jester",{"preprocess": true}] is so that .svelte files can be used.
• The moduleNameMapper is used because Jest does not process these files, so .gif and .png files need to be mocked.

  App.test.js

  Because of jsdom, structuredClone and BroadcastChannel are not usable, so they are mocked. I also tried mocking .json files, but I don't know if it really does anything. I then try rendering App with an empty test, but App does not run properly.

  App.svelte

  I changed m = new MultiverseMatrix(data.default) to just data. For some reason, the import behavior is different. But if I change the import from something like import * as data_hr from '../static/data/hurricane-data.json' to import data_hr from '../static/data/hurrican-data.json', it's simply just undefined. This should probably be changed back once it is figured out how to test these things.

  toggle-hide-option.svelte

  I added an if statement in one of the reactive parts since something was being passed in that shouldn't for some reason. This should also probably be changed back.

  svelte.config.js

  It is empty, but it is needed to test .svelte files, if I remember correctly.

[hwangkyle]

Here are some stackoverflow references. Not all were necessarily used, but they could be helpful. https://stackoverflow.com/questions/49501723/unexpected-token-m-in-json-at-position-0-error https://stackoverflow.com/questions/75809272/referenceerror-broadcastchannel-is-not-defined-using-jest-testing-libray https://stackoverflow.com/questions/64605154/jest-domock-and-json-import-mocking https://stackoverflow.com/questions/69227566/consider-using-the-jsdom-test-environment https://stackoverflow.com/questions/70588096/error-in-svelte-config-js-syntax-error-cannot-use-import-statement-outside-a-mo https://stackoverflow.com/questions/73607410/referenceerror-structuredclone-is-not-defined-using-jest-with-nodejs-typesc https://stackoverflow.com/questions/39418555/syntaxerror-with-jest-and-react-and-importing-css-files https://stackoverflow.com/questions/56103772/syntaxerror-unexpected-token-m-in-json-at-position-0-jest-fails-running-tests https://stackoverflow.com/questions/42986480/jest-mock-import-of-json-file