Question

运行时出现以下错误

npm run test

src/components/documentEditor/levels/2_page/page.test.js
  ● Test suite failed to run

    Cannot find module 'react' from 'styled-components.cjs.js'

    However, Jest was able to find:
        './page.js'
        './page.test.js'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

我认为{无法从'styled-components.cjs.js'找到模块'react'}错误是我指的是正在测试的'Page'组件中的导入

如果我不进行任何测试，并且使用styledComponents并可以正常工作，则“ Page”组件可以完美运行。

“页面”组件的标题看起来像这样（不是完整的组件，只是前几行）

import React from 'react';
import styled from 'styled-components';
import { Droppable, Draggable } from 'react-beautiful-dnd';
import { filterArrayByChildrenIds } from '../../functions/supportingFunctions/generic';
import ModifyPage from './modifyPage';
import Paragraph from '../3_paragraph/paragraph';

const Container = styled.div``;
const Title = styled.div``;
const VerticalList = styled.div`

package.JSON中的Jest设置是这个

 {
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "enzyme-adapter-react-16": "^1.15.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.4.3",
    "react-transition-group": "^4.3.0",
    "uuid": "^3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/components/documentEditor/*.js",
      "!<rootDir>/node_modules/",
      "!<rootDir>/src/index.js",
      "!<rootDir>/src/registerServiceWorker.js"
    ]
  },
  "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"
    ]
  },
  "proxy": "http://localhost:5000"
}

我调查的内容

类似的问题似乎表明import声明过于笼统。我发现了这篇文章 React & Jest: Cannot find module from test file。但是我无法弄清楚我在帖子中是否做错了什么。
我还认为开玩笑或酶与样式库之间可能不兼容，但找不到任何东西。
我在堆栈溢出时发现了这个问题，但似乎不是同一问题Testing component created using styled component with jest and enzyme。
我从page.js和所有对样式化组件的引用中删除了“样式化组件”中的样式化导入。完成后，我收到了一个新错误

  src/components/documentEditor/levels/2_page/page.test.js
  ● Test suite failed to run

    Cannot find module 'react' from 'react-beautiful-dnd.cjs.js'

    However, Jest was able to find:
        './page.js'
        './page.test.js'

Answer 1

FIX 我导航到客户端目录，并在其中安装了react-beautiful并进行了样式设置（它们已安装但在服务器目录中，并且当我从客户端目录运行jset时未加载它们）。

为什么要这样做？
该应用程序是节点（服务器）和反应（客户端），这意味着有两个节点模块目录和两个package.json文件

当我运行该应用程序时，通常是从服务器上“同时”运行该模块，然后再运行客户端。

漂亮且具有样式的组件已安装到服务器的节点目录中-然后在我运行应用程序时将其加载。

我在客户端目录中运行Jest，这意味着服务器和节点模块未加载

笑话/酶和样式化的组件找不到模块

1 个答案: