[英]@testing-library/jest-dom not loading
I'm trying to introduce React Testing Library into Create React App project, and I'm hitting a strange problem.我正在尝试将 React Testing Library 引入到 Create React App 项目中,但我遇到了一个奇怪的问题。 For one of my tests, I need to use jest-dom, but I can't seem to import it successfully.
对于我的一个测试,我需要使用 jest-dom,但我似乎无法成功导入它。
I've yarn add
'ed it, and can't think of what step I missed.我已经
yarn add
了,但想不出我错过了哪一步。 expect.extend
fails because its toHaveStyle
is undefined. expect.extend
失败,因为它的toHaveStyle
未定义。
Here's my test file, reduced down to the minimum:这是我的测试文件,已减少到最低限度:
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);
});
The output is: output 是:
Expected: 42
Received: [[], ["render", "cleanup", "fireEvent", ...], undefined]
And, here's the relevant part of yarn.lock:而且,这里是 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"
Here is how I use this great library:以下是我如何使用这个很棒的库:
// in test file
import '@testing-library/jest-dom/extend-expect';
[...]
// then matchers are available in tests
expect(rtl.getByText('text').toHaveClass('some-class');
My import is slightly different than yours, I could not say precisely what goes wrong with yours but this is how I do.我的导入与您的略有不同,我无法准确地说出您的问题出在哪里,但这就是我的做法。
Good luck !祝你好运 !
module not found can't resolve node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in react 17找不到模块无法在 React 17 中解析 node_modules\react-scripts\node_modules\babel-loader\lib\index.js'
Okay so if there is anyone looking at this in 2022+ year, After downgrading from react-v18 to react-v17 I faced this issue.好吧,如果有人在 2022+ 年看到这个,从 react-v18 降级到 react-v17 后,我遇到了这个问题。 I had to run certain commands.
我必须运行某些命令。
npm install web-vitals@1.0.1 npm 安装 web-vitals@1.0.1
npm install babel-loader --save-dev npm 安装 babel-loader --save-dev
npm install -D babel-loader @babel/core @babel/preset-env webpack npm 安装-D babel-loader @babel/core @babel/preset-env webpack
I also moved my @testing-library/jest-dom,@testing-library/react,@testing-library/user-event to devDependencies and downgraded them我还将我的@testing-library/jest-dom、@testing-library/react、@testing-library/user-event 移到了 devDependencies 并降级了它们
Worked like a charm.工作起来很有魅力。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.