unable to import vscode in test using jest #37

matthoang08 · 2019-08-16T16:45:33Z

Hi, I'm trying to run some integration tests for my vscode extension using jest. Unit tests work fine since I'm able to mock vscode however, when I'm trying to run an integration test I'm getting Cannot find module 'vscode' in the files when i'm using vscode api (import * as vscode from 'vscode')

jest config looks like this:

module.exports = {
  moduleFileExtensions: ['js'],
  testMatch: ['<rootDir>/out/test/**/*.int.test.js'],
  verbose: true,
};

runTest.ts

import * as path from 'path';
import { runTests } from 'vscode-test';

async function main() {
	try {
		// The folder containing the Extension Manifest package.json
		// Passed to `--extensionDevelopmentPath`
		const extensionDevelopmentPath = path.resolve(__dirname, '../../');

		// The path to the extension test script
		// Passed to --extensionTestsPath
		const extensionTestsPath = path.resolve(__dirname, './suite/index');

		// Download VS Code, unzip it and run the integration test
		console.log(`running tests... ext path: ${extensionTestsPath}`);
		await runTests({
			extensionDevelopmentPath,
			extensionTestsPath,
			launchArgs: ['--disable-extensions']
		});
	} catch (err) {
		console.error('Failed to run tests', err);
		process.exit(1);
	}
}

main();

index.ts

import * as path from 'path';
import { runCLI } from 'jest-cli';
import * as vscode from 'vscode';

export function run(): Promise<void> {

  return new Promise((resolve, reject) => {
    const projectRootPath = path.join(__dirname, '../../../');
    const config = path.join(projectRootPath, 'jest.e2e.config.js');

    vscode.window.showInformationMessage('Run suite');

    runCLI({ config } as any, [projectRootPath])
      .then(jestCliCallResult => {
        console.log(`complete: ${JSON.stringify(jestCliCallResult)}`);
        console.log('print results');
        jestCliCallResult.results.testResults
          .forEach(testResult => {
            testResult.testResults
              .filter(assertionResult => assertionResult.status === 'passed')
              .forEach(({ ancestorTitles, title, status }) => {
                console.info(`  ● ${ancestorTitles} › ${title} (${status})`);
              });
          });

        console.log('check results');
        jestCliCallResult.results.testResults
          .forEach(testResult => {
            if (testResult.failureMessage) {
              console.error(testResult.failureMessage);
            }
          });
        resolve();
      })
      .catch(errorCaughtByJestRunner => {
        console.error('error in test runner', errorCaughtByJestRunner);
        reject(errorCaughtByJestRunner);
      });
  });
}

I installed both vscode-test and @types/vscode as dev dependencies. I'm not sure why my tests are unable to find the 'vscode' dependency. Vscode is the only dependency that has this issue, other modules work fine. Can anyone help?

Thanks!

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

octref · 2019-08-18T16:01:35Z

Hi @matthoang08, thanks for giving jest a try. vscode is provided in the extension host environment where VS Code runs extensions.

Would https://jestjs.io/docs/en/configuration#globals-object or https://jestjs.io/docs/en/configuration#globalsetup-string help you? jestjs/jest#708 also seems to mention handling global jquery.

I can give it a try later in Monday as well. If this works I can put together an official recipe.

PeterPorzuczek · 2019-09-20T20:40:13Z

I was able to reference vscode instance in my tests only through process variable, maybe I was doing something wrong with the globals setup but vscode package couldn't be required there as @octref proposed.

So to make it work with process variable in typescript you have to define your typing anywhere in your project as a separate file ex. process.d.ts
Preview:

declare namespace NodeJS {
	export interface Process {
		vscode?: any
	}
}

Then in suite/index.ts import vscode and set process.vscode, before run function definition
Preview:

import * as path from 'path';
import { runCLI } from 'jest-cli';
import * as vscode from 'vscode';

process.vscode = vscode;

export function run(): Promise<void> {
  return new Promise((resolve, reject) => {
       ...

And finally in your test file you can reference process.vscode
Preview:

describe('Extension Test Suite', () => {
	beforeEach(() => {
		process.vscode.window.showInformationMessage('Start all tests.');
	});

	it('Sample test', () => {
		process.vscode.commands.executeCommand('extension.helloWorld');
		expect(1).toBe(1);
	});
});

It is very hacky way of accessing vscode instance, so try to find a better solution. I just post my findings FYI.

marcopierobon · 2019-10-27T17:40:39Z

Are you sure this actually works? I've tried implementing that, but it still fails with the same error when the tests try to load the file that is still loading vscode (in your example that would be the one containing function run())

spnq · 2019-12-13T17:00:29Z

Any progress on this?
I tried to run my .spec.ts files with ts-jest and babel-jest, because I thought es6 import has to be transpiled before the test run and that caused the error, but vscode import itself seems to be the issue.

rmi22186 · 2019-12-18T03:36:24Z

having this issue also. Cannot find module 'vscode' even though all other modules are found okay...

rmi22186 · 2019-12-18T19:58:15Z

seems like it can't be imported for tests, but it can be by the vs code extension when you do an e2e test. does that sound right?

mnovakovic · 2020-01-24T20:35:42Z

Any updates on this? I am having the same problem in my setup.

vinnichase · 2020-02-11T17:12:27Z

I found a very slim workaround!

I was also struggling like hell with that. I found that article which got me on the right track: https://www.richardkotze.com/coding/unit-test-mock-vs-code-extension-api-jest

However to make it run in the default TypeScript extension workflow you need to put the __mocks__ folder (yes plural, not singular as stated in the article) under your rootDir as defined in the tsconfig.json. In the default extension boilerplate it's ./src.

Within the __mocks__ folder you create a vscode.ts (not .js as described in the article) with the following content.

export const vscode = {
  // mock the vscode API which you use in your project. Jest will tell you which keys are missing.
};

In my case an empty vscode object was enough since I only use types and interfaces from the vscode namespace. I would recommend the same for all of you for the major parts of the extension logic. Interacting with the vscode API can be limited to the extension.ts which is not unit tested but covered by e.g. end-to-end-tests.

arogg · 2020-06-22T06:36:47Z

@vinnichase You have a flaw there. The way vscode extensions are meant to be tested is IN vscode precisely so that you test vscode fully integrated. This is also the way microsoft introduces you to extension testing... Otherwise any vscode update may blow up your extension because you forgot to update your mocks..

You also won't be able to properly test by passing via the process module, because jest runs everything via the node "vm" module ( https://nodejs.org/api/vm.html ) which prevents you from selectively modifying the vscode object if the vscode object is not part of the vms global object (the vm context). That is you will be able to modify it IN the test but your modifications to the vscode module will NOT propagate outwards to your extension code, because of the vm. It does not matter that the process PID is the same. The key point is the "vm" module that jest uses.

The correct way to use jest inside a vscode host is you do


class VsCodeEnvironment extends NodeEnvironment {
  async setup() {
      
    await super.setup();
     this.global.vscode = vscode; // puts vscode into global scope of the vm, but more importantly makes vscode object native to the vm, (allowing you to mock parts of it)
  }

  async teardown() {
      
       delete this.global.vscode;
       await super.teardown();
  }


}

module.exports = VsCodeEnvironment;

and then


await runCLI({

                        testEnvironment:path.join(__dirname,'testenv.js'),
			
		},[jestProject]);

You still wont be able to IMPORT vscode like normal in your tests, which is annoying with those import quickfixes, but vscode is available as a global now and now you can mock those pesky extensions error messages etc. and changes will propagate outwards

vinnichase · 2020-06-22T08:38:02Z

Thanks for the hint! However this breaks my understanding of unit tests which I was doing in my case. Your approach would apply better in an integration test.

I didn't even mock vscode functionality but only imported a class and used it as an interface and an enum.

There used to be a special vscode typings package on npm for that purpose but maintenance stopped and it deviated from the ones exposed in the vscode extension context. So thats ridiculous that you can not use the interace description (which is by definition the abstraction of the running code) separately from the runtime context.

MarioCadenas · 2020-09-28T17:13:56Z

So I actually manage to inject vscode into jest, and it's not that ugly. This works for me, hope it works for someone else too!

First of all, create your own vscode environment file

// vscode-environment.js
const NodeEnvironment = require('jest-environment-node');
const vscode = require('vscode');

class VsCodeEnvironment extends NodeEnvironment {
  async setup() {
    await super.setup();
    this.global.vscode = vscode;
  }

  async teardown() {
    this.global.vscode = {};
    await super.teardown();
  }

  runScript(script) {
    return super.runScript(script);
  }
}

module.exports = VsCodeEnvironment;

next, make jest use this environment, I did it by adding it into my jest config

// jest config

module.exports = {
  // more config
  testEnvironment: './vscode-environment.js',
  // more config
};

now we are just missing the tricky and most important part. Create a file, call it whatever you want, I called it vscode.js and copy this line

// vscode.js
module.exports = global.vscode;

Final step, go to your jest config, and define a module mapper like this

const path = require('path');

module.exports = {
  testEnvironment: './vscode-environment.js',
  modulePaths: ['<rootDir>'],
  moduleNameMapper: {
    vscode: path.join(__dirname, 'test-jest', 'vscode.js')  // <----- most important line
  },
};

my vscode file is in test-jest/vscode.js place yours wherever you need!

By doing this, any line that is importing vscode will really import it into jest, so you are able to run methods, mock them or do whatever you want because you have the real vscode object!

I hope this helps someone!!

[EDITED]

Forgot to mention you also need to define a custom Vscode jest runner if someone needs this too I'll add it to this comment!

mark-wiemer · 2021-02-12T08:36:56Z

@MarioCadenas I would appreciate some guidance on how to define a custom VS Code Jest runner!

MarioCadenas · 2021-02-13T18:46:01Z

@MarioCadenas I would appreciate some guidance on how to define a custom VS Code Jest runner!

Hi @mark-wiemer ! of course! What can I help you with? I'll do my best 😄

mark-wiemer · 2021-02-14T05:13:37Z

Thanks @MarioCadenas, but just a few hours after posting that I started to consider other options (e.g. just using Mocha instead). I have little experience in this area, so I think I'll do some reading of my own before coming back with more specific questions. If I never reply, it's because I went with an alternative :) Thanks anyway!

njzydark · 2021-08-31T08:00:31Z

So I actually manage to inject vscode into jest, and it's not that ugly. This works for me, hope it works for someone else too!

First of all, create your own vscode environment file

// vscode-environment.js
const NodeEnvironment = require('jest-environment-node');
const vscode = require('vscode');

class VsCodeEnvironment extends NodeEnvironment {
  async setup() {
    await super.setup();
    this.global.vscode = vscode;
  }

  async teardown() {
    this.global.vscode = {};
    await super.teardown();
  }

  runScript(script) {
    return super.runScript(script);
  }
}

module.exports = VsCodeEnvironment;

I try this, but the console throw a error: Cannot find module 'vscode'

MarioCadenas · 2021-09-01T07:51:27Z

So I actually manage to inject vscode into jest, and it's not that ugly. This works for me, hope it works for someone else too!
First of all, create your own vscode environment file

// vscode-environment.js
const NodeEnvironment = require('jest-environment-node');
const vscode = require('vscode');

class VsCodeEnvironment extends NodeEnvironment {
  async setup() {
    await super.setup();
    this.global.vscode = vscode;
  }

  async teardown() {
    this.global.vscode = {};
    await super.teardown();
  }

  runScript(script) {
    return super.runScript(script);
  }
}

module.exports = VsCodeEnvironment;

I try this, but the console throw a error: Cannot find module 'vscode'

Do you have a repo to check this? Maybe I can try to help 😄

CharlieGreenman · 2021-11-28T10:07:07Z

custom Vscode jest ru

@MarioCadenas would it be possible to add the custom vscode jest runner here. Your solution unfortunately is unusable verbatim without it. Thank you.

daddykotex · 2022-08-16T18:36:15Z

FYI: I've pulled things from here and there around the web and ended up: https://github.com/daddykotex/jest-tests

it seems to work fine and uses jest as a test runner instead of mocha

DiegoWong · 2022-11-17T18:02:21Z

So I actually manage to inject vscode into jest, and it's not that ugly. This works for me, hope it works for someone else too!
First of all, create your own vscode environment file
// vscode-environment.js
const NodeEnvironment = require('jest-environment-node');
const vscode = require('vscode');

class VsCodeEnvironment extends NodeEnvironment {
  async setup() {
    await super.setup();
    this.global.vscode = vscode;
  }

  async teardown() {
    this.global.vscode = {};
    await super.teardown();
  }

  runScript(script) {
    return super.runScript(script);
  }
}

module.exports = VsCodeEnvironment;
I try this, but the console throw a error: Cannot find module 'vscode'
Do you have a repo to check this? Maybe I can try to help 😄

Hi, I know its an old thread, but I'm dealing with the same error, the test environment can't find the vscode dependency, did you find what was happening?

MarioCadenas · 2022-11-18T09:11:57Z

So I actually manage to inject vscode into jest, and it's not that ugly. This works for me, hope it works for someone else too!
First of all, create your own vscode environment file
// vscode-environment.js
const NodeEnvironment = require('jest-environment-node');
const vscode = require('vscode');

class VsCodeEnvironment extends NodeEnvironment {
  async setup() {
    await super.setup();
    this.global.vscode = vscode;
  }

  async teardown() {
    this.global.vscode = {};
    await super.teardown();
  }

  runScript(script) {
    return super.runScript(script);
  }
}

module.exports = VsCodeEnvironment;
I try this, but the console throw a error: Cannot find module 'vscode'
Do you have a repo to check this? Maybe I can try to help 😄
Hi, I know its an old thread, but I'm dealing with the same error, the test environment can't find the vscode dependency, did you find what was happening?

HI @DiegoWong I can try to help if you provide a repository

DiegoWong · 2022-11-18T14:23:35Z

Hi @MarioCadenas, Here's the repo. Basically is the same repo as @daddykotex but adding webpack as the build tool.

Thanks in advance for your help!

CharlieGreenman · 2023-01-18T19:22:57Z

Adding a mocks folder for vscode per blog article here is a clean/efficient solution: https://www.richardkotze.com/coding/unit-test-mock-vs-code-extension-api-jest

https://github.com/rkotze/git-mob-vs-code/blob/baf86ae15bf359bf409a6a3bdc7ac74850640433/__mocks__/vscode.js

JustinGrote · 2023-04-21T16:09:53Z

Adding a mocks folder for vscode per blog article here is a clean/efficient solution: https://www.richardkotze.com/coding/unit-test-mock-vs-code-extension-api-jest

https://github.com/rkotze/git-mob-vs-code/tree/baf86ae15bf359bf409a6a3bdc7ac74850640433/__mocks__

The problem here is you are using stubs/mocks, so you can't do actual integration/E2E/UI tests and verify things work in vscode instance itself, or verify the API hasn't changed. That's the real benefit of using vscode-test here vs. just mocking/stubbing out all the external calls.

JustinGrote · 2023-04-22T04:49:21Z

To summarize the workaround for this issue:

Don't use jest 28 or greater, there's appears bug with in-process vscode testing: [Bug]: Jest 28.0.0 breaks vscode Jest testing with "Cannot find module '_isMockFunction' jestjs/jest#14095, use Jest 27
Create a custom jest vscode environment that loads in the vscode global from a separate file. You should have testEnvironment and ModuleNameMapper configured in your jest config. This looks really funky, but it's basically a way to inject the vscode global into the isolated environment so that the actual E2E/UI tests work as expected. https://github.com/daddykotex/jest-tests is a good example.

Alternatively, mock all your calls to vscode and just do unit testing, but you'll never be able to verify things actually work or that an API hasn't changed.

Blond11516 · 2023-05-21T15:15:19Z

I managed to get tests working with the latest version of Jest (29.5.0 as of writing).

The gist is to use NodeEnvironment.TestEnvironment as the parent class of the vscode custom environment.

As a bonus this update also lets you use VSCode up to 1.73 to run tests. Later versions fail to run tests, I haven't really investigated why.

See this commit for the full diff.

@daddykotex Let me know if you'd like me to open a PR on your repo with the updated setup.

daddykotex · 2023-05-23T00:57:38Z

Sure @Blond11516 , I'll merge it no problem

since it is hard to deal with `import vscode`. See microsoft/vscode-test#37 Signed-off-by: Qingpeng Li <[email protected]>

Jason3S · 2023-12-03T13:36:28Z

To address this issue, I created jest-mock-vscode. It can help with testing logic using unit tests. It is not designed for E2E/UI testing. The vscode-test runner is best for that.

octref added the feature-request Request for new features or functionality label Aug 18, 2019

Harukero mentioned this issue Sep 6, 2019

build: enable sonarcloud checks yseop/vscode-yseopml#109

Merged

etbrow mentioned this issue Nov 30, 2019

Feature #9 Implementation: Specify Slides Subfolder nicoespeon/vscode-slides#10

Merged

octref mentioned this issue Feb 3, 2020

Jest test runner microsoft/vscode-docs#3363

Closed

octref added this to the February 2020 milestone Feb 3, 2020

octref modified the milestones: February 2020, April 2020 Apr 10, 2020

kieferrm removed this from the April 2020 milestone Jun 20, 2020

jsjoeio mentioned this issue Aug 2, 2020

feat(foam-vscode): add jest for testing foambubble/foam#204

Merged

nicoespeon mentioned this issue Dec 12, 2020

Cover all Editor implementations with tests nicoespeon/abracadabra#156

Closed

bpringe mentioned this issue Mar 5, 2023

No hot reloading or connection to JS runtime with :npm-module build target thheller/shadow-cljs#1094

Closed

Blond11516 mentioned this issue May 19, 2023

Add tests lexical-lsp/vscode-lexical#17

Closed

qingpeng9802 added a commit to qingpeng9802/vscode-common-lisp that referenced this issue Sep 29, 2023

revert test infra

447b650

since it is hard to deal with `import vscode`. See microsoft/vscode-test#37 Signed-off-by: Qingpeng Li <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

unable to import vscode in test using jest #37

unable to import vscode in test using jest #37

matthoang08 commented Aug 16, 2019

octref commented Aug 18, 2019

PeterPorzuczek commented Sep 20, 2019 •

edited

Loading

marcopierobon commented Oct 27, 2019

spnq commented Dec 13, 2019 •

edited

Loading

rmi22186 commented Dec 18, 2019

rmi22186 commented Dec 18, 2019

mnovakovic commented Jan 24, 2020

vinnichase commented Feb 11, 2020

arogg commented Jun 22, 2020 •

edited

Loading

vinnichase commented Jun 22, 2020 •

edited

Loading

MarioCadenas commented Sep 28, 2020 •

edited

Loading

mark-wiemer commented Feb 12, 2021

MarioCadenas commented Feb 13, 2021

mark-wiemer commented Feb 14, 2021

njzydark commented Aug 31, 2021

MarioCadenas commented Sep 1, 2021

CharlieGreenman commented Nov 28, 2021

daddykotex commented Aug 16, 2022

DiegoWong commented Nov 17, 2022

MarioCadenas commented Nov 18, 2022

DiegoWong commented Nov 18, 2022 •

edited

Loading

CharlieGreenman commented Jan 18, 2023 •

edited

Loading

JustinGrote commented Apr 21, 2023 •

edited

Loading

JustinGrote commented Apr 22, 2023 •

edited

Loading

Blond11516 commented May 21, 2023

daddykotex commented May 23, 2023

Jason3S commented Dec 3, 2023

unable to import vscode in test using jest #37

unable to import vscode in test using jest #37

Comments

matthoang08 commented Aug 16, 2019

octref commented Aug 18, 2019

PeterPorzuczek commented Sep 20, 2019 • edited Loading

marcopierobon commented Oct 27, 2019

spnq commented Dec 13, 2019 • edited Loading

rmi22186 commented Dec 18, 2019

rmi22186 commented Dec 18, 2019

mnovakovic commented Jan 24, 2020

vinnichase commented Feb 11, 2020

arogg commented Jun 22, 2020 • edited Loading

vinnichase commented Jun 22, 2020 • edited Loading

MarioCadenas commented Sep 28, 2020 • edited Loading

mark-wiemer commented Feb 12, 2021

MarioCadenas commented Feb 13, 2021

mark-wiemer commented Feb 14, 2021

njzydark commented Aug 31, 2021

MarioCadenas commented Sep 1, 2021

CharlieGreenman commented Nov 28, 2021

daddykotex commented Aug 16, 2022

DiegoWong commented Nov 17, 2022

MarioCadenas commented Nov 18, 2022

DiegoWong commented Nov 18, 2022 • edited Loading

CharlieGreenman commented Jan 18, 2023 • edited Loading

JustinGrote commented Apr 21, 2023 • edited Loading

JustinGrote commented Apr 22, 2023 • edited Loading

Blond11516 commented May 21, 2023

daddykotex commented May 23, 2023

Jason3S commented Dec 3, 2023

PeterPorzuczek commented Sep 20, 2019 •

edited

Loading

spnq commented Dec 13, 2019 •

edited

Loading

arogg commented Jun 22, 2020 •

edited

Loading

vinnichase commented Jun 22, 2020 •

edited

Loading

MarioCadenas commented Sep 28, 2020 •

edited

Loading

DiegoWong commented Nov 18, 2022 •

edited

Loading

CharlieGreenman commented Jan 18, 2023 •

edited

Loading

JustinGrote commented Apr 21, 2023 •

edited

Loading

JustinGrote commented Apr 22, 2023 •

edited

Loading