Jump to content
Search Community
Mahmoud16 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,

 

Not sure if i'm missing something or if I'm doing something incorrect. But I'm trying to run simple unit tests with Jest and Enzyme on my component that uses gsap for a search input box. The component works perfectly fine, animation is great too. But whenever i run my tests, and specifically this line 

component.find('#close').'click'

i get ERROR CANNOT TWEEN A NULL TARGET

 

the close button calls this function below: 

animation.hideSearch(this.searchInput)

animation.hideSearch is: 

hideSearch(target){
    return TweenMax
        .to(target, duration, {
            opacity: 0,
            display: 'none'
        })
},

And finally here is my search input: 

<input id='search-input' className={styles.input} value={this.state.searchValue} onChange={this.handleSearch} ref={div => this.searchInput = div}/>

Is there anything i need to configure in order to get jest to ignore the gsap animation?

 

Any help is appreciated. thanks!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

I'm not a big fan of testing this type of stuff in React, therefore I'm not in any way an expert in using Enzyme. I know my way around Jest, but I believe the issue is coming from the enzyme side of it.

 

Right now I'm using React Testing Library for testing React apps and components.

 

As I said I don't know how Enzyme works in terms of checking DOM nodes being present in the rendered side of the testing but basically when that specific method is running this.searchInput is null, whatever that is in your component. I assume that is pointing to a ref in the JSX part of your code and you're creating a reference in the component's constructor, something like this (an extremely over-simplified version of your component of course):

 

class MyComponent extends Component {
  constructor(props){
    super(props)
    this.searchInput = null;
  }
  
  render(){
    return <div>
      <input ref={input => this.searchInput = input} type="text" />
    </div>;
}

 

If I was you I'd start by checking the component's ref object in order what's in there when running the tests and see how Enzyme deals with mocking and creating some sort of DOM representation when running the tests in order to do the tests and assertions to it.

 

Finally I'd recommend going to Reactiflux's discord app and see the testing channel in order to get some support on how to proceed in this particular case and check what enzyme is putting there.

 

When you have more insight on it, please report back, it will certainly be helpful for other users in the future.

 

Happy Tweening!!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...