0

我正在尝试使用 gulp 任务测试已导入 SASS 的 React 组件。这里的问题是 gulp-jest 不映射模块名称（因此它不能跳过 .scss 文件）并且测试失败（抛出：“SyntaxError: Unexpected token *”）。我不知道为什么它会这样。

最奇怪的是，它可以通过“npm test”和 jest-cli 完美运行，但由于某种原因不能使用“gulp test”。

这是组件：

import React from 'react';
import '../../scss/App.scss';

export default class App extends React.Component {
  render() {
    return (
      <div className="main">
        <h1>Here we go!</h1>
      </div>
    )
  }
}

这是测试：

import React from 'react';
import App from '../src/js/components/App';

describe('App', () => {
  test('should be a React component', () => {
    let instance = App.prototype instanceof React.Component;
    expect(instance).toBe(true);
  });
});

这是 gulp 文件：

var gulp = require('gulp');
var jest = require('gulp-jest').default;

gulp.task('test', () => {
  process.env.NODE_ENV = 'test';
  return gulp.src('test')
    .pipe(jest({
      config: {
        "transformIgnorePatterns": [
          "<rootDir>/dist/", "<rootDir>/node_modules/"
        ],
        "automock": false,
        "moduleNameMapper": {
          "\\.scss$": "<rootDir>/jestignore.js"
        }
      }
    }));
});

根目录中的 jestignore.js 只是导出空对象。

我确实有 jest.config.js 文件导出 npm test 命令的确切配置（只是想通过将 require() 更改为在 gulpfile 中配置自身来为您简化它）。

4

1 回答 1

0

如果您使用 jest 21，这是一个已知的 gulp-jest 问题：https ://github.com/alansouzati/gulp-jest/issues/41 。降级到 jest 20 应该会有所帮助。

于 2017-09-20T11:53:19.350 回答