Невозможно игнорировать блок в компонентах класса React с istanbul ignore рядом с охватом

Question

Я пишу модульные тесты для клиентского веб-сайта, построенного с использованием Gatsby. Мне нужно обеспечить 100% покрытие. Я не могу вносить серьезные изменения в исходный код, так как я не создавал сайт и не владею кодом, чтобы не нарушить пользовательский интерфейс (я не выполняю снимки или тестирование пользовательского интерфейса).

Я искал ответ в проблемах Github, Stack Overflow и т. Д. c, и, похоже, есть повторяющиеся особенности с использованием /* istanbul ignore next */.

С Gatsby вы должны проверить ссылки в window для любых скриптов или веб-API и условно игнорируйте этот код, если typeof window === 'undefined', поскольку Гэтсби статически создает сайт на сервере. Чтобы добавить покрытие к этим операторам, ветвям, функциям и строкам, я смог использовать /* istanbul ignore next */. Однако у меня проблемы с конкретным компонентом класса.

Я пробовал использовать /* istanbul ignore next */ до componentDidMount и componentDidUpdate, только внутри определений жизненного цикла, между именем функции и круглыми скобками, перед блоки if в жизненных циклах. Я также пробовал использовать /* istanbul ignore if */.

Независимо от того, какой код я использую, я не могу получить покрытие. Я открыт для любых предложений, будь то лучший подход к использованию операторов ignore или подсказка о способах создания тестов, которые помогут. Спасибо за вашу помощь!

Вот необратимые (пока) строки компонента:

карьера. js

  componentDidMount() {
    this.context.setHeaderTheme(`bright`)
    /* istanbul ignore next */
    if (typeof window !== `undefined` && typeof document !== `undefined`) {
      if (!window.Grnhse) {
        const script = document.createElement(`script`)
        script.setAttribute(
          `src`,
          `<hidden/path/for/security/purposes>`
        )
        script.setAttribute(`width`, `100%`)
        script.onload = () => window.Grnhse && window.Grnhse.Iframe.load()
        document.body.appendChild(script)
      } else {
        if (window.Grnhse) {
          window.Grnhse.Iframe.load()
        }
      }
    }
  }

  componentDidUpdate() {
    /* istanbul ignore next */
    if (
      !this.scrollDone &&
      typeof window !== `undefined` &&
      window.location.search.includes(`gh_jid`) &&
      this.greenhouseContainer
    ) {
      this.scrollDone = true
      window.scrollTo({
        top: this.greenhouseContainer.offsetTop,
        behavior: `smooth`,
      })
    }
  }  

Answer 1

Думаю, я нашел ответ, который работает.

В jest.config.js с Jest версии 26.0 вы можете настроить coverageProvider на babel (по умолчанию) или v8 (считается экспериментальным ).

Я изменил на v8 и установил v8-to-istanbul:

npm i --save-dev v8-to-istanbul

Это обеспечивает некоторые новые функции, которые, кажется, творит чудеса. Я сразу получил 100% покрытие всего, кроме functions.

    /* c8 ignore next 16 */
    if (typeof window !== `undefined` && typeof document !== `undefined`) {
      if (!window.Grnhse) {
        const script = document.createElement(`script`)
        script.setAttribute(
          `src`,
          `...`
        )
        script.setAttribute(`width`, `100%`)
        script.onload = () => window.Grnhse && window.Grnhse.Iframe.load()
        document.body.appendChild(script)
      } else {
        if (window.Grnhse) {
          window.Grnhse.Iframe.load()
        }
      }
    }

    /* c8 ignore next 13 */
    if (
      !this.scrollDone &&
      typeof window !== `undefined` &&
      window.location.search.includes(`gh_jid`) &&
      this.greenhouseContainer
    ) {
      this.scrollDone = true
      window.scrollTo({
        top: this.greenhouseContainer.offsetTop,
        behavior: `smooth`,
      })
    }

Пожалуйста, ознакомьтесь с этим пакетом, если вы столкнетесь с подобной проблемой: https://openbase.io/js/v8-to-istanbul/documentation#ignoring -the-next- строка

Более того, я нашел метод для проверки того, что script было добавлено к DOM на componentDidMount с @testing-library/react и jest:

  it(`adds script to body`, async () => {
    render(<CareersWithProvider />)
    const Grnhse = await waitFor(() => screen.findAllByTestId(`Grnhse`))
    expect(Grnhse).not.toBeNull()
  })