时间戳

首页 > 解决方案 > 开玩笑测试无法使用 create react app 和 craco 导入铯

reactjs - 开玩笑测试无法使用 create react app 和 craco 导入铯

问题描述

我正在使用带有 craco 和 craco-cesium 的 create react 应用程序将 cesium 加载到我的项目中。我正在尝试设置 jest 以开始创建测试，但问题是 Cesium 正在使用 requireJS。

我将以下内容添加到我的package.json

  // package.json

  ...
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts"
    ],

    "globalSetup": "<rootDir>/setupTests.js"
  }
  ...

根据此处打开的票证：https ://github.com/facebook/jest/issues/1914

我setupTests.js使用以下代码设置：

// setupTests.js
module.exports = async () => {
  var cesium = require('cesium');
  process.$Cesium = cesium
};

我对有效渲染进行了第一个基本测试：

// App.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

但是，我<App />使用以下代码在组件内部的一个视图中收到错误：

import Cesium from "cesium";
...
TypeError: Cannot read property 'Ion' of undefined
...
Cesium.Ion.defaultAccessToken = '...';

在调用它的函数时报告 Cesium 为未定义。我尝试使用jest.config.js以下代码从那里获取配置：

// jest.config.js
const { createJestConfig } = require("@craco/craco");

const cracoConfig = require("../craco.config.js");
const jestConfig = createJestConfig(cracoConfig);

module.exports = jestConfig;

但是创建反应应用程序不会获取此文件，因此我无法尝试验证这是否可行。

标签： reactjsjestjscreate-react-appcesiumcraco

解决方案

遇到了同样的问题。

升级react-scripts到版本 4.0.1 和@craco/craco@版本 6.0.0，似乎解决了这些问题，并且 jest 现在可以识别所有来自 cesium 的导入。不需要其他配置文件。

推荐阅读