reactjs React笑话导致“语法错误：意外标记,”

d7v8vwbk 于 2023-01-30 发布在 React

关注(0)|答案(4)|浏览(112)

我现在用React Jest测试代码，如果一个组件是单个的，并且没有导入其他东西，"npm test"运行的很顺利，现在我想一起测试多个组件，我马上得到这个错误：
语法错误：意外标记。
似乎每当React导入其他内容时，比如下面这个：

require( './style/fixed-data-table.css' );
require( './style/jnpr-datatable.scss' );

然后使用Jest，则会抛出意外的标记"."错误。
我的设置肯定有问题，但是哪里有问题？我的 * package. json * 文件包含：

"jest": {
   "unmockedModulePathPatterns": [
     "<rootDir>/node_modules/react/",
     "<rootDir>/node_modules/react-dom/",
     "<rootDir>/node_modules/react-addons-test-utils/"
   ]
 }

而且 . babelrc * 文件已经在根目录中了， babel-jest * 也包含在内。

reactjs

来源：https://stackoverflow.com/questions/41841968/react-jest-causing-syntaxerror-unexpected-token

4条答案

按热度按时间

6xfqseft1#

看一下webpack integration的jest文档。问题是jest除了js之外不能和其他东西一起工作。所以你必须模拟你导入的所有非js文件。最简单的方法是在你的jest配置中配置一个moduleNameMapper。

{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

__mocks__/styleMock.js的代码是这样的。

module.exports = {};

赞(0）回复(0）举报 2023-01-30

w6lpcovy2#

最简单的方法是添加一个identity-obj-proxy包：
yarn add --dev identity-obj-proxy
并使用它来自动模拟CSS/SCSS模块。
将以下内容添加到package.json：

"jest": {
    "moduleNameMapper": {
      "\\.(css|scss)$": "identity-obj-proxy"
    }
  }

或将以下代码转换为jest.config.ts：

moduleNameMapper: {
  '\\.(css|scss)$': 'identity-obj-proxy'
}

这样，（S）CSS模块类名将在测试中自动检索。
这是来源。

赞(0）回复(0）举报 2023-01-30

bis0qfac3#

npm i -D身份对象代理
1.将以下内容添加到jest.config.js

moduleNameMapper: {
       "\\.(css|less|scss|sass)$": "identity-obj-proxy"
   }

jest.config.js:

testEnvironment: 'jsdom',

赞(0）回复(0）举报 2023-01-30

bwleehnv4#

我解决这个问题的方法是在.babelrc文件中添加这两行代码

{
    "presets": ["env", "react"],
    "plugins": ["transform-class-properties"]
}

我的package.json看起来像这样：

{
  "name": "crud-redux",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  "react": "^16.4.0",
  "react-dom": "^16.4.0",
  "react-scripts": "1.1.4"
},
 "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "NODE_ENV=test jest",
     "eject": "react-scripts eject"
},
  "devDependencies": {
      "babel-jest": "^18.0.0",
      "babel-loader": "^6.4.1",
      "babel-plugin-transform-decorators-legacy": "^1.3.5",
      "enzyme": "^2.9.1",
      "jest": "^23.1.0",
      "react-addons-test-utils": "^15.6.2",
      "react-test-renderer": "^15.6.2",
      "redux-mock-store": "^1.5.1",
      "webpack": "^1.15.0",
      "webpack-dev-server": "^1.16.5"
  }
}

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs React笑话导致“语法错误：意外标记,”

4条答案

相关问题

热门标签

最新问答