jest + enzyme：TypeError：无法读取未定义

Question

我正在使用jest和enzyme来构建这个测试，但是当我构建它时我遇到了这个错误。

这是测试

import React from 'react';
import { shallow, render } from 'enzyme';

import Title from './../';

describe('Title', () => {
  it('should render correctly', () => {
    const TitleDOM = render(<Title />);
    expect(TitleDOM).toBeDefined();
  });
});

这是错误

版本：
“反应”：“^ 16.0.0”，
“开玩笑”：“^ 21.2.1”，
“酶”：“^ 3.2.0”

如果有人可以帮助我，我感激不尽。

Answer 1

我遇到了与电子原生组件类似的问题，对我有用的解决方案是将这些组件隔离到一个单独的文件中。

您可以将htmlparser2的用法分离到帮助文件中组件外部的函数。

Answer 2

今天我自己打了这个问题，原来cheerio（对enzyme的依赖）在其1.x版本中引入了重大更改，而enzyme似乎没有正确固定版本以避免这种情况。

您可以在此处查看相关的cheerio问题：

• https://github.com/cheeriojs/cheerio/issues/1260
• https://github.com/cheeriojs/cheerio/issues/1261

本质上，默认情况下，它们正在远离htmlparser2，但是有一种方法可以继续使用它。

我在此处打开了一个enzyme问题（其中详细说明了您可以在必要时对酶进行必要的更改）：

• https://github.com/airbnb/enzyme/issues/2299

与此同时，一种解决方法是在您的cheerio中强制使用package.json的版本解析，可以通过添加如下的resolutions条目来完成：

{
  // ..snip: other package.json things..
  "dependencies": {
    "enzyme": "^3.9.0",
    // ..snip: all of your other dependencies..
  },
  "resolutions": {
    "cheerio": ">= 0.22.0 < 1.0.0"
  }
}

这似乎是yarn的特定功能，您可以在以下位置了解更多信息：

• https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

如果您使用npm，则似乎有一个名为npm-force-resolutions的等效软件包（尽管我个人没有使用过）：

• https://www.npmjs.com/package/npm-force-resolutions