无法在 vue 测试工具中导入 javascript 文件

Question

我正在测试一个导入 Javascript 文件的 vue 文件。

//unlockWallet.worker.js

import { Wallet, Configs } from '@/helpers';

function create(password) {
  const createdWallet = {};
  const wallet = new Wallet.generate();
  createdWallet.walletJson = wallet.toV3(password, {
    kdf: Configs.wallet.kdf,
    n: Configs.wallet.n
  });
  createdWallet.name = wallet.getV3Filename();
  return createdWallet;
}

onmessage = function(event) {
  if (event.data.type === 'createWallet') {
    const workerResult = create(event.data.data[0]);
    postMessage(workerResult);
  }
};

和 PasswordModal.vue 我像这样导入 unlockWallet.worker.js 文件。

import Worker from '@/workers/unlockWallet.worker.js'

methods: {
    unlockWallet() {
      const worker = new Worker();
      const self = this;
      worker.postMessage({
        type: 'unlockWallet',
        data: [this.file, this.password]
      });
      worker.onmessage = function(e) {
        // Regenerate the wallet since the worker only return an object instance. Not the whole wallet instance
        self.$store.dispatch(
          'decryptWallet',
          BasicWallet.unlock({
            type: 'manualPrivateKey',
            manualPrivateKey: Buffer.from(e.data._privKey).toString('hex')
          })
        );
      };
    }

在 PasswordModal.spec.js 中

import {shallowMount} from '@vue/test-utils'
import PasswordModal from '@/layouts/PasswordModal.vue';

而我没有通过这个测试。

测试套件无法运行 ReferenceError: onmessage 未定义

Answer 1

您真正想做的是导入一个 Web Worker，而不仅仅是任何 JavaScript 文件，而且这些文件只能在浏览器中工作。

您可以尝试jsdom-worker，它模拟 Node 的工作程序，但我无法使其与 Webpack 一起工作，所以如果您使用 Webpack 及其worker-loader 插件，您可能希望完全模拟工作程序测试。

首先将您的功能从工作文件中分离到unlockWallet.js：

import { Wallet, Configs } from '@/helpers';

function create(password) {
  const createdWallet = {};
  const wallet = new Wallet.generate();
  createdWallet.walletJson = wallet.toV3(password, {
    kdf: Configs.wallet.kdf,
    n: Configs.wallet.n
  });
  createdWallet.name = wallet.getV3Filename();
  return createdWallet;
}

export default function(eventData) {
  if (eventData.type === 'createWallet') {
    const workerResult = create(eventData.data[0]);
    postMessage(workerResult);
  }
};

然后您的工作人员将只导入它。 unlockWallet.worker.js:

import workerFunction from "./unlockWallet.js";

self.onmessage = async function (event) {
  self.postMessage(workerFunction(event.data));
};

这样你就可以模拟工人了。 test/mocks/unlockWallet.worker.js:

import workerFunction from "../../src/unlockWallet.js"; // or wherever you keep it

export default class Worker {
  constructor() {
    // should be overwritten by client code
    this.onmessage = () => { };
  }

  // mock expects data: { } instead of e: { data: { } }
  postMessage(data) {
    // actual worker implementation wraps argument arg into { data: arg },
    // so the mock needs to fake it 
    this.onmessage({ data: workerFunction (data) });
  }
}

请注意，您应该在调用postMessage 之前设置onmessage。对于真正的工作人员来说，这无关紧要，因为它是异步调用的，但我们的模拟是同步的，因此在PasswordModal.vue 中应该是：

 worker.onmessage = function(e) {
   // ...
 };
 worker.postMessage({
    type: 'unlockWallet',
    data: [this.file, this.password]
  });

相关Resolving imports using webpack's worker-loader in Jest tests。