时间戳

首页 > 解决方案 > css 内容上的 cypress ParseError

cypress - css 内容上的 cypress ParseError

问题描述

我是 Cypress 的 javascrpt 测试新手。我正在使用 css 测试一个基本的反应应用程序。无论我是直接导入 css 还是使用 css 模块，测试总是失败：

ul {
   ^
ParseError: Unexpected token

ParseError 显示在 cypress 测试运行程序中。它在测试运行器侧边栏中也有此文本：

这发生在赛普拉斯编译和捆绑您的测试代码时。这通常是由以下原因引起的：

缺少文件或依赖项 文件或其依赖项之一中的语法错误 修复代码中的错误并重新运行测试。

即使使用开箱即用的 create-react-app 应用程序，App.test.js 也会由于 App.css 上的 css ParseError 而失败。

赛普拉斯配置中是否需要做任何事情来解决这个问题？

这是一个简单的css文件：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  li {
    float: left;
  }

测试文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../../src/App.js';

describe('Default React App.js test', () => {
    it('renders without crashing', () => {
        const div = document.createElement('div');
        ReactDOM.render(<App />, div);
        ReactDOM.unmountComponentAtNode(div);
    });
})

describe('basic ui test', () => {
    it('finds text on page', () => {
        cy.visit('http://localhost:3000');
        cy.contains('home');
    })
})

标签： cypress

解决方案

该window/document规范与您的应用程序不同，因此这不是开箱即用的。

对于单元测试反应，请参阅此回购：https ://github.com/bahmutov/cypress-react-unit-test

推荐阅读