jest-color

A bundle of Jest matchers for testing and asserting colors

Usage no npm install needed!

<script type="module">
  import jestColor from 'https://cdn.skypack.dev/jest-color';
</script>

README

jest-color

🃏🎨

A bundle of Jest matchers for testing and asserting colors


Build Status version downloads MIT License PRs Welcome

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

LICENSE

MIT