Can't use global changes w/ a module (webcrypto-jwt)

[fadi-george]

Describe the bug

jsonwebtoken is not something that can be used with Vite and so I have to use an alternative package like webcrypto-jwt for signing jwts. For testing, I get the error Error: crypto.subtle not found. So w/ Jest, I had to set that property in my setup test file, e.g.

Object.defineProperty(global, 'crypto', {
  value: {
    subtle: {
      importKey: () => Promise.resolve(''),
      sign: () => Promise.resolve(''),
    },
  },
  writable: true,
});

But with vitest, this doesn't work.

Reproduction

I have an example here:
https://stackblitz.com/edit/node-htxtbj?file=test%2FsomeActions.spec.tsx

But for whatever reason, this works in Stackblitz but downloading and running the project locally, it errors.

System Info

System:
    OS: macOS 12.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 89.92 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Brave Browser: 97.1.34.80
    Chrome: 97.0.4692.71
    Safari: 15.2
  npmPackages:
    @vitejs/plugin-react: ^1.1.4 => 1.1.4 
    vite: 2.7.11 => 2.7.11

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sheremet-va]

You need to have it on both global and window, since in Vitest it's different objects. Try:

const crypto = {
  subtle: {
    importKey: () => Promise.resolve(''),
    sign: () => Promise.resolve(''),
  },
}

Object.defineProperty(window, 'crypto', {
  value: crypto,
  writable: true,
});


Object.defineProperty(global, 'crypto', {
  value: crypto,
  writable: true,
});

[fadi-george]

@sheremet-va thanks, that works! Maybe we should have a similar behavior to jest (just a consideration).

[sheremet-va]

@sheremet-va thanks, that works! Maybe we should have a similar behavior to jest (just a consideration).

We cannot run code similar to jest right now because of the poor ESM support (I am talking about vm module). So, right now the best way is to use vi.stubGlobal helper.

[macmillen]

@sheremet-va Somehow when using vi.stubGlobal it only works when I'm adding the mock directly into the source code file and not just the test file.

const cryptoMock = { randomUUID: vi.fn(() => Math.random()) };
vi.stubGlobal("crypto", cryptoMock);

[sheremet-va]

@sheremet-va Somehow when using vi.stubGlobal it only works when I'm adding the mock directly into the source code file and not just the test file.

Maybe you are trying to stub after you import a module that uses it? That way module will already be evaluated with original crypto.

[macmillen]

@sheremet-va Somehow when using vi.stubGlobal it only works when I'm adding the mock directly into the source code file and not just the test file.

Maybe you are trying to stub after you import a module that uses it? That way module will already be evaluated with original crypto.

You are right, thank you! 🙏

But now my imports look like this:

import { vi } from "vitest";
const cryptoMock = { randomUUID: vi.fn(() => Math.random()) };
vi.stubGlobal("crypto", cryptoMock);

import { createBlockStore } from "./block.store";

I guess there is no prettier way of doing this until jsdom supports randomUUID.

[sheremet-va]

But now my imports look like this:

You can use setupFiles in your config to stub crypto, they are called before tests.

[macmillen]

You can use setupFiles in your config to stub crypto, they are called before tests.

Awesome, thank you! 👌