Не удается установить свойство в тесте

Question

Я запускаю тест, выдает ошибку:

TypeError: Невозможно установить свойство 'background' из неопределенного

   6 | componentDidMount() {
   7 |     const element = ReactDOM.findDOMNode(this)
>  8 |     element.style.background = 'grey'
     |     ^
   9 |   }

компонент кода:

import React, { Component } from 'react';
import ReactDOM from 'react-dom'

class Test extends Component {

  componentDidMount() {
    const element = ReactDOM.findDOMNode(this)
    element.style.background = 'grey'
  }
  render() {
    return (
      <div className="Test">
        test
      </div>
    );
  }
}

export default Test;

тесты кода:

import React from 'react';
import Link from './Test';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer
    .create(<Test/>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Это довольно простой компонент, и, как я понимаю, шутка не может достичь DOM, как мне решить эту проблему?Самое простое, что я подумал сделать это следующим образом:

element.style && (element.style.background = 'grey')

Answer 1

Прежде всего, обратите внимание, что ReactDOM.findDOMNode doc сообщает:

findDOMNode - это аварийный штрих, используемый для доступа к базовому узлу DOM.В большинстве случаев использование этого аварийного люка не рекомендуется, поскольку оно пробивает абстракцию компонента.Это устарело в StrictMode.

, поэтому следует избегать использования findDOMNode, и использование ref является предпочтительным.

---

Сказав это,причина, по которой тест не пройден, заключается в том, что вы используете react-test-renderer.

Обзор в документах гласит, что react-test-renderer ...

... позволяет легко получить снимок иерархии представления платформы (аналогично дереву DOM), отображаемой компонентом React DOM или React Native, без использования браузера или jsdom.

В другихсловами, react-test-renderer дает "иерархию представления платформы" , аналогичную дереву DOM , но не предоставляет фактическое дерево DOM (или имитированное дерево DOM, например jsdom).

Такв этом случае element на самом деле не является элементом DOM и не содержит определения для style, в результате которого element.style.background выдает ошибку.

---

Чтобы проверить этоПри написании кода вам нужно будет использовать что-то, что отображается в дереве DOM (или имитированном дереве DOM).

Один из наиболее коммодn способов сделать это - использовать mount из Enzyme , который выполняет полный DOM-рендеринг с использованием имитированного DOM, предоставленного jsdom:

import React from 'react';
import Test from './Test';
import { mount } from 'enzyme';

it('renders correctly', () => {
  const wrapper = mount(<Test />);  // renders successfully
  ...
});