如何在不运行项目的情况下测试React自带的组件库

Question

我正在创建一个组件库，现在我想用 Jest 之类的东西测试我的组件。 我希望我的测试位于我的库项目中，这意味着我无法访问正在运行的反应环境，这使得事情变得更困难（至少对我来说）。

我无法让它工作，我总是遇到这个错误“不能在模块之外使用 import 语句”，我主要尝试使用 jest 和这些包的组合：@testing-library/react、jsdom、jest- environment-jsdom、jest、@babel/preset-react 甚至 @storybook/testing-library 因为我的项目运行一本故事书，但我并没有深入研究这个方向，正如我所说的，我主要尝试使用 jest。

这是我的环境的简短版本：

// src/components/MyComponent.tsx
import React from 'react'

export default function MyComponent() {
  return (
    <div>Hello, World!</div>
  )
}

// src/__tests__/MyComponent.test.js
import React from "react";
import { render } from "@testing-library/react";
import MyComponent from "./components/MyComponent";

test("renders MyComponent correctly", () => {
  const { getByText } = render(<MyComponent />);
  expect(getByText("Hello, World!")).toBeInTheDocument();
});

module.exports = {
  testEnvironment: "jsdom"
};

package.json（所有这些测试包变得有点混乱）

"peerDependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-transition-group": "4.4.5"
},
"devDependencies": {
  "@storybook/addon-essentials": "^7.5.3",
  "@storybook/addon-interactions": "^7.5.3",
  "@storybook/addon-links": "^7.5.3",
  "@storybook/addon-onboarding": "^1.0.8",
  "@storybook/blocks": "^7.5.3",
  "@storybook/react": "^7.5.3",
  "@storybook/react-vite": "^7.5.3",
  "@storybook/testing-library": "^0.2.2",
  "@testing-library/jest-dom": "^6.1.5",
  "@testing-library/react": "^14.1.2",
  "jest": "^29.7.0",
  "jest-environment-jsdom": "^29.7.0",
  "jsdom": "^23.0.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "sass": "^1.69.5",
  "storybook": "^7.5.3",
  "typescript": "^5.2.2"
}

我也尝试过使用 jest 安装文件，但结果是一样的。

关于如何在没有任何正在运行的项目的情况下设置简单测试有什么想法吗？ 谢谢！

Answer 1

事实证明，测试 React 组件或 UI 通常比测试后端代码要复杂一些。尽量保持简单并使用底层框架提供的任何功能。

例如，使用现代 Node.js，您可以创建一个测试场并渲染您想要测试的组件。然后，使用 cypress 或 playwright 等 e2e 工具，您可以按照您的意愿详细测试您的库。

检查pickestry以了解此设置。