diff --git a/jest/customMatchers.js b/jest/customMatchers.js index 09fd808c9..e5e5b4348 100644 --- a/jest/customMatchers.js +++ b/jest/customMatchers.js @@ -1,3 +1,13 @@ +import prettier from 'prettier' +import diff from 'jest-diff' + +function format(input) { + return prettier.format(input, { + parser: 'css', + printWidth: 100, + }) +} + expect.extend({ // Compare two CSS strings with all whitespace removed // This is probably naive but it's fast and works well enough. @@ -6,16 +16,41 @@ expect.extend({ return str.replace(/\s/g, '').replace(/;/g, '') } - if (stripped(received) === stripped(argument)) { - return { - message: () => `expected ${received} not to match CSS ${argument}`, - pass: true, - } - } else { - return { - message: () => `expected ${received} to match CSS ${argument}`, - pass: false, - } + const options = { + comment: 'stripped(received) === stripped(argument)', + isNot: this.isNot, + promise: this.promise, } + + const pass = stripped(received) === stripped(argument) + + const message = pass + ? () => { + return ( + this.utils.matcherHint('toMatchCss', undefined, undefined, options) + + '\n\n' + + `Expected: not ${this.utils.printExpected(format(received))}\n` + + `Received: ${this.utils.printReceived(format(argument))}` + ) + } + : () => { + const actual = format(received) + const expected = format(argument) + + const diffString = diff(expected, actual, { + expand: this.expand, + }) + + return ( + this.utils.matcherHint('toMatchCss', undefined, undefined, options) + + '\n\n' + + (diffString && diffString.includes('- Expect') + ? `Difference:\n\n${diffString}` + : `Expected: ${this.utils.printExpected(expected)}\n` + + `Received: ${this.utils.printReceived(actual)}`) + ) + } + + return { actual: received, message, pass } }, })