Some style colors ignored

[PavelPZ]

I am using react-testing-library 5.2.3 with JEST 23.6.0 and REACT 16.7.0-alpha.0.

I have problem with this code...

describe("COLR PROBLEM", () => {
  let comp = render(<div style={{ color: 'lightblue', backgroundColor: 'blue' }} />)
  let { color, backgroundColor } = (comp.container.firstElementChild as HTMLElement).style
  comp = render(<div style={{ color: 'blue', backgroundColor: 'lightblue' }} />)
  let { color: color2, backgroundColor: backgroundColor2 } = (comp.container.firstElementChild as HTMLElement).style
  console.log({ color, backgroundColor, color2,  backgroundColor2 })
})

which logs following:
Object {color: "", backgroundColor: "blue", color2: "blue", backgroundColor2: ""}

It seems that colors other than basic one (with light or dark prefix) are ignored.

Colors is lost during

_reactDom.default.render(ui, container);

at line 51 in node_modules\react-testing-library\dist\index.js

[vitalyso]

I've done research for this issue and can say for sure the root of the problem is in the cssstyle module, they allow only limited amount of color aliases.

The simplified dependency chain looks like below (actually it's more complicated):
react-testing-library => jest => jsdom => cssstyle

So if you need more colors to be available, I encourage you to create a PR to the cssstyle repository and wait when all the libraries will make updates. Hope it helped 🙂

[PavelPZ]

Ok, thanks for hint...