tanner-west

const getByA11yLabel = (wrapper, value) => wrapper.findWhere((node) => 
  node.prop('accessibilityLabel') === value);

const myButton = getByA11yLabel(wrapper, "my-button")

tanner-west

  it('Should increment counter when button is pressed', () => {
    const button = getByTestId(wrapper, 'increment-counter');
    expect(wrapper.state('counter')).toEqual(0);

    button.props().onPress();
    expect(wrapper.state('counter')).toEqual(1);
  });

tanner-west

it('Should increment counter when button is pressed', () => {
  const button = getByTestId(wrapper, 'increment-counter');

  const counterTextBefore = getByTestId(wrapper, 'counter-text');
  expect(counterTextBefore.props().children).toEqual(0);

  button.props().onPress();

  const counterTextAfter = getByTestId(wrapper, 'counter-text');
  expect(counterTextAfter.props().children).toEqual(1);

tanner-west

describe('<MyInteractiveComponent/>', () => {
  it('should update Name label when input is changed', () => {
    // For a <TextInput />, use onChangeText()
    const editNameInput = getByA11yLabel(wrapper, 'edit-name-input');
    editNameInput.props().onChangeText('Billy Budd');

    const name = getByA11yLabel(wrapper, 'name-text');
    expect(name.props().children).toEqual('Billy Budd');
  });

tanner-west

// Consider a class component with this method that's called when a button is pressed:  
onMultiplierChanged(multiplier) {
  this.setState({product: (parseInt(multiplier) * 12).toString()});
}

// A test utilizing wrapper.instance might look like this:
it('Should update state when onMultiplierChanged method is called', () => {
  const instance = wrapper.instance();

  instance.onMultiplierChanged("12");

tanner-west

// Consider an app with the following two components
const HeadingComponent = (props) => (
  <Text style={{fontWeight: 'bold'}}>{props.title}</Text>
);

const DebugComponent = () => {
  return (
    <>
      <SafeAreaView>
        <ScrollView>

tanner-west

// Consider we update the above test code to do this...
const wrapper = shallow(<DebugComponent />);
const textWrapper = wrapper.find('Text')
console.log(textWrapper.debug())

// ...and see the following output
/* 
<Text>
Please test me
</Text>

tanner-west

const textWrapper = wrapper.find('Text')
console.log("0: \n", textWrapper.at(0).debug())
console.log("1: \n", textWrapper.at(1).debug())

// Output:

// 0: 
// <Text>
//  Please test me
// </Text>

tanner-west

import { useRef, useState } from "react"

export default function RefComponent() {
    const counterRef = useRef(0)
    const [text, setText] = useState()
    return (
        <div>
            <p>counterRef: {counterRef.current}</p>
            <p>text: {text}</p>
            <button onClick={() => counterRef.current++}>Increment</button>

tanner-west

import { useState } from "react"

export default function StateComponent() {
    const [counter, setCounter] = useState(0)
    const [text, setText] = useState()
    return (
        <div>
            <p>counter: {counter}</p>
            <p>text: {text}</p>
            <button onClick={() => setCounter(counter + 1)}>Increment</button>