Блог

Я новичок jest и создал этот простой тест для нашего приложения react, написанного на typescript, который в значительной степени зависит от react-bootstrap. Я пробовал это как с помощью enzyme, так и с react-testing-library и получил тот же результат. Мы также используем 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 |   );
  

Мой jest.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"
  ]
}
  

Решением было добавление "esModuleInterop": true в tsconfig.json.