如何在Angular项目的Cypress测试中使用crypto-js且不添加至主项目依赖？

下面提供几种无需将crypto-js添加到项目根package.json的解决方案，仅供Cypress测试环境使用：

方法1：通过CDN动态导入（无需本地安装） #

直接在Cypress的测试文件或全局支持文件中，通过动态import加载CDN上的crypto-js资源，并挂载到全局对象供测试使用：

// 在cypress/support/index.js中全局配置，所有测试都能使用
import('https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js')
  .then(module => {
    // 将CryptoJS挂载到全局，测试中可直接调用
    globalThis.CryptoJS = module.default;
  });

在测试文件中使用示例：

it('验证加密逻辑', () => {
  const plainText = 'test-content';
  const encrypted = CryptoJS.AES.encrypt(plainText, 'secret-key').toString();
  // 执行断言或其他测试操作
  expect(encrypted).not.to.be.empty;
});

方法2：手动引入本地CryptoJS文件（离线可用） #

如果需要离线使用，可手动下载编译好的CryptoJS文件到Cypress目录：

1. 从CryptoJS官方仓库下载编译后的crypto-js.min.js文件
2. 将文件放入Cypress的fixtures目录（如cypress/fixtures/crypto-js.min.js）
3. 在测试前置钩子或全局支持文件中加载该脚本：

// 在测试文件的前置钩子中加载
before(() => {
  cy.readFile('cypress/fixtures/crypto-js.min.js', 'utf8').then(scriptContent => {
    eval(scriptContent);
    // 挂载到全局对象
    globalThis.CryptoJS = window.CryptoJS;
  });
});

it('使用本地CryptoJS进行哈希计算', () => {
  const md5Hash = CryptoJS.MD5('test').toString();
  expect(md5Hash).to.eq('098f6bcd4621d373cade4e832627b4f6');
});

方法3：通过Cypress注入外部脚本到测试窗口 #

利用Cypress的cy.window()API，在测试窗口中动态创建script标签加载CryptoJS：

beforeAll(() => {
  cy.window().then(win => {
    return new Promise(resolve => {
      const script = win.document.createElement('script');
      script.src = 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js';
      script.onload = resolve;
      win.document.head.appendChild(script);
    });
  });
});

it('测试AES解密功能', () => {
  cy.window().then(win => {
    const encryptedData = 'U2FsdGVkX1+...'; // 待解密内容
    const decrypted = win.CryptoJS.AES.decrypt(encryptedData, 'secret-key').toString(win.CryptoJS.enc.Utf8);
    expect(decrypted).to.eq('original-content');
  });
});

注意事项 #

• 若使用全局挂载方式，需确保脚本在测试执行前完成加载，建议使用before或beforeAll钩子处理
• 本地文件方式需注意文件路径是否正确，可通过Cypress.config('fixturesFolder')获取固定路径

内容的提问来源于stack exchange，提问作者Journeyman