Как выполнить unittest с css: фокус в реакции с шуткой - PullRequest
0 голосов
/ 06 мая 2020

У меня есть css кусок, который меняет цвет фона элемента, когда он сфокусирован / выбран. Он работает в браузере, однако я не могу проверить его в unittest:

Файл css выглядит так:

// item.css
.item {
  background-color: #ff0000;
}
.item:focus {
  background-color: #0000ff;
}

И мой компонент реакции выглядит так: элемент будет сфокусирован, когда пользователь нажмите табуляцию.

// link.ts
const Link = () => {
  return (
    <a href="#item" class="item" tabIndex={1}> Item Link </a>
  )
}
export default Link;

В модульном тесте:

// link_test.ts
it("show item color change", () => {
  wrapper = shallow(<Link />);
  expect(wrapper.find(".item").contains("background-color: #ff0000")).toBe(true);

  wrapper.find(".item").simulate("keyDown", { keyCode: 9 });
  expect(wrapper.find(".item").contains("background-color: #0000ff")).toBe(true);
});

Оба этих теста не пройдут из-за того, что свойство css всегда не найдено.

...