如何模拟缩小的模块？答案

【问题标题】：How do I mock a module that is minified?如何模拟缩小的模块？
【发布时间】：2020-01-19 11:33:34
【问题描述】：

我创建了一个组件用作包。我们正在使用提供给我们的第三方代码、一个配置文件 (initOpinionLab.js) 和一个 .min.js 文件 (opinionlab.min.js)。我正在尝试为我的组件编写单元测试。 index.js 所依赖的模块是位于../vendor/opinionlab.min.js 的压缩文件。

因为这是一个用作节点模块的组件。我在 node_modules 目录 (https://jestjs.io/docs/en/manual-mocks.html) 附近创建了一个 __mocks__ 文件，这样当我的 index.spec.js 文件查找此文件时，它会查找 mocks 文件。如果我不知道它做什么或返回什么，我该如何模拟这个缩小的模块？我刚刚做了这个导出功能。

app/__mocks__ /opinionlab.min.js 的根目录

export const aFunctionFromOpinionLab = jest.fn(() => Promise.resolve({}))

src/index.js

import '../vendor/opinionlab.min'
import '../assets/style.css'
import initOpinionLab from './initOpinionLab'

export default {
  name: 'FeedbackLink',
  props: {
    linkText: {
      type: String,
      default: 'Feedback'
    },
    clientId: {
      type: String,
      default: null
    },
    flow: {
      type: String,
      default: null
    },
    srcCorrelationId: {
      type: String,
      default: null
    }
  },
  mounted () {
    console.log(this.clientId, this.flow, this.srcCorrelationId, 'this is from mounted line 26')
    initOpinionLab({
      clientId: this.clientId,
      flow: this.flow,
      srcCorrelationId: this.srcCorrelationId
    })
  },
  methods: {
    launchOpinionLab () {
      window.OOo.inlineFeedbackShow()
    }
  },
  template: '<a @click="launchOpinionLab" class="opinionlab-link">{{ linkText }}</a>'
}

src/index.spec.js

import FeedbackLink from '@src/index'
import { shallowMount } from '@vue/test-utils'

jest.mock('../vendor/opinionlab.min.js')

describe('FeedbackLink', () => {
  const wrapper = shallowMount(FeedbackLink, {
    propsData: {
      linkText: 'Feedback',
      clientId: 'abc12345',
      flow: 'NEW_USER',
      srcCorrelationId: 'xyz9876'
    }
  })
  it('[positive] should render correct contents', () => {
    expect(wrapper.html()).toMatchSnapshot()
  })
})

【问题讨论】：

我认为您应该了解它的作用或返回的内容

标签： javascript vue.js jestjs vue-test-utils

【解决方案1】：

所以您正在尝试为第 3 方库编写单元测试？这违背了对代码进行单元测试的想法，因为在某些时候您必须假设其他代码已经有自己的单元测试。我了解您在模拟第 3 方代码以便让您的代码运行，但模拟不应该关心代码的工作方式，而只是提供所需的输出，以便您的实际代码可以运行。

我建议将代码存根或只返回一个已知的可测试值，这样您就可以至少对代码进行单元测试，而不必担心 opinionlab.min.js 的内部工作原理，因为该值是通过尝试解析缩小的不值得花时间。

【讨论】：