Styled Components - Fails to mount

[D1no]

Hey, first of all: great module! It's very elevating to combine unit tests into the E2E workflow.

Anyway; we use styled-components heavily and I would like to unit test them in cypress. Unfortunately, mount throws a fit when hit with a styled component.

After

• yarn add -D styled-components
• (yarn add -D cypress-react-unit-test)

If you throw this test into cypress...

// type definitions for Cypress object "cy"
/// <reference types="cypress" />

// check this file using TypeScript if available
// @ts-check

// =============================================================================
// Debugging Styled Component in Cypress for Unit Testing
// yarn add -D cypress-react-unit-test
// yarn add -D styled-components
// =============================================================================
import React from "react";
import { mount } from "cypress-react-unit-test";
import styled from "styled-components";

/** 
 * Create normal react component
 * */
const TestComponent = props => {
  return <div data-test="TestComponent">This is a test!</div>;
};

/** 
 * 💄 Now we style with styled-components
 * */
const StyledComponent = styled(TestComponent)`
  background-color: green;
`;

/** 
 * Running Test
*/
describe("Can Render Component", () => {
  it("Plain Component", () => {

    // ✅ Works
    mount(<TestComponent />);

    cy.get('[data-test="TestComponent"]').should("contain", "test");
  });

  it("Styled Component as JSX", () => {

    // 🔥 Fails
    // Error: Element type is invalid: expected a string
    // (for built-in components) or a class/function (for composite components)
    // but got: object.
    mount(<StyledComponent />);

    cy.get('[data-test="TestComponent"]').should("contain", "test");
  });

  it("Styled Component as object reference", () => {

    // 🔥 Fails
    // Error: TypeError: Cannot read property 'name' of undefined
    mount(StyledComponent);

    cy.get('[data-test="TestComponent"]').should("contain", "test");
  });
});

// =============================================================================
// END Debugging Component
// =============================================================================

...you'll see the tests fail.

I was trying to solve this with some style extraction etc. to see what's going on but the last error TypeError: Cannot read property 'name' of undefined is really odd to me.

Someone have an idea?

Thanks in advance

[D1no]

Just to point people who might come by into the right way (I'll update this as I have time).

• Updating React to v16.7 in the CDN link helps changes the error
  https://github.com/bahmutov/cypress-react-unit-test/blob/b9b61f4798bf980b52b275ffaa4c5336a18b1010/lib/index.js#L59-L60

Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, render, attrs, componentStyle, displayName, foldedComponentIds, styledComponentId, target, withComponent, toString}). If you meant to render a collection of children, use an array instead.

• Using type.name is probably not the right way to go (its not a field on all types) Changing it to displayName when available makes more sense. Never mind; I think in React 16.7 it should be.
  https://github.com/bahmutov/cypress-react-unit-test/blob/b9b61f4798bf980b52b275ffaa4c5336a18b1010/lib/index.js#L9

After those changes, the component at least mounts — though lifecycle methods (and styling of course) are not present.

[Astridax]

@D1no
So I've spent the better part of the past day hacking around with getting styled components to work in Cypress.

First as you said, was the need to get the latest version of react and react-dom in there.

Initially I have brought some of the mount component within my cypress test and don't use react from the CDN. However I'll update this when I've tested my work using the mount method in the library. According to comments in the library this should cause some issues, so I'll investigate.

But primarily the issue is styles are not being applied. That's likely because css-in-js libraries attach their styles to the root document, whereas the components are being mounted in an iframe.

I'm using emotion-js so the code below will reflect that, but it provides a CacheProvider HOC that I can use to modify where the styles are attached. I have attached them to the dom element with class 'container' that Cypress mounts its components in to.

import React from 'react';
import ReactDOM from 'react-dom';
import createCache from '@emotion/cache';

import { Test1 } from '../../../src/pages/jest';
import { CacheProvider } from '@emotion/core';

const mount = jsx => {
  cy.window({ log: false }).then(function() {
    const iframeDocument = cy.state('document');
    const container = iframeDocument.getElementsByClassName('container')[0];
    const myCache = createCache({
      key: 'iframe-cache',
      container,
    });
    const renderedComponent = ReactDOM.render(
      <CacheProvider value={myCache}>{jsx}</CacheProvider>,
      container,
    );
    Cypress._component = renderedComponent;
    Cypress.component = () => {
      return cy.then(() => Cypress._component);
    };
  });
};

describe('HelloState component', () => {
  it('works', () => {
    mount(<Test1/>);
  });
});

Attached are screenshots of this working.

[williansabiao]

I'm having the same problem here.
If I try to mount a styled component I got:

It happens if I try to render a pure html also: mount(<div>Test</di>)

My solution was to create a wrapper component, which I pass the component that I want to render as below.

const Wrapper = ({ Component, ...props }) => <Component {...props} />

describe('Typography component', () => {
  it('Should exists', () => {
    cy.mount(<Wrapper Component={MyStyledComponent}>Hey</Wrapper>)
    cy.get('span').should('have.text', 'Hey')
  }) // ✅ Works

  it('Should exists 2', () => {
    cy.mount(<MyStyledComponent>Hey</MyStyledComponent>)
    cy.get('span').should('have.text', 'Hey')
  }) // 🔥 Fails
})

Hope it helps to find a final solution and to have a temporary one.

UPDATE
My solution renders the element with the classes. However, there are not styles :(

[williansabiao]

@D1no's solution worked for me with styled-components. I hope it's okay I copied your code from your commit D1no/coinglaze@677bcda

[justjuank]

Hello,
I'm trying to unit test a library of components that relay heavily on styled-components.
I am able to render and test the components in a spec like this:

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { FSTheme, FSAvatar } from '../../../lib/';

describe('Avatar', () => {
    it('can display an avatar', () => {
        cy.mount(<ThemeProvider theme={FSTheme}><FSAvatar image="https://i.pravatar.cc/256" /></ThemeProvider>);

        cy.get('img').should('have.attr', 'src').and('include', 'pravatar');
    });

    it('can display another avatar', () => {
        cy.mount(<ThemeProvider theme={FSTheme}><FSAvatar image="https://i.pravatar.cc/256" /></ThemeProvider>);

        cy.get('img').should('have.attr', 'src').and('include', 'pravatar');
    });
})

However, even though my spec tests work fine, I'm getting this error in the console:

I believe is because of the ThemeProvider, when I remove it I don't get the error anymore, but my components relay on the theme.

Also, when I do "Run all specs" everything breaks because of this error and my tests no longer work, they only work if I run each spec separately.

Is there a way to wrap all the components in the tests with a single ThemeProvider?

[bahmutov]

Could you try Cypress v4.5.0 and cypress-react-unit-test@2

[bahmutov]

🎉 This issue has been resolved in version 4.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀