Jest + react-testing-library failures

[DmacLoyaltyOne]

I'm trying to do a simple unit test with Jest + react-testing-library but I'm getting errors when trying to render your component.

To reproduce: Get any boilerplate repo with Jest + react-testing-library

Do I need to setup any mocks in order to use this component in a jest environment?
I would think not. Perhaps its something related to my setup, but I have been able to reproduce on a very simple babel + jest setup.

import React from 'react'
import { render, waitForElement } from 'react-testing-library'
import ReactFullpage from '@fullpage/react-fullpage'

describe('<FullPages />', () => {
  it('FullPages', async () => {
    const { debug, getByText, getByTestId } = render(
      <div data-testid="test">
        <ReactFullpage
          navigation
          render={({ fullpageApi }) => {
            return (
              <ReactFullpage.Wrapper>
                <div className="section">Test</div>
                <div className="section">greeat</div>
              </ReactFullpage.Wrapper>
            )
          }}
        />
      </div>
    )
    await waitForElement(() => getByTestId('test'))

  })
})

Getting:

TypeError: Cannot read property 'indexOf' of undefined



      at new <anonymous> (node_modules/@fullpage/react-fullpage/dist/react-fullpage.js:149:5728)
      at ReactFullpage.init (node_modules/@fullpage/react-fullpage/dist/react-fullpage.js:767:785)

Other relevant errors:

console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Uncaught [TypeError: Cannot read property 'destroy' of undefined]
          at reportException (/Users/dmcgregor/Code/GOAT/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at commitUnmount (/Users/dmcgregor/Code/GOAT/node_modules/react-dom/cjs/react-dom.development.js:16301:11) TypeError: Cannot read property 'destroy' of undefined
          at ReactFullpage.destroy (/Users/dmcgregor/Code/GOAT/node_modules/@fullpage/react-fullpage/dist/react-fullpage.js:768:201)
          at ReactFullpage.componentWillUnmount (/Users/dmcgregor/Code/GOAT/node_modules/@fullpage/react-fullpage/dist/react-fullpage.js:767:191)

console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Uncaught [TypeError: Cannot read property 'indexOf' of undefined]

[cmswalker]

Thanks for reporting this, very annoying, sorry about that!

I'll try to get this resolved in the next few days.

[cmswalker]

Fixed this on dev branch, even added your example test as a base-case unit test

https://github.com/alvarotrigo/react-fullpage/blob/dev/__tests__/react-fullpage.test.js

The issue was that because jsdom mocks out window, the bundle was trying to give you the document/window dependent component, when it should have been giving you the SSR component which just passes content through. I'll have this released shortly.

Something to keep in mind tho, (and I think you're already leaning this way since you're using react-testing-library), you won't be able to do nitty-gritty unit testing without a real document/window. Much of the way fullpage is built is very reliant on real browser APIs that jsdom will never support. However you can always do standard assertions that your render function passes through. If you do need more automate coverage and want to check for real end-user behavior, I'd suggest going w/ cypress

[DmacLoyaltyOne]

Very nice work @cmswalker !
I would also add 2 more assertions as well: (see bottom)

const { getByText, getByTestId } = render(
      <div data-testid="test">
        <ReactFullpage
          navigation
          render={({ fullpageApi }) => {
            return (
              <ReactFullpage.Wrapper>
                <div className="section">Section 1</div>
                <div className="section">Section 2</div>
              </ReactFullpage.Wrapper>
            )
          }}
        />
      </div>
    );

  await waitForElement(() => getByTestId('test'));
  await waitForElement(() => getByText('Section 1'));
  await waitForElement(() => getByText('Section 2'));

[cmswalker]

done 1a61f0b