README
jest-color
🃏🎨
A bundle of Jest matchers for testing and asserting colors
Problem
Testing colors with Jest is not simple. It should be as easy as .toBeColor
Solution
jest-color aims to add additional matchers to Jest's default ones that does just that
Contributing
If you've come here to help contribute - Sweet! Thanks! Take a look at the contributing and read the Code of Conduct docs as a way of getting started!
Installation
With npm:
npm install -D jest-color
With yarn:
yarn add -D jest-color
Setup
Jest >v24
Add jest-color
to your Jest setupFilesAfterEnv
configuration. See for help
"jest": {
"setupFilesAfterEnv": ["jest-color"]
}
Asymmetric matchers
All matchers described below have asymmetric variants. Example:
test("symmetric vs asymmetric", () => {
expect("#7db2ceff").toBeColor(125, 178, 206);
expect("#7db2ceff").toEqual(expect.color(125, 178, 206));
});
API
.toBeColor(object)
Accepts anything that color
accepts and compares them to one another. It must be the exact same color.
expect("#7db2ceff").toBeColor(125, 178, 206); // true
expect("#72510e").toBeColor(114, 81, 14, 1); // true
expect([157, 204, 97]).toBeColor("#9dcc61"); // true
expect("hwb(60, 3%, 60%)").toBeColor("rgb(102, 102, 8)"); // true
expect("#cccc0866").toBeColor("hwb(60, 3%, 20%, 0.4)"); // true
expect("hsla(114, 60%, 39%, 0.32)").toBeColor([52, 159, 40, 0.32]); // true
expect("#7db2caaa").not.toBeColor(125, 178, 202); // true
expect.color(color)
The asymmetric variant of .toBeColor
.
expect("#7db2ceff").toEqual(expect.color(125, 178, 206)); // true
expect("#72510e").toEqual(expect.color(114, 81, 14, 1)); // true
expect([157, 204, 97]).toEqual(expect.color("#9dcc61")); // true
expect("hwb(60, 3%, 60%)").toEqual(expect.color("rgb(102, 102, 8)")); // true
expect("#cccc0866").toEqual(expect.color("hwb(60, 3%, 20%, 0.4)")); // true
expect("hsla(114, 60%, 39%, 0.32)").toEqual(expect.color([52, 159, 40, 0.32])); // true
expect("#7db2caaa").toEqual(expect.not.color(125, 178, 202)); // true
.toBeIndistinguishableFrom(color)
Also accepts anything that color
accepts. It compares them using THE POWER OF SCIENCE CIEDE2000 and if the Delta E is less than 1 it returns true.
expect.indistinguishableFrom(color)
The asymmetric variant of .toBeIndistinguishableFrom
.
expect([50, 158, 38]).toEqual(expect.indistinguishableFrom(49, 155, 37)); // true
expect([217, 223, 214]).toEqual(
expect.indistinguishableFrom("rgb(216, 222, 215)"),
); // true
expect("hwb(110, 84%, 13%)").toEqual(
expect.indistinguishableFrom("hwb(111, 84%, 13%)"),
); // true