如何启用 Jest 和 Enzyme 在 WebStorm 上使用 React 编写测试

Question

我目前正在开始学习如何在 React 中编写测试，我面临着让我的 IDE (Webstorm) 识别我的 .test.js 文件并且显然识别 jest 的问题本身。

在我的 2017 年课程中，我了解到 jest 将设置在我的 package.json 文件中，因为它将成为 react-create-app library 的一部分.当我开始跟进课程模块时，我没有确定在 "dependencies" 部分内的 package.json 文件中安装的依赖项。

然后我安装了 jest 以及下面列出的依赖项：

 "enzyme": "^3.11.0",
 "enzyme-adapter-react-16": "^1.15.2",
 "react-test-render": "^1.1.2",
 "enzyme-to-json": "^3.4.4",

第一个问题是依赖项冲突破坏了我的应用程序。 react-scrips 最新版本 3.4.1 似乎不接受 jest 的最新版本。所以我不得不将 jest 版本降级到 24.9.0 以便运行我的应用程序再次进入开发模式。

然后我创建了一个文件来学习我的第一个测试技巧，我注意到 describe() 根本没有被识别。

我不知道该怎么做才能让它发挥作用。我不知道这是否仍然是编写测试的最佳设置，因为这是 2017 年 React 课程。

请查看我的 package.json 文件：

{
  "name": "veggie-burguers",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.4.4",
    "jest": "^24.9.0",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-test-render": "^1.1.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

在运行ning yarn test 之后我得到了两个错误：

第 1 -

 Could not find "store" in the context of "Connect(withRouter(App))". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(withRouter(App)) in connect options.

      4 | 
      5 | test('renders learn react link', () => {
    > 6 |   const { getByText } = render(<App />);
        |                         ^
      7 |   const linkElement = getByText(/learn react/i);
      8 |   expect(linkElement).toBeInTheDocument();
      9 | });

问题：我是否也应该在 App.test.js 文件中设置 redux？我的 root index.js 文件

已全部设置完毕并开始工作

第二 -

 react-scripts test
 FAIL  src/components/Navigation/NavigationItems/NavigationItem/NavigationItems.test.js
  ● Test suite failed to run

    Your test suite must contain at least one test.

我上面提到的 test 文件，即 NavigationItems.test.js 确实是空的，显然 IDE 在我写 [= 时甚至没有识别里面的 jest 28=] 它指责函数是 unresolved.

如果需要更多信息，我会相应地更新此查询。

Answer 1

问题是 Webstorm 无法识别我的 ...test 文件中的 jest。所以我这里改了题名，正好是IDE相关的

解决方案：

在 Webstorm => Preferences => Languages & Frameworks => JavaScript => Libraries 中，从可用存根列表中按 Download...、select 'jest'，按下载并安装。

这样jest就可以正常识别了，我可以使用它的功能了。

如何启用 Jest 和 Enzyme 在 WebStorm 上使用 React 编写测试

How to Enable Jest & Enzyme to write tests using React on WebStorm

testing

webstorm

reactjs

jestjs

enzyme