Юнит тест - Link in React с использованием Jest & Enzyme - PullRequest
Новая
       93

Юнит тест - Link in React с использованием Jest & Enzyme

0 голосов
/ 05 декабря 2018

У меня есть ссылка внутри компонента.Я указал путь к маршруту в app.js.

Когда я пытался найти элемент управления Link внутри компонента, используя Swallow и Mount, он выдает ошибку.

Может кто-нибудь поделиться примером, чтобы найти кнопку ссылки внутри компонента код 

 it('includes link to Next Exam', () => {
        const home = shallow(
          <StaticRouter>
            <ComponentForm/>
          </StaticRouter>,
        );
        expect(home.find(Link)).toHaveLength(1);
      });

1 Ответ

0 голосов
/ 06 декабря 2018

Фермент shallow специально предназначен для того, чтобы НЕ иметь возможность проверять дочерние элементы переданного компонента.Поскольку StaticRouter является родительским компонентом, ComponentForm никогда не будет правильно отображаться, и поэтому Link никогда не будет в представлении.Таким образом, используя shallow, вы можете проверить, что StaticRouter правильно отображает ComponentForm, но вы не можете заглянуть внутрь ComponentForm.

У вас есть два варианта:

Сначала вы можетепросто передайте ComponentForm методу shallow.Вы упомянули в комментариях, что это привело к поломке.Это вероятно, потому что ComponentForm ожидает реквизит от StaticRouter.Вы можете передать их вручную: 

shallow(<ComponentForm routerProp1={'foo'} routerProp2={'bar'} />);

Другой вариант - глубокий рендеринг с использованием Enzyme render.Просто замените shallow на render, и это должно работать.Обратите внимание, что это не рекомендуется по нескольким причинам.Во-первых, как отмечалось в shallow, не выполняя рендеринг shallow, вы, возможно, позволяете себе тестировать вещи, о которых компонент, который вы передаёте, не знает.Например, StaticRouter не знает о ComponentForm Link, поэтому тест для ComponentForm Link не должен зависеть от StaticRouter.Во-вторых, render намного медленнее, чем shallow, поэтому, если у вас много тестов и много компонентов, вы заметите значительное замедление.

...