Тестирование компонента React с глобальной зависимостью

Я включил зависимость JS (Foo.js) в свой файл index.html. Когда я вызываю Foo.js в своем компоненте React, он находит конструктор в глобальном пространстве имен и создает его экземпляр. Это прекрасно работает, когда я его развертываю, но когда я собираюсь построить тест вокруг Component.js, тест не может найти Foo.js

<!--Index.html-->
<head>
<script src="Foo.js"></script>
</head>

// Component.js
var bar = new Foo(); // Works in deployment but not in Jest tests

При запуске моего теста я получаю эту ошибку:

RefererenceError: Foo не определен

Теперь я подумал, что буду умнее и в своем файле Component.js объявлю Foo как window.Foo, что помогло избавиться от неопределенной зависимости в моих тестах Jest.

// Component.js
var Foo = window.Foo;
var bar = new Foo();

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

TypeError: undefined не является функцией

Я считаю, что моя ошибка все еще исходит из того, что Jest неправильно издевается над зависимостью от объекта окна. Мне не нужно тестировать зависимость, мне просто нужно, чтобы она была определена, чтобы я мог приступить к написанию тестов для остальной части Компонента. У кого-нибудь есть мысли о том, что я могу делать неправильно?


reactjs jestjs requirejs
person jonullberg    schedule 22.09.2015    source источник
comment
похоже, вы вызываете какую-то функцию из неопределенной переменной. Можете ли вы открыть firebug/chrome dev, чтобы проверить, какая переменная является неопределенной?   -  person Ryan Huynh.    schedule 23.09.2015

Ответы (1)


arrow_upward
1
arrow_downward

Итак, я, наконец, понял, как это исправить. В среде моего браузера и среде тестирования у меня есть два совершенно отдельных оконных объекта. В моем тесте, прежде чем я потребую в своем компоненте, я должен установить для window.Foo анонимную функцию. Это будет выглядеть так:

// Component.js
var bar = new Foo(); // Works in browser but not in test
// ...Rest of code

// Component.test.js
describe('Component.js', function() {
  let Component;
  beforeEach(function() {
    window.Foo = function() {};
    Component = require('./Component.js');  // When it requires in component, 
      // it will now have Foo declared on the window object
  });
});

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

person jonullberg    schedule 23.09.2015