React

在我找到答案之前，有几篇文章对React用户来说可以派上用场。第一个链接对我很有效：

1. https://glebbahmutov.com/blog/stub-react-import/
2. https://github.com/cypress-io/cypress/tree/master/npm/react/cypress/component/advanced/mocking-imports
3. https://sinonjs.org/how-to/stub-dependency/
   我已在Webpack中添加了其他规则：

// cypress.config.js

devServer: {
  framework: 'create-react-app',
  bundler: 'webpack',
  webpackConfig: {
    mode: 'development',
    devtool: false,
    module: {
      rules: [
        // application and Cypress files are bundled like React components
        // and instrumented using the babel-plugin-istanbul
        // (we will filter the code coverage for non-application files later)
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
              plugins: [
                // we could optionally insert this plugin
                // only if the code coverage flag is on
                'istanbul',
                [
                  '@babel/plugin-transform-modules-commonjs',
                  { loose: true },
                ],
              ],
            },
          },
        },
      ],
    },
  },
},

在Parent.js中，我模拟了ChildComponent.js如下：

import Parent from './Parent.js';
import * as ChildComponent from './ChildComponent.js';

it('mocks', () => {
  cy.stub(ChildComponent, 'default').returns(<div data-cy="child">MockedComponent</div>');

  cy.mount(Parent);
  cy.contains('[data-cy=child]', 'MockedComponent');
});

it('works without mock', () => {
  cy.mount(Parent);
  cy.contains('[data-cy=child]', 'Child');
});

Vue

如果我们想模拟Vue中的组件，我们不需要在webpack中进行任何更改，而不是模拟默认导入，我们需要模拟render函数，为了抑制被模拟组件中脚本标记的执行，我们可以模拟setup函数。

范例：

import Parent from './Parent.vue';
import ChildComponent from './ChildComponent.vue';

it('should mock', () => {
  cy.stub(ChildComponent, 'setup').value(() => {});
  cy.stub(ChildComponent, 'render').value(() => <div data-cy="child">MockedComponent</div>);

  cy.mount(Parent);
  cy.contains('[data-cy=child]', 'MockedComponent');
});

模拟js模块：

如果您想模拟js模块默认导出，您需要对webpack配置进行与上述React相同的修改。

import * as jsModule from './jsModule.js';

it('should be mocked', () => {
  cy.stub(jsModule, 'default').value({
    someProperty: 'newProperty',
  });
});

模拟函数

要只模拟模块的一个函数，可以使用returns或value;

import jsModule from './jsModule.js';

it('should mock with returns', () => {
  cy.stub(jsModule, 'innerFunction').returns('MockValue');
});

it('should mock with value', () => {
  cy.stub(jsModule, 'innerFunction').value(() => 'MockValue');
});