Блог

Я пытаюсь использовать cypress для интеграционного тестирования в проекте React. Однако я получаю следующую ошибку:

Ошибка: ошибка компиляции Webpack ./node_modules/react-pro-sidebar/ dist/css /styles.css 1: 0 Сбой синтаксического анализа модуля: неожиданный символ ‘@’ (1: 0) Возможно, вам понадобится соответствующий загрузчик для обработки этого типа файлов, в настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack.js.org/concepts#loaders

Как следует из ошибки, я использую пакет react-pro-sidebar.

Первые строки CSS-файла пакета, вызывающего ошибку,

 > @keyframes swing {
|   0%,
|   30%,
 

Я попытался установить загрузчик css и scss webpack, но это все равно не удалось.

Вот мой webpack.config.js файл,

 const {resolve} = require('path');

module.exports = {
  entry: [
    './md5.js'
  ],
  output: {
    path: resolve('./dist'),
    filename: 'md5.min.js',
    libraryTarget: "var",
    library: "MD5"
  }
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.scss$/,
        use: ['style-loader', 'css-loader'],
      },
    ]
  }
};
 

Код, вызывающий ошибку,

 import React from 'react';

describe('example to-do app', () => {
    beforeEach(() => {
        cy.visit('http://localhost:3000')
    })
    
    it("containsMain",()=>{
        cy.contains(".main")
    })
})
 

Ошибка также возникает, если я просто пытаюсь загрузить страницу.