cypress 学习：项目里的 e2e 测试

利用 cypress 来完成项目的测试
更新于: 2022-09-12 01:08:21

总结

这个测试工具真的很好，总结：丝滑。

安装

start-server-and-test 这个目前测试下来，不生效，所以，直接用这个：“yarn add cypress --dev”

vite 的原因: start-server-and-test

解决方案: "test:dev": "start-server-and-test start http-get://localhost:3000 cypress:open" 也不行

# npm
npm i -D cypress
# yarn
yarn add cypress --dev

添加2个命令

  • 先启动 npm run start
  • 再启动 cypress:open
  • 如果是在 ci 里，则用 cypress:run
"scripts": {
  "start": "vite",
  "cypress:open": "cypress open",
  "cypress:run": "cypress run",
}

react-cra 环境的写法如下

"scripts": {
  "start": "vite",
  "cypress:open": "cypress open",
  "cypress:run": "cypress run",
  "test:dev": "start-server-and-test start http://s1.dev.com:5001 cypress:open"
}

问题 cypress TS2304: Cannot find name 'cy'.

解决办法：将 cypress 添加到 exclude 中去

参考: https://github.com/vuejs/vue-cli/issues/4239

cypress 的报错配置 tsconfig.json

 

Jest 与 cypress 在配置上的冲突

  • 方案1：将 cypress 写独立的配置文件
  • 方案2：将 expect 引入到对应的 spec 测试文件中
jest 的 expect 与 cypress 存在冲突的情况

独立的 cypress/tsconfig.json

.
├── e2e
├── fixtures
├── support
├── tsconfig.json
└── videos
{
  "extends": "../tsconfig.json",
  "include": [
    "."
  ],
  "exclude": []
}

将 jest 直接 import 到 spec 文件中

import { expect } from '@jest/globals';
import { deepAssignSetting } from '../src/components/utility';
import { Setting } from '../src/components/types';

describe('deepAssignSetting', () => {
  it('01/only merge new settings', () => {
    const globalSetting: Setting = {
      schema: {
        username: ['Username', 'input', { placeholder: 'Please input your username' }],
        password: ['Password', 'password', { placeholder: 'Please input your password' }]
      }
    };
// ....

参考