How do I add the styling of chakra-ui into cypress component testing

Question

From what I understand, I can import a css file into cypress. However, chakra-ui doesn't have one so how do i do it? Thanks in advance.

Answer 1

Update your component.ts like this:

Cypress.Commands.add('mount', (jsx, options) =>
  mount(React.createElement(ThemeProvider, { theme }, jsx), options)
);

Answer 2

The cypress/support/component.ts file should look something like this:

import "./commands";
import { mount } from "cypress/react18";
import { ChakraProvider } from "@chakra-ui/react";
import { theme } from "../../src/theme/theme";
import { createElement } from "react";

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add("mount", (component, options) => {
  const wrappedComponent = createElement(ChakraProvider, { theme }, component);

  return mount(wrappedComponent, options);
});

Full example: https://github.com/kenikori/react-chakra-cypress