尝试为组件库设置测试。我已经尝试了很多示例和所有类似的线程,但没有运气。
我的 setupTests.ts 文件已正确加载(通过 console.log 进行验证),并且该库似乎可用,就像我添加
import { toBeInTheDocument } from '@testing-library/jest-dom/matchers'
并记录 toBeInTheDocument
它存在一样。
我也尝试过
expect.extend({ toBeInTheDocument })
选项,不幸的是仍然出现同样的错误。
以下是我的文件,我缺少什么?谢谢
// package.json
"devDependencies": {
"@testing-library/jest-dom": "^5.11.0",
"@testing-library/react": "^10.4.3",
"@types/testing-library__jest-dom": "^5.9.1",
"@types/testing-library__react": "^10.2.0",
"@types/jest": "24.0.15",
"jest": "^26.1.0",
"ts-jest": "^26.1.1",
}
// jest.config.js
module.exports = {
preset: 'ts-jest',
// The root of your source code, typically /src
// `<rootDir>` is a token Jest substitutes
roots: ['<rootDir>/src'],
// Jest transformations -- this adds support for TypeScript
// using ts-jest
transform: {
'^.+\\.tsx?$': 'ts-jest'
},
testEnvironment: 'jsdom',
// Runs special logic, such as cleaning up components
// when using React Testing Library and adds special
// extended assertions to Jest
setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
// // A map from regular expressions to module names that allow to stub out resources with a single module
moduleNameMapper: {
'@core': '<rootDir>/src/core',
'@hooks': '<rootDir>/src/hooks',
'@components': '<rootDir>/src/components'
},
// Test spec file resolution pattern
// Matches parent folder `__tests__` and filename
// should contain `test` or `spec`.
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
// Module file extensions for importing
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
}
// tsconfig
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"lib": ["esnext", "dom", "dom.iterable"],
"jsx": "react",
"types": ["react", "jest"],
"outDir": "./dist",
"baseUrl": "src",
"paths": {
"@core": ["core"],
"@core/*": ["core/*"],
"@components": ["components"],
"@components/*": ["components/*"],
"@hooks": ["hooks"],
"@hooks/*": ["hooks/*"]
},
"sourceMap": true,
"declaration": true,
"noImplicitAny": true,
"strict": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true
},
"include": ["src", "setupTests.ts"],
"exclude": ["dist", "node_modules"]
}
// myproject/setupTests.ts
import '@testing-library/jest-dom/extend-expect'
// src/components/container/__tests__/container.spec.tsx
import * as React from 'react'
import { render } from '@testing-library/react'
import { Container } from '../Container'
describe('<Container />', () => {
test('renders', async () => {
expect(true).toBe(true)
const { getByText } = render(<Container>mad</Container>)
// NOTE: not even my TS is happy
// Property 'toBeInTheDocument' does not exist on type 'Matchers<HTMLElement>'
expect(getByText('mad')).toBeIntheDocument()
})
})
错误:
FAIL src/components/Container/__tests__/container.spec.tsx
<Container />
✕ renders (28 ms)
● <Container /> › renders
TypeError: expect(...).toBeIntheDocument is not a function
编辑:弗拉德的评论是正确的,我这边有一个愚蠢的打字错误。虽然现在测试运行没有任何错误,但 VSCode 仍然抱怨它。
Property 'toBeInTheDocument' does not exist on type 'Matchers<HTMLElement>'
我发现将“testing-library__jest-dom”添加到 tsconfig“types”似乎可以抑制错误,将鼠标悬停在类型为
any
的函数上,并且我无法跳转到函数的定义“未找到定义” toBeInTheDocument”。
关于类型定义未加载的原因有什么想法吗?
将“@types/jest”升级到最新的“26.0.3”为我解决了这个问题。我的项目是从基础项目复制的,并且 @types/jest 已经包含在内。我在初始化其他包时错过了这一点。
更新后的 @types/jest 对 index.d.ts Matchers 接口进行了更改,这使得一切正常工作。
在应用程序根目录的 tsconfig.json 文件中,请在类型字段中包含类型“@testing-library/jest-dom”。
“类型”:[“节点”,“笑话”,“@testing-library/jest-dom”],