类型错误：使用反应测试库测试组件时无法读取 null 的属性（读取“useState”）

Question

我正在学习使用反应测试库和笑话来测试反应和反应组件。在尝试测试渲染组件时可以正常工作的组件时，它可以正常工作，但是在测试它时，我收到无效的挂钩错误。

\n

这是组件。

\n

import PropTypes from "prop-types";\nimport { useState } from "react";\n\nexport const CounterApp = ({ value }) => {\n    const [counter, setCounter] = useState(value);\n\n    function handleAdd() {\n        setCounter(counter + 1);\n    }\n    function handleSubtract() {\n        if (counter > 0) {\n            setCounter(counter - 1);\n        }\n    }\n\n    function handleReset() {\n        setCounter(0);\n    }\n    return (\n        <>\n            <h1>CounterApp</h1>\n            <h2> {counter} </h2>\n            <button onClick={handleAdd}>+1</button>\n            <button onClick={handleSubtract}>-1</button>\n            <button onClick={handleReset}>Reset</button>\n        </>\n    );\n};\n\nCounterApp.propTypes = {\n    value: PropTypes.number.isRequired,\n};\n\n

\n

这是我正在运行的测试

\n

import { render } from "@testing-library/react";\nimport { CounterApp } from "../../src/components/CounterApp";\n\ndescribe("<CounterApp /> Tests", () => {\n    const initialValue = 10;\n\n    test("should match the snapshot", () => {\n        const { container } = render(<CounterApp value={initialValue} />);\n        expect(container).toMatchSnapshot();\n    });\n});\n\n

\n

这就是我收到的错误

\n

 \xe2\x97\x8f <CounterApp /> Tests \xe2\x80\xba should match the snapshot                  \n                                                                      \n    TypeError: Cannot read properties of null (reading 'useState')    \n                                                                      \n      3 |                                                             \n      4 | export const CounterApp = ({ value }) => {                  \n    > 5 |       const [counter, setCounter] = useState(value);        \n        |                                             ^\n      6 |\n      7 |       function handleAdd() {\n      8 |               setCounter(counter + 1);\n\n      at useState (node_modules/react/cjs/react.development.js:1622:21)\n      at CounterApp (src/components/CounterApp.jsx:5:40)\n      at renderWithHooks (../node_modules/react-dom/cjs/react-dom.development.js:16305:18)\n      at mountIndeterminateComponent (../node_modules/react-dom/cjs/react-dom.development.js:20074:13)\n      at beginWork (../node_modules/react-dom/cjs/react-dom.development.js:21587:16)\n      at beginWork$1 (../node_modules/react-dom/cjs/react-dom.development.js:27426:14)\n      at performUnitOfWork (../node_modules/react-dom/cjs/react-dom.development.js:26560:12)\n      at workLoopSync (../node_modules/react-dom/cjs/react-dom.development.js:26466:5)\n      at renderRootSync (../node_modules/react-dom/cjs/react-dom.development.js:26434:7)\n      at recoverFromConcurrentError (../node_modules/react-dom/cjs/react-dom.development.js:25850:20)\n      at performConcurrentWorkOnRoot (../node_modules/react-dom/cjs/react-dom.development.js:25750:22)\n      at flushActQueue (../node_modules/react/cjs/react.development.js:2667:24)\n      at act (../node_modules/react/cjs/react.development.js:2582:11) \n      at ../node_modules/@testing-library/react/dist/act-compat.js:63:25\n      at renderRoot (../node_modules/@testing-library/react/dist/pure.js:159:26)\n      at render (../node_modules/@testing-library/react/dist/pure.js:246:10)\n      at Object.<anonymous> (test/components/CounterApp.test.jsx:8:31)\n\nTest Suites: 1 failed, 1 total\nTests:       1 failed, 1 total\nSnapshots:   0 total\nTime:        2.194 s\n

\n

任何建议将非常感激。提前致谢！

\n

Answer 1

我自己也遇到了这个错误，因为我将测试框架安装在项目的外部目录中，而不是包含 .babelrc、src/、components/ 等的目录中。如果你遇到这个错误，它似乎可能是一个设置问题与您安装的内容和位置有关。

我在项目目录中运行的内容： npm install --save-dev @testing-library/react @testing-library/jest-dom jest jest-environment-jsdom @babel/preset-env @babel/preset-react