Очистка памяти тестового кода фермента

Question

Я рассмотрел множество примеров тестирования приложений для реактивной и редукционной приложений с использованием Enzyme и Jest, и очень немногие даже упоминают об очистке кода. При использовании shallow или mount вам не нужно явно вызывать unmount или detach, чтобы попытаться сохранить объем памяти и время работы?

Answer 1

В некоторых случаях мы будем использовать detach для очистки. Давайте сначала рассмотрим простой случай shallow и mount.

Назначение переменным

В этом «простом» случае мы просто назначаем рендер для var / const / let.

Если мы посмотрим (урезанный) пример использования Jest и Enzyme из Enzyme Github .

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.lengthOf(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });
});

Мы видим, как вызывается метод shallow, а результат присваивается const. В результате получается объект ShallowWrapper.

Поскольку const имеет область действия блока , когда выполнение выходит из блока, в котором он определен - в этом случае функция тестовой стрелки - , механизм Javascript автоматически освобождает ShallowWrapper память.

Именно поэтому нам не нужно беспокоиться о размонтировании - это используется только для тестирования определенных методов жизненного цикла компонента.

Прикрепление компонентов к DOM

Мы также можем прикрепить компоненты к DOM.

Если мы посмотрим на тестовый пример, автоматически сгенерированный create-react-scripts.

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

В этом примере не используется энзим, но это та же концепция, что и при использовании attachTo в функции энзима mount.

Мы видим, что наш Компонент присоединяется к div в документе, а затем ReactDOM.unmountComponentAtNode вызывается для очистки. Это именно то, что detach называет.

Нам нужно выполнить эту очистку, потому что ссылка на наш обработанный Компонент существует вне области нашего блока и, следовательно, не будет освобождена, когда выполнение выйдет из этого блока.