test-utils.js should be already transpiled

[Ognian]

The distributed test-utils.js starts with an import statement.
Leading to the following jest error:

Due to this it must be transpiled...
In your test configuration you are including a local file (not in node_modules) therefore it is not a problem...
Since I use react-create-app it is even impossible to use the transformIgnorePatterns option

...

Thanks
Ognian

[thebuilder]

Good catch, will get that fixed.

[thebuilder]

Fixed in v8.22.1 👌

[Ognian]

Thanks a lot for the quick fix!
Unfortunately I still have a problem.
This is how I thought it would work:

it(`some test`, () => {
      mockAllIsIntersecting(false)
      const tree = renderer
        .create(
          <XXXX
          />
        )
        .toJSON()
      expect(tree).toMatchSnapshot()
    })

where XXXX is a component which uses deep inside and often InView
the error I get is:

Not sure if I'm using it the right way...
Any ideas?

Ognian

[thebuilder]

Two issues:

1. The mockAllIsIntersecting only affects existing observers. So you should call it after rendering. It also shouldn't be necessary to to call it with false, since the observers are outside the view by default.
2. The error, as it also explains, is because you aren't setting the ref on a DOM node. The IntersectionObserver needs a HTMLElement it can observe, and it gets that from the `ref.

I'd also recommend using react-testing-library instead of creating a Snapshot test.

[Ognian]

But I'm using it this way:

 <InView as="div" onChange={this.handleInView}>

so everything should happen in InView ....
and in the app everything works as expected; only the tests fail....

[Ognian]

OK for everyone else stumbling on this:
If you need snapshot testing, you can "simply" mock InView:

jest.mock('react-intersection-observer', ()=>({
  InView: 'mockInView'
}))

What I also found out is, that sometimes snapshots (the .snap file) can get "corrupt", resulting in an endless running test -> remove it ...