使用typescript在jestjs单元测试中未正确导入Bootstrap Dropdown

Question

我是jest的新手，并为我们的react应用程序构建了这个简单的测试，它是用typescript编写的，在很大程度上依赖于react引导程序。我在酶和反应测试库中都尝试过，得到了相同的结果。我们也使用webpack，但这似乎与本例无关。

somedropdown.test.tsx:

import * as React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import { render, screen } from "@testing-library/react";

interface SomeDropdownProps {
onSelect(eventKey: string): void
}
function SomeDropdown(props: SomeDropdownProps): React.ReactElement<any, any> {
return (
<DropdownButton title="Some Dropdown" variant="outline-secondary">
<Dropdown.Item eventKey="1" key="1" onSelect={props.onSelect}>1</Dropdown.Item>
<Dropdown.Item eventKey="2" key="2" onSelect={props.onSelect}>2</Dropdown.Item>
</DropdownButton>
);
}
it("should work", () => {
const onselect = (eventKey: string) => {};
const { container } = render(<SomeDropdown onSelect={onselect} />);
screen.debug(container);
});

这目前对我来说失败了，错误是：

TypeError: Cannot read property 'Item' of undefined
21 |   return (
22 |     <DropdownButton title="Some Dropdown" variant="outline-secondary">
> 23 |       <Dropdown.Item eventKey="1" key="1" onSelect={props.onSelect}>1</Dropdown.Item>
|                 ^
24 |       <Dropdown.Item eventKey="2" key="2" onSelect={props.onSelect}>2</Dropdown.Item>
25 |     </DropdownButton>
26 |   );

我的笑话.config.js:

module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
testRegex: "(/src/ts/test/.*|\.(test|spec))\.(ts|tsx|js|jsx)$",
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"]
};

tsconfig.json

{
"compilerOptions": {
"module": "es2020",
"moduleResolution": "node",
"target": "es6",
"rootDir": "./src/ts",
"outDir": "./build/js",
"sourceMap": true,
"declaration": true,
"removeComments": true,
"noEmitOnError": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"lib": [ "es7", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"jsx": "react"
},
"include": [
"./src/ts/**/*"
],
"exclude": [
"./src/ts/**/*.spec.ts"
]
}

Answer 1

解决方案将"esModuleInterop": true添加到tsconfig.json。