Eternal "tests are loading" plus console erros from component emitter

[gnapse]

Hi. I started following the guide to set up component testing in a React library, and all I get is an eternal "Your tests are loading…" in the test runner. In the browser console I see this:

Here's my cypress.json:

{
  "component": {
    "testFiles": "**/*.spec.{js,ts,jsx,tsx}",
    "componentFolder": "src"
  }
}

and my cypress/plugins/index.js:

module.exports = (on, config) => {
    // the path is relative to cypress.json
    const webpackFilename = './.storybook/webpack.config.js'

    // configuration
    config.env.webpackFilename = webpackFilename
    config.env.coverage = false

    require('@cypress/react/plugins/load-webpack')(on, config, { webpackFilename })

    // IMPORTANT to return the config object
    // with the any changed environment variables
    return config
}

Here are the versions of the newly added dependencies:

+        "@cypress/react": "^5.9.3",
+        "@cypress/webpack-dev-server": "^1.4.0",
+        "@testing-library/cypress": "^8.0.0",
+        "cypress": "^8.2.0",
-        "webpack": "^4.43.0"
+        "webpack": "^4.43.0",
+        "webpack-dev-server": "^3.11.2"

Any ideas about what's wrong with my setup?

[JessicaSachs]

Usually Storybook imports stuff like Mock Service Worker which can be problematic with Cypress. I suggest just importing a Button or writing a smoke test.

it('works', () => {
  expect(true).to.be.true
})

Once that's compiling, you want to start and then building up to more and more dependencies to isolate the module that's failing. My guess is that something inside of your storybook Webpack configuration isn't playing nicely with Cypress... but I'm not sure what that would be.

Here's our Storybook + Component testing blog post.

Can you send me a reproduction repo? I want to make an issue out of this because the error handling is terrible and we need to keep track of it -- regardless of if there are other underlying issues, the errors need to be better.

[gnapse]

Thanks for your answer.

I'm afraid that there's nothing about storybook in this context. I'm merely reusing the webpack config file I use for storybook, but that file is a standard webpack config:

const path = require('path')

module.exports = {
    plugins: [],
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                sideEffects: true,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { modules: { auto: true }, esModule: false } },
                ],
            },
            {
                test: /\.svg$/,
                loader: 'svg-url-loader',
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.svg'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
}

I copied it over to the root folder and updated the loader config to point to this new location. I still get the same result.

The single Cypress test file with which I'm trying this is also very minimal:

import React from 'react'
import { mount } from '@cypress/react'

it('renders learn react link', () => {
    mount(
        <a href="/learn">Learn React</a>,
    )
    cy.get('a').contains('Learn React')
})

Though I'll take a look at that storybook + cypress blog post you linked to.

[JessicaSachs]

That's bizzare... I can't imagine how something so tiny would fail....Node version? OSX version?

I need to have a repro because this is super weird.

[gnapse]

Yeah, never mind. We'll figure it out. It must be something weird in our setup. Thanks for your help.