css 内容上的 cypress ParseError

Question

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

ul {
   ^
ParseError: Unexpected token

该 ParseError 显示在 Cypress 测试运行器中。它在测试运行器侧边栏中也有此文本:

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

A missing file or dependency A syntax error in the file or one of its dependencies Fix the error in your code and re-run your tests.

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

是否需要在 Cypress 配置中做任何事情来解决这个问题？

这是简单的 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');
    })
})

Answer 1

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

对于 React 单元测试，请参阅此存储库:https://github.com/bahmutov/cypress-react-unit-test