【问题标题】:Jest SyntaxError when importing file导入文件时出现 Jest SyntaxError
【发布时间】:2018-01-26 21:55:56
【问题描述】:

我在运行 Jest 时遇到了 SyntaxError。我可能需要在 jest 配置中添加一些内容才能使其正常工作。有什么提示吗?

这是验证错误的代码。

代码.js

import React from 'react';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

class Code extends React.Component {
  componentDidMount() {
    hljs.highlightBlock(this.component)
  }

  render() {
    const code = "{'name': 'Daniel'}";
    return (
      <pre ref={(node) => { this.component = node }}>
        <code className="json">{code}</code>
      </pre>
    );
  }
}

export default Code;

代码.test.js

import Code from './Code';

describe('Code', () => {
  it('renders correctly', () => {
    expect(1).toBe(1);
  });
});

package.json

{
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "highlight.js": "^9.12.0",
    "react": "^16.2.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-jest": "^22.1.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "jest": "^22.1.4",
    "regenerator-runtime": "^0.11.1"
  },
  "babel": {
    "presets": [
      "env",
      "react"
    ]
  }
}

提前致谢。

【问题讨论】:

  • 你好像没有 css 插件。

标签: javascript reactjs jestjs


【解决方案1】:

答案是in Jest docs(谁会想到?:)。

更新 package.json
{
  "jest": {
    "moduleNameMapper": {
        "\\.(css|less)$": "./styleMock.js"
    }
}

并添加 styleMock.js

module.exports = {};

【讨论】:

    猜你喜欢
    • 2018-04-24
    • 2017-01-30
    • 2021-08-19
    • 2012-09-27
    • 1970-01-01
    • 2017-01-16
    • 2019-12-07
    • 2019-02-08
    相关资源
    最近更新 更多