React Component Testing: Is it possible to mount new components between tests?

[mwren-mshanken]

I am running into issues attempting to run multiple tests against components using React component tests.

My first test will run fine, but subsequent tests fail to mount new or re-used components.

I'm wondering if the issue is with my components (they don't call render, just return themselves), or with tests themselves. Any insight is appreciated!

Here is an example:

Test file

/// <reference types="Cypress" />

import React from 'react'
import { mount } from '@cypress/react'
import HorizontalDivider from '../../public/assets/js/components/HorizontalDivider'

//render a divider with light, dark, and default variants
//I'm having issues mounting components in subsequent tests, and think it's because our 

describe('Horizontal Divider Tests', () => {
  
//This works fine
  it('Default divider has expected color', () => {

    const App = () => {
      return (
          <>  
            <HorizontalDivider />
            <HorizontalDivider variant="dark" />
          </>
      );
    };
  
    //Mount the components
    mount(<App />)

    //Default variant has light color

    //get the first horizontalDivider
    cy.get('[data-cyd="hoizontalDivider"]')
    .first()

    //Example of using the should callback
    .should($divider => {
      
      //Our divider should have rendered
      expect($divider).to.be.visible

      //Our divider should have lighter background-color
      expect($divider).to.have.css('background-color','rgb(232, 232, 232)')

      //Our divider should have inherited the light variant by default
      expect($divider).to.have.data('variant','light')
    })

  })

//This doesn't render anything
  it('Test Dark', () => {

    const Dark = () => {
      return (
          <>  
            <HorizontalDivider />
            <HorizontalDivider variant="dark" />
          </>
      );
    };

    mount(<Dark />)

        //Assert that dark variant component has dark color
        cy.get('[data-variant="dark"]')
        .should('be.visible')
        .and('have.css', 'background-color','rgb(43, 43, 43)')
  })
})

Component

import styled from "styled-components";

const StyledDiv = styled.div<Props>`
  width: 100%;
  height: 1px;
  margin: 20px 0;
  background: ${props => props.variant === "light" ? "#e8e8e8" : "#2b2b2b" };
`;

const HorizontalDivider = ({ variant = "light" }: Props) => {
    return (
      <StyledDiv data-cyd="hoizontalDivider" variant={variant} />
    );
};

type Props = {
  variant?: "light" | "dark";
};

export default HorizontalDivider;

I've tried mounting the same , and writing the app above the tests, in global scope.
I've tried mounting in a beforeEach, which fails to render components in the second test

I can combine tests for now, but I am wondering what I am missing to get Cypress to mount or re-mount components between tests.

I've tried running these from within the component itself, which also fails to mount a component during the second test:

Tried running these tests inline with the component itself, which also fails to render a new component in the second test:

```javascript
import styled from "styled-components";
import { mount } from '@cypress/react';

const StyledDiv = styled.div<Props>`
  width: 100%;
  height: 1px;
  margin: 20px 0;
  background: ${props => props.variant === "light" ? "#e8e8e8" : "#2b2b2b" };
`;

const HorizontalDivider = ({ variant = "light" }: Props) => {
    return (
      <StyledDiv data-cyd="hoizontalDivider" data-variant={variant} variant={variant} />
    );
};

type Props = {
  variant?: "light" | "dark";
};

export default HorizontalDivider;

describe('Horizontal Divider Tests', () => {
  
  it('Params result in correct color', () => {
  
    //Mount the components
    mount(<HorizontalDivider />)

    //Default variant has light color

    //get the first horizontalDivider
    cy.get('[data-cyd="hoizontalDivider"]')
    .first()

    //Example of using the should callback
    .should($divider => {
      
      //Our divider should have rendered
      expect($divider).to.be.visible
    })
  })

  it('dark doesn't render', () =>{
    //mount a new component, but nothing renders
    mount(<HorizontalDivider variant="dark"/>)

    //Assert that dark variant component has dark color
    cy.get('[data-variant="dark"]')
    .should('be.visible')
  })
})

Thanks in advance for any help or discussion!

[lmiller1990]

Hi!

Your code looks fine. I think the problem is related to styled components. Basically, we clean up between each spec, which was deleted the styles injected via styled components. I think your component IS rendering, just with no styles.

This was discussed heavily here: #15879. It was fixed here: #16024. This has been released 2 days ago - what version of @cypress/react and @cypress/webpack-dev-server are you on? Can you try install the latest versions and see if that helps?

If not I can look into reproducing your issue and figure out what's going on. If you can provide a reproduction, that'd be great.

[mwren-mshanken]

I must have just missed this release.

I was using

        "@cypress/react": "^5.3.3,
        "@cypress/webpack-dev-server": "^1.1.3",

After upgrading to

        "@cypress/react": "^5.3.4",
        "@cypress/webpack-dev-server": "^1.1.4",

This is working as expected now! My searching didn't turn up #15879, so thanks for finding this discussion!

I appreciate the quick turnaround and follow up. Really great!

[lmiller1990]

Great, glad you got it fixed. 🚀