cypress ParseError on css content

Question

I am new to Cypress for javascrpt testing. I'm testing a basic react app with css. Whether I import css directly or use css modules, the test always fails with:

ul {
   ^
ParseError: Unexpected token

That ParseError is shown in the cypress test runner. It also has this text in the test runner sidebar:

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.

Even with an out of the box create-react-app app, the App.test.js will fail due to css ParseError on App.css.

Does anything need to be done in Cypress config to address this?

Here is the simple css file:

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

  li {
    float: left;
  }

The test file:

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

The window/document of the spec is not the same as your app, so this does not work out of the box.

For unit testing react, see this repo: https://github.com/bahmutov/cypress-react-unit-test