CODEWITHSUNDEEP
cypresschakra-uicypress-component-test-runner
Longviddd
Longviddd

Reputation: 1

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

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.

Upvotes: 0

Views: 1236

Answers (2)

kenikori
kenikori

Reputation: 21

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

Upvotes: 2

TEST
TEST

Reputation: 67

Update your component.ts like this:

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

Upvotes: 1

Related Questions