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!

---

- Problem
- Solution
- Contributing
- Installation
- Setup
- Asymmetric matchers
- API
- .toBeColor(color)
- expect.color(color)
- .toBeIndistinguishableFrom(color)
- expect.indistinguishableFrom(color)
- LICENSE

Installation

With npm:

``sh
npm install -D jest-color
`

With yarn:

`sh
yarn add -D jest-color
`

Setup

$3

Add jest-color to your Jest setupFilesAfterEnv configuration. See for help

`json
"jest": {
"setupFilesAfterEnv": ["jest-color"]
}
`

Asymmetric matchers

All matchers described below have asymmetric variants. Example:

`js
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.

`js
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.

`js
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.

`js
`

#### expect.indistinguishableFrom(color)

The asymmetric variant of .toBeIndistinguishableFrom.

`js
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