CODEWITHSUNDEEP
cypresschaiassertion
Akshay Vijay Jain
Akshay Vijay Jain

Reputation: 15935

Cypress error The chainer colored was not found. Could not build assertion

Below is my code, when I use this cypress test, I am getting the error Cypress error The chainer colored was not found. Could not build assertion.

import chai from 'chai';
import chaiColors from 'chai-colors';
chai.use(chaiColors);

const toasts = [
  { _id: '1', message: 'success toast notification', type: 'success' },
  { _id: '2', message: '2 success toast notification', type: 'error' },
  { _id: '3', message: 'error toast notification', type: 'error' },
];
describe('Toast.cy.tsx', () => {
  it('Toast component renders toasts properly', () => {
    themedMount(<Toast toasts={toasts} />);
    toasts.forEach((t) => {
      const toastElement = cy.contains(t.message);
      toastElement
        .should('have.css', 'background-color')
        .and('be.colored', '#fbcfc8');
    });
  });
});

Upvotes: 2

Views: 2344

Answers (1)

Fody
Fody

Reputation: 31904

Cypress modifies chai to use it in the .should() and .and() commands.

If you import chai and apply chaiColors to that instance, it will not be available in the Cypress commands.

Remove import chai from 'chai' and it should work.

import chaiColors from 'chai-colors';
chai.use(chaiColors);                   // apply plugin to the global chai

Use onecolor instead

Please also see my note here Test color with chai-colors plugin about flaky color assertions due to rgb and rgba differences.

Importing and directly using the onecolor library is a better idea because it has conversion methods you can apply.

Upvotes: 4

Related Questions