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();
  });
});

如何解决这个Jest错误：“组件遇到声明异常”？

1 个答案: