@testing-library/jest-dom 未加载答案

【问题标题】：@testing-library/jest-dom not loading@testing-library/jest-dom 未加载
【发布时间】：2020-05-17 14:17:21
【问题描述】：

我正在尝试将 React 测试库引入 Create React App 项目，但遇到了一个奇怪的问题。对于我的一项测试，我需要使用 jest-dom，但我似乎无法成功导入它。

我已经yarn add'ed 了，但想不出我错过了哪一步。 expect.extend 失败，因为它的 toHaveStyle 未定义。

这是我的测试文件，已降到最低：

import React from 'react';
import {render, screen} from '@testing-library/react';

import {toHaveStyle} from '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';
//expect.extend({toHaveStyle});

it('is confusing me', () => {
  // (Using `toBe(42) as an ersatz `console.log`)
  expect([Object.keys(require('@testing-library/jest-dom')), Object.keys(require('@testing-library/react')), toHaveClass]).toBe(42);
});

输出是：

  Expected: 42
    Received: [[], ["render", "cleanup", "fireEvent", ...], undefined]

还有，这是 yarn.lock 的相关部分：

"@testing-library/jest-dom@^5.7.0":
  version "5.7.0"
  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.7.0.tgz#b2e2acb4c088a293d52ba2cd1674b526282a2f87"
  integrity sha512-ZV0OtBXmTDEDxrIbqJXiOcXCZ6aIMpmDlmfHj0hGNsSuQ/nX0qPAs9HWmCzXvPfTrhufTiH2nJLvDJu/LgHzwQ==
  dependencies:
    "@babel/runtime" "^7.9.2"
    "@types/testing-library__jest-dom" "^5.0.2"
    chalk "^3.0.0"
    css "^2.2.4"
    css.escape "^1.5.1"
    jest-diff "^25.1.0"
    jest-matcher-utils "^25.1.0"
    lodash "^4.17.15"
    redent "^3.0.0"

"@testing-library/react@^10.0.4":
  version "10.0.4"
  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.0.4.tgz#8e0e299cd91acc626d81ed8489fdc13df864c31d"
  integrity sha512-2e1B5debfuiIGbvUuiSXybskuh7ZTVJDDvG/IxlzLOY9Co/mKFj9hIklAe2nGZYcOUxFaiqWrRZ9vCVGzJfRlQ==
  dependencies:
    "@babel/runtime" "^7.9.6"
    "@testing-library/dom" "^7.2.2"
    "@types/testing-library__react" "^10.0.1"

【问题讨论】：

我认为你应该尝试将 require('@testing-library/jest-dom') 和 Object.keys(require('@testing-library/react') 放在期望语句之前。
谢谢，但不是这样。我把那行注释掉了，因为前面的行不工作，现在用expect ...(42) 结尾显示问题。

标签： reactjs unit-testing react-testing-library jest-dom

【解决方案1】：

嗯，jest-dom 文档已经更新。

import {toHaveStyle} from '@testing-library/jest-dom';

不会再工作了。相反，

import {toHaveStyle} from '@testing-library/jest-dom/matchers'

参考见jest-dom

【讨论】：

【解决方案2】：

这是我如何使用这个伟大的图书馆：

// in test file
import '@testing-library/jest-dom/extend-expect';

[...]

// then matchers are available in tests
expect(rtl.getByText('text').toHaveClass('some-class');

我的导入与你的略有不同，我无法准确地说出你的问题，但我就是这样做的。

祝你好运！

【讨论】：

这对我来说也有同样的问题。我怀疑这两个进口基本上是等价的，而且我之前遇到了问题。你的 yarn.lock 和我的一样吗？你在任何地方有其他管道吗？（我所拥有的只是原始的 Create React App 文件，以及来自 'yarn add --dev @testing-library/react' 和 `yarn add --dev @testing-library/jest- 的 package.json 和 yarn.lock dom'
我的 yarn.lock 和你的差不多，后面几个版本，但不多。您是否尝试使用与我相同的导入？尝试使用 toHaveClass 时会得到什么？
同样的问题：什么都没有被导入，所以两者都是未定义的。明天，我将尝试一个新的玩具清洁项目。
我用yarn create react-app mytoy 创建了一个全新的项目，一切正常。 package.json 以稍微更新的 React 版本（16.13.1，而不是 16.13.0）开始，并更新了许多其他部门。它还具有 @testing-library/react 和 /jest-dom 从一开始就直接在依赖项中（并且，不在开发依赖项中）。我现在应该很好了......只需将较新的部门加入我的项目并检查是否没有任何问题。我真的不明白出了什么问题，但我可以忍受。感谢您的帮助！