如何让 cy.stub() 在 React 组件测试中用于导入？

Question

我正在尝试存根 React hook。被测代码的简化视图如下：

// component.tsx
import { useNavigate } from 'react-router-dom';

export default function Component() {
  const navigate = useNavigate();
  // ...
}

测试尝试像这样存根

useNavigate

：

// component.cy.tsx
import * as reactRouterDom from 'react-router-dom';

cy.stub(reactRouterDom, 'useNavigate')
  .as('useNavigateStub')
  .callsFake(() => {
    console.log(`👾 fake useNavigate`); // <-- this never happens
  });
console.log(`👾 stub: ${reactRouterDom.useNavigate}`); // This prints out the original `useNavigate` function, not a stub

cy.mount(<Component/>);

我尝试遵循此处的建议：https://github.com/cypress-io/cypress/tree/master/npm/react/cypress/component/advanced/mocking-imports此处：https:// github.com/sinonjs/sinon/issues/1711 和这里：https://github.com/cypress-io/cypress/issues/17048

但我无法让它工作，大概是因为与我已有的 webpack 配置有关。我已经做了很多尝试调整以使其工作，所以我不确定我是否能记住这一切，但例如我尝试用

ts-loader

规则和建议的配置替换

babel-loader

规则在上面的链接中，它就永远挂起。使用

ts-loader

我找不到任何允许存根工作的配置。

我当前的 cypress 配置如下所示：

{
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      webpackConfig: {
        entry: './src/index.ts',
        output: {
          path: '<repo>/dist/1.35.6',
          publicPath: 'auto'
        },
        mode: 'development',
        resolve: {
          extensions: [ '.ts', '.tsx', '.js', '.jsx' ],
          alias: {
            '~': '<repo>/src',
            test: '<repo>/test'
          }
        },
        module: {
          rules: [
            {
              test: /\.(js|jsx|ts|tsx)$/,
              loader: 'ts-loader',
              exclude: /node_modules/
            },
            { test: /\.svg/, type: 'asset/inline' },
            { test: /\.png/i, loader: 'file-loader' }
          ]
        },
        plugins: [
          Dotenv {
            config: {
              path: './.env',
              prefix: 'process.env.',
              systemvars: true
            }
          },
          ModuleFederationPlugin {
            // very long config object that seems unimportant
          },
          HtmlWebpackPlugin {
            userOptions: { template: './public/index.html' },
            version: 5
          }
        ],
        devtool: 'cheap-module-source-map',
        devServer: { port: '3003', open: false, historyApiFallback: true }
      }
    }
  }
}

大多数情况下，我一直在尝试调整这一点以尝试不同的加载器和选项：

{
  test: /\.(js|jsx|ts|tsx)$/,
  loader: 'ts-loader',
  exclude: /node_modules/
},

我做的事情有根本错误吗？错误消息（当我收到它们时）非常没有帮助，而且大多数时候根本没有反馈，所以我不太确定如何调试它。任何帮助我朝着正确方向前进的帮助都会有所帮助。

Answer 1

你成功了吗？我也面临同样的问题，这两天一直碰壁。