从 CRA+TS 应用程序的源代码导入时，Cypress 测试无法运行

Question

我的一个 Cypress 测试在尝试从 create-react-app src 目录的源代码中的文件导入时无法运行。

测试看起来像：

// cypress/integration/this-fails.js
import { MY_CONSTANT } from '../../src/constants';

describe('Cypress', () => {
  ...
})

导入的源文件如下所示：

// src/constants.ts
export const MY_CONSTANT = 'foo';

Cypress 测试失败是由源目录中的 Jest 测试文件引起的：

ERROR in /my-app/src/App.test.tsx(5,1)

Cannot find name 'test'. Do you need to install type definitions for a test runner? Try`npm i @types/jest`or`npm i @types/mocha`.

已安装 Jest 类型定义。此外，我试图在 Cypress tsconfig 中排除有问题的 Jest 测试，但无济于事。

// cypress/tsconfig.json
{
  ...
  "exclude": [
    "../src/App.test.tsx"
  ],
  ...
}

这是一个最小的repo that reproduces my problem。

最后，澄清我为什么要从源目录将东西导入 Cypress 测试 - 导入的变量旨在成为 DOM 选择器或返回 DOM 选择器的函数，这样选择器就不会在测试中硬编码。

Answer 1

我不确定为什么消息是 TypeScript 没有为 /my-app/src/constants.ts 发出输出，这似乎表明该文件是可读的，并且 typescript 试图解析它，并且不识别语法。

但我的猜测是测试代码在浏览器进程中运行，无法访问其文件夹之外的文件。

如果constant.ts 在cypress/fixtures 中，它可以工作，所以一种简单的方法是添加一个脚本来复制文件。调用“cypress”脚本时，会自动运行一个名为“precypress”的脚本。

这是 90% 的情况 - 当 constants.ts 更改时，您不会重新加载热模块。

package.json

"scripts": {
  ...
  "precypress": "copyfiles ./src/constants.ts ./cypress/fixtures",
  "cypress": "cypress open"
},

它也适用于函数和处理输入，

测试

import { MY_CONSTANT, getMyConstant } from '../fixtures/src/constants';

describe('Cypress', () => {

  it('is working', () => {
    cy.visit('/')
    alert(MY_CONSTANT);
    alert(getMyConstant());
    expect(true).to.equal(true)
  })
})

constant.ts

export const MY_CONSTANT: Number = 10;

export const getMyConstant: Function = () => 20;