npm 包 chalk 不适用于 Cypress

Question

我想使用https://www.npmjs.com/package/chalk作为控制台日志。

现在如果我使用console.log它就可以了

console.log(chalk.blue("Hello World"))

但是当我用 cy.task 运行它时，它不会给出任何错误，但不会显示任何着色

cy.task('log', chalk.blue("Hello World"));它打印 Hello World 但不是蓝色

我究竟做错了什么？

Answer 1

Cypresscy.task()命令是进程间通信（浏览器到 Nodejs），它必须序列化其参数。

我想，从您的测试结果来看，这意味着用于为日志条目着色的 ansi 字符可能会被删除。

解决这个问题的一种方法是chalk在任务内部调用。

import { defineConfig } from 'cypress'
import chalk from 'chalk';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        log({message, attributes}) {
          const fn = attributes.reduce((chalk, attr) => chalk[attr], chalk)
          console.log(fn(message))
          return null;
        },
      });

      return config;
    },
  },
});

由于chalkv5 是纯 ESM，因此我必须将其转换cypress.config.js为本页配置文件中为 typescript 提供的 ESM 格式并添加"type": "module",到 package.json，尽管文档说您也可以使用该mjs扩展。

这是测试

it('logs to terminal using chalk', () => {
  cy.task('log', {message: 'hello chalk', attributes: ['underline', 'bgBlue', 'bold', 'green']})
})

这是输出