React-testing-library не отображает вычисленные стили из таблицы стилей - PullRequest
0 голосов
/ 05 января 2020
Сценарий

Basi c таков: у меня есть компонент с width: 100%, как определено в таблице стилей. Поэтому он должен сохранять ширину своего родительского компонента. Я хочу вычислить ширину моего компонента и применить его к своему дочернему компоненту, потому что я рендеринг его через createPortal, и я хотел бы, чтобы они были одинаковой ширины. Это работает в браузере. Однако в моем тесте я обнаружил, что window.getComputedStyle(component) не возвращает ни один из стилей, примененных из таблицы стилей.

Как и предполагалось, я мог бы посмеяться над окном javascript, но я думаю, это на самом деле противоречит тому, что я надеюсь сделать. Я хочу проверить поведение, которое присутствует в браузере: window.getComputedStyle() возвращает все примененные стили, а не только встроенные.

Я поместил простой пример в codeandbox: https://codesandbox.io/s/goofy-wilson-6v4dp

Также здесь:

function App() {
  return (
    <div className="App">
      <WidthComponent />
    </div>
  ) 
}

function WidthComponent() {
  const myInput = useRef();
  const [inputWidth, setInputWidth] = useState(0);

  useEffect(() => {
    console.log("in handleLoad");
    const width = myInput.current ? myInput.current.offsetWidth : 0;
    setInputWidth(width);
  }, [myInput]);

  return (
    <div className="inherited-width" ref={myInput}>
      <div style={{ width: inputWidth }} className="child-element">
        Hello
      </div>
    </div>
  );
}

// test
test("width is inherited", () => {
  const { rerender } = render(
    <div style={{ width: "452px" }}>
      <WidthComponent />
    </div>
  );
  const element = document.getElementsByClassName("child-element").item(0);
  rerender(
    <div style={{ width: "452px" }}>
      <WidthComponent />
    </div>
  );
  expect(window.getComputedStyle(element).width).toBe("452px");
});
.App {
  font-family: sans-serif;
  text-align: center;
  width: 500px;
}

.inherited-width {
  width: inherit;
}

Любая помощь приветствуется.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...