2

我是Cypress 组件测试的新手，但我能够为我的 Vue 项目轻松设置它。我目前正在研究是否应该用 Cypress 替换 Jest 来测试我们的 Vue 组件，到目前为止我很喜欢它，我仍然缺少一个主要功能：模拟模块。我第一次尝试使用cy.stub()，但它根本不起作用，因为我不是在尝试模拟 Node.js 中的实际模块，而是在 Webpack 中导入的模块。

为了解决这个问题，我尝试使用能够模拟 Webpack 模块的 rewiremock，但是在运行测试时出现错误：

在此处输入图像描述

我从赛普拉斯派生了示例，并在此提交中设置了 Rewiremock 。老实说，不确定我做错了什么。

我真的需要找到一种方法来解决它，否则我们会停止考虑 Cypress 并坚持 Jest。如果使用 Rewiremock 不是方式，我想如何实现这一点？任何帮助将不胜感激。

4

2 回答 2

2

如果您能够调整 Vue 组件以使其更具可测试性，则可以将该函数模拟为组件属性。

网页包

当 vue-loader 处理HelloWorld.vue时，它会评估getColorOfFruits()并设置 data 属性，因此要在此处模拟函数，您需要像 rewiremock 这样的 webpack 重写器。

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      colorOfFruits: getColorOfFruits(),   // during compile time
    };
  },
  ...

Vue 创建的钩子

如果你colorOfFruits在钩子中初始化，你可以在导入之后但在挂载之前created()存根函数。getColorOfFruits

你好世界.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ colorOfFruits.apple }}</h2>
    <p>
    ...
</template>

<script lang="ts">
import { getColorOfFruits } from "@/helpers/fruit.js";  

export default {
  name: "HelloWorld",
  getColorOfFruits,          // add this function to the component for mocking
  props: {
    msg: String,
  },
  data() {
    return {
      colorOfFruits: {}      // initialized empty here
    };
  },
  created() {
    this.colorOfFruits = this.$options.colorOfFruits;  // reference function saved above
  }
});
</script>

HelloWorld.spec.js

import { mount } from "@cypress/vue";
import HelloWorld from "./HelloWorld.vue";

it("mocks an apple", () => {

  const getMockFruits = () => {
    return {
      apple: "green",
      orange: "purple",
    }
  }

  HelloWorld.getColorOfFruits = getMockFruits;

  mount(HelloWorld, {                      // created() hook called as part of mount()
    propsData: {
      msg: "Hello Cypress!",
    },
  });

  cy.get("h1").contains("Hello Cypress!");

  cy.get("h2").contains('green')

});
于 2021-05-29T05:30:39.230 回答
0

我们通过在赛普拉斯 webpack 配置中使用 webpack 别名来拦截 node_module 依赖项来解决这个问题。

所以像...

// cypress/plugins/index.js

const path = require("path");
const { startDevServer } = require('@cypress/webpack-dev-server');

// your project's base webpack config
const webpackConfig = require('@vue/cli-service/webpack.config');

module.exports = (on, config) => {
  on("dev-server:start", (options) => {
    webpackConfig.resolve.alias["your-module"] = path.resolve(__dirname, "path/to/your-module-mock.js");

    return startDevServer({
      options,
      webpackConfig,
    })
  });
}

// path/to/your-module-mock.js

let yourMock;

export function setupMockModule(...) {
  yourMock = {
    ...
  };
}

export default yourMock;

// your-test.spec.js

import { setupMock } from ".../your-module-mock.js"

describe("...", () => {
  before(() => {
    setupMock(...);
  });

  it("...", () => {
    ...
  });
});
于 2021-09-09T22:22:29.813 回答