Compatibility with Yarn 2 (PnP)

[mxro]

Thanks for this useful library. I was wondering if this works together with Yarn 2 Plug'n'play (pnp)?

I am getting the following error:

 Command failed: node --unhandled-rejections=strict --abort-on-uncaught-exception "C:\Users\Max\repos\goldstack-mega\.yarn\$$virtual\svelte-jester-virtual-411df74ecf\0\cache\svelte-jester-npm-1.3.2-32d0fc490b-4f900c8d1a.zip\node_modules\svelte-jester\src\preprocess.js"
    Uncaught Error: Cannot find module 'C:\Users\Max\repos\goldstack-mega\.yarn\$$virtual\svelte-jester-virtual-411df74ecf\0\cache\svelte-jester-npm-1.3.2-32d0fc490b-4f900c8d1a.zip\node_modules\svelte-jester\src\preprocess.js'

    FROM

      at Object.process (../../../../.yarn/$$virtual/svelte-jester-virtual-411df74ecf/0/cache/svelte-jester-npm-1.3.2-32d0fc490b-4f900c8d1a.zip/node_modules/svelte-jester/src/transformer.js:16:30)

I assume this is caused by the following command in transformer.js#L16 not taking into account the Yarn PnP loader?

    const preprocessResult = execSync(
      `node --unhandled-rejections=strict --abort-on-uncaught-exception "${preprocessor}"`,
      {
        env: { PATH: process.env.PATH, source, filename, svelteConfig },
        maxBuffer: maxBuffer || 10 * 1024 * 1024,
      }
    ).toString();

Jest I think in other places automatically uses the PnP loader.

[benmccann]

For SvelteKit, we highly recommend you not use Yarn: https://kit.svelte.dev/faq#integrations

[mxro]

Noted @benmccann !

I think for this library there is no inherent restriction in Yarn Berry that would prevent it to be patched for those interested in using Yarn 2 with Svelte? Everything else works fine, it is just this dependency I couldn't get to work!

[sebastianrothe]

This should be fixed with Jest 27+ and using the async transformer aka ESM-mode. Can you please retry with the latest version?

[mxro]

Thank you for looking into this!!

I tried testing this out but somehow always got stuck with the following error:

TypeError: Jest: a transform must export a `process` or `processAsync` function.
    at C:\Users\Max\repos\goldstack-mega\.yarn\cache\@jest-transform-npm-27.2.0-6b318bf141-0bd4ad3ce2.zip\node_modules\@jest\transform\build\ScriptTransformer.js:397:19
 at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Promise.all (index 0)
    at async ScriptTransformer.loadTransformers (C:\Users\Max\repos\goldstack-mega\.yarn\cache\@jest-transform-npm-27.2.0-6b318bf141-0bd4ad3ce2.zip\node_modules\@jest\transform\build\ScriptTransformer.js:378:5)
    at async createScriptTransformer (C:\Users\Max\repos\goldstack-mega\.yarn\cache\@jest-transform-npm-27.2.0-6b318bf141-0bd4ad3ce2.zip\node_modules\@jest\transform\build\ScriptTransformer.js:1106:3)

This is using a new project created with:

npx degit sveltejs/template svelte-app
node scripts/setupTypeScript.js

And then following the instructions from the svelte jester readme.

Here the dependencies:

 "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "@rollup/plugin-typescript": "^8.0.0",
    "@tsconfig/svelte": "^2.0.0",
    "babel-jest": "^27.2.0",
    "jest": "^27.2.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-check": "^2.0.0",
    "svelte-jester": "^2.1.2",
    "svelte-preprocess": "^4.0.0",
    "ts-jest": "^27.0.5",
    "tslib": "^2.0.0",
    "typescript": "^4.0.0"
  },

jest.config.js

const base = require('./../../jest.config.ui');

module.exports = {
  ...base,
  transform: {
    '^.+\\.svelte$': 'svelte-jester',
    '^.+\\.js$': 'babel-jest', "^.+\\.ts$": "ts-jest"
  },
  moduleFileExtensions: ['js', 'svelte', 'ts'],
}

svelte.config.js

const sveltePreprocess = require("svelte-preprocess");

module.exports = {
  preprocess: sveltePreprocess({
    // ...
  }),
};

and here reference to the remainder of the source https://github.com/goldstack/goldstack/tree/svelte/workspaces/templates/packages/app-svelte-2

I tried experimenting with enabling experimental ESM as well but that resulted in other errors. Would that be required to use this?

[benmccann]

Everyone was getting that error. It should be fixed in master. Try again after 2.1.3 is released

[mihar-22]

Sorry about the delay, 2.1.3 has been released!

[mxro]

Thank you, I think this issue is resolved in 2.1.5. However, still struggeling to get this working.

Using this config now jest.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const base = require('./../../jest.config.ui');

module.exports = {
  ...base,
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.json',
      isolatedModules: true,
    },
  },
  testEnvironment: 'node',
  preset: 'ts-jest',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  transform: {
    '^.+\\.svelte$': [ 'svelte-jester', { preprocess: './svelte.test.config.js'}],
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.tsx$': 'ts-jest',
    '^.+\\.js$': 'ts-jest',
    '^.+\\.jsx$': 'ts-jest',
  },
  moduleFileExtensions: ['ts', 'js', 'svelte'],
};

But the problem is when I try to run a test defined as follows App.uispec.ts:

import App from './App.svelte';
import dummy from './dummy';
// import { render, fireEvent } from '@testing-library/svelte';

describe('Svelte tests', () => {
  it('Should render component', () => {
    expect(true).toEqual(true);

    // const { getByText } = render(App, { name: 'User' });

    // // expect(getByText('Hello User')).toBeInTheDocument();
    // console.log(getByText('Hello User'));
  });
});

I get an error:

    Command failed: node --unhandled-rejections=strict --abort-on-uncaught-exception C:\Users\Max\repos\goldstack-mega\.yarn\__virtual__\svelte-jester-virtual-b464acbe31\0\cache\svelte-jester-npm-2.1.5-ae6f9b5f04-fb5b6c81ed.zip\node_modules\svelte-jester\dist\preprocess.js
    Uncaught SyntaxError: Cannot use import statement outside a module

    FROM

      at Object.processSync [as process] (../../../../.yarn/__virtual__/svelte-jester-virtual-b464acbe31/0/cache/svelte-jester-npm-2.1.5-ae6f9b5f04-fb5b6c81ed.zip/node_modules/svelte-jester/dist/transformer.cjs:117:42)

So it can import

import dummy from './dummy';

But it fails to import:

import App from './App.svelte';

Somehow svelte.test.config.js is not even loaded. Is there something wrong in the jest config?

[sebastianrothe]

@mxro This seems to be a new bug. Might be the reverse of #72. If using ESM, it should use 'processAsync'.

Your svelte config would be loaded in the line it is failing.

[mxro]

Yes, trying to run this on Windows. So would this need a fix in the library or is there a workaround?

[sebastianrothe]

You can downgrade to 1.x or go all the way in with ESM. See Jest docs about this.

[mxro]

Thank you for looking into it. I would assume going to 1.x would surface the original problem? Also I think would be best to avoid having to use ESM given it is not yet supported in Yarn 2 https://github.com/yarnpkg/berry/issues/638 .

[sebastianrothe]

SvelteKit switched to ESM. So if you have a config in ESM, you have to switch too.