8623

this.refs is undefined for shallow tests using enzyme on React native

Question:

I have a component which has 2 input text fields.

In the componentDidMount() method I am calling this.refs.password.focus();

There is some amount of tricky business logic sitting inside my componentDidMount but while doing a shallow unit test on componentDidMount, I get error

<blockquote>

cannot access password of undefined

</blockquote>

I checked the instance of the shallow component and see that this.refs is <strong><em>undefined</em></strong>. My question is how can we set this through tests?

Shallow has a second parameter which we can pass called as the context where we can set the context for unit testing but it seems to be doing nothing.

Any help around this area would be highly appreciated.

Answer1:

The easiest approach for this problem would be to set the refs through the instance.

const component = shallow(<Component />) const instance = component.instance() instance.refs = { password: { getRenderedComponent: jest.fn(() => ({ focus: jest.fn })) } }

Answer2:

shallow does not have a ref method. You need to use mount to test the rendering in its entirety.

References: API docs: <a href="https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md" rel="nofollow">https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md</a> <a href="https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md" rel="nofollow">https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md</a>

Issue: <a href="https://github.com/airbnb/enzyme/issues/316" rel="nofollow">https://github.com/airbnb/enzyme/issues/316</a>

Recommend

  • Vim remap square brackets in Portuguese keyboard layout
  • How to reset git pushed first commit into wrong new repo?
  • Covert RFC3339 DateTime to Date in java [duplicate]
  • Displaying XML file data in a HTML table
  • Reveal Icon Button - Bootstrap 3
  • How to detect beginning of line, or: “The name 'getCharPositionInLine' does not exist in t
  • Retrieve 3rd MAX salary in Hive
  • ODBC connection to an .accdb file
  • How to add blur effect into UIImage with Swift? [duplicate]
  • What is the diff. between default.properties and project.properties?
  • Making query to find nearest multiple(Lat,Long) from the single(Lat,Long)
  • Access to database zend framework
  • Use awk to convert GPS Position to Latitude & Longitude
  • How to organize this layout with overflows?
  • Wicket - getting body of markup element
  • Using loops in Jasmine (with injected service)
  • Auto send email based on the time and email address in database
  • internal javascript not works in angular2
  • Defer unused CSS
  • Create .java file and compile it to a .class file at runtime
  • Circular Left Rotation Algorithm in C#
  • Run a form (insert/update/delete) from within a div using jquery
  • Julia 1.0 UndefVarError - Scope of Variable
  • Add checkbox dynamically using angular 2
  • Copy and paste data from multiple workbooks to a worksheet in another Workbook
  • What is the difference between dynamically creating a script tag and statically embed a script tag?
  • Ajax call on Multiple selection in Select box
  • When to use the tag in the head and body section of a html page? [duplicate]
  • Possible to set default CloudKit container not based on application name?
  • How to make 100% div height between header and footer?
  • Neo4j…how to get a visual representation of my data?
  • Support of :after in IE7
  • Cloud Code: Creating a Parse.File from URL
  • How do I add a mouse over tooltip to an Image using .DrawImage()
  • Google App Engine Datastore: Dealing with eventual consistency
  • ssh remote server login script
  • How to call different template for different category archive page in woocommerce