reactjs - 从 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 emitted no output for/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;