时间戳

首页 > 解决方案 > Jest/Enzyme 和 Styled Components 找不到模块

javascript - Jest/Enzyme 和 Styled Components 找不到模块

问题描述

运行时出现以下错误

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

{Cannot find module 'react' from 'styled-components.cjs.js'} 错误我认为是指正在测试的“页面”组件中的导入

如果我不运行任何测试并且使用了 styledComponents 并且可以正常工作，那么“页面”组件就会完美运行。

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

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"
}

我调查了什么

  1. 类似的问题似乎表明导入语句过于笼统。我发现这篇文章 React & Jest: Cannot find module from test file。但是，我无法弄清楚我是否在帖子中专门做错了什么。

  2. 我还认为这可能是开玩笑或酶与样式库之间的一些不兼容，但在其上找不到任何东西。
  3. 我在堆栈溢出时发现了这一点，但似乎与使用带有 jest 和酶的样式组件创建的测试组件不是同一个问题。
  4. 我从 page.js 中删除了 import styled from 'styled-components' 以及对样式化组件的所有引用。完成后我得到一个新的错误
  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'

标签： javascriptreactjsjestjsenzymestyled-components

解决方案

FIX 我导航到客户端目录并在那里安装了 react-beautiful 和样式（因为它们已安装但在服务器目录中，当我从客户端目录运行 jset 时，它们没有加载）。

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

当我运行应用程序时，我通常从“并发”运行模块的服务器运行它，然后运行客户端。

react-beautiful 和 styled-components 安装到服务器的节点目录中 - 然后在我运行应用程序时加载它们。

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

推荐阅读