如何修复此 Jest 错误：“组件遇到声明异常”？

Question

我正在尝试使用 Jest 和 Enzyme 测试 React 组件。目前我的测试非常简单，我只是想确保组件挂载：

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import App from './App';

Enzyme.configure({
  adapter: new EnzymeAdapter()
});

describe('App Component', () => {
  const app = shallow(<App />);

  it('renders successfully', () => {
    expect(app).toMatchSnapshot();
  });
});

运行它会出现以下错误：

App Component › encountered a declaration exception
TypeError: window.TimerSDK is not a constructor

有问题的违规行是这段代码：

this.timerSDK = new window.TimerSDK({ accessToken: token });

TimerSDK 是第三方脚本，通过index.html 中的脚本标签加载。它不像 es6 模块那样导入。

上面的代码在实际使用应用程序时在浏览器中运行良好，但在运行测试时出错。

如何解决这个问题？

Answer 1

Jest 的默认test environment 是jsdom 提供的类似浏览器的环境，它提供了一个模拟的window，它也是global 对象。

您可以在第三方脚本上调用require 以获取其导出，并在测试开始时将其设置为global（或window）（或者在setupFilesAfterEnv 设置模块中执行此操作，如果每次测试都需要它）：

global.TimerSDK = require('path-to-script');  // <= set the module exports on global
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import App from './App';

Enzyme.configure({
  adapter: new EnzymeAdapter()
});

describe('App Component', () => {
  const app = shallow(<App />);

  it('renders successfully', () => {
    expect(app).toMatchSnapshot();
  });
});