Octane framework definition and mount adapter for component testing with Cypress
# bun
bun i -D cypress-ct-octane-js
# pnpm
pnpm add -D cypress-ct-octane-js
# npm
npm i -D cypress-ct-octane-jsAdd cypress-ct-octane-js framework to your cypress.config.{ts,js} file
export default defineConfig({
component: {
devServer: {
framework: "cypress-ct-octane-js",
bundler: "vite",
//...more config if necessary
},
},
});If you use Typescript, you may get a type error when setting the framework property. To fix it, type cast the property to any like this:
framework: "cypress-ct-octane-js" as any,Add the following lines to your component.ts in the cypress directory.
import { mount } from "cypress-ct-octane-js";
declare global {
namespace Cypress {
interface Chainable {
mount: typeof mount;
}
}
}
Cypress.Commands.add("mount", mount);You can now use the cy.mount function to mount octane components in Cypress.
import { Greeting } from "my-octane-components";
it("should display 'Hello World'", () => {
cy.mount(<Greeting text="Hello World!" />);
cy.contains("Hello World!").should("be.visible");
});