How to use react-addons-test-utils - 10 common examples

it('validates non-numeric values in integer field', () => {


        var ResponseFieldInstance = TestUtils.renderIntoDocument(
            
        );

        var input = TestUtils.findRenderedDOMComponentWithTag(ResponseFieldInstance, 'input');

        // simulate changing input
        TestUtils.Simulate.change(
            input,
            {
                target: {
                    setCustomValidity: setCustomValidity,
                    value: 'a'
                }
            }
        );

it('uses the initial value for the left offset', () => {
    // Test elements don't actually get rendered so all of the offsets are 0.
    const root = renderIntoDocument();
    root.animateLeft = 100;
    root.setIconPosition();
    expect(root.animateIcon.style.transform).toEqual('translateX(-100px)');
  });

it('should trigger select', function() {
    var input = TestUtils.findRenderedDOMComponentWithTag(
      search, 'input'
    );
    var ratio = {name: 'Patanjali', id: 7, url: '/ramdev/'};
    api.setResponse('/api/ratios/search/?q=Patanjali',
      JSON.stringify([ratio]));
    input.value = 'Patanjali';
    TestUtils.Simulate.change(input, {target: {value: 'Patanjali'}});
    jest.runAllTimers(); // debounce;
    return search.req.then(() => {
      TestUtils.Simulate.keyDown(input, {key: "Enter", keyCode: 13, which: 13});
      expect(dummy).toBeCalledWith(ratio);
    })
  });
});

const el = T.renderIntoDocument(
    <textarea required="{required}" placeholder="{placeholder}" name="{name}" id="{id}" disabled="{disabled}">  )

  // Get the `&lt;textarea&gt;`.
  const textarea = T.findRenderedDOMComponentWithTag(el, 'textarea')

  // ===================
  // Test for existence.
  // ===================

  it('exists in the page', function () {
    expect(T.isCompositeComponent(el)).toBe(true)
  })

  // ==================
  // Test for textarea.
  // ==================

  it('is disabled', function () {
    expect(textarea.disabled).toBe(true)
  })</textarea>

const target = '_blank'
  const text = 'GO'
  const title = 'Example Title'

  // Insert the component into DOM.
  const el = T.renderIntoDocument(
    <button title="{title}" href="{href}">
  )

  // Get button.
  const button = T.findRenderedDOMComponentWithClass(el, 't7-form__button')

  // ===================
  // Test for existence.
  // ===================

  it('exists in the page', function () {
    expect(T.isCompositeComponent(el)).toBe(true)
  })

  // =============
  // Test for tag.
  // =============

  it('is a link tag', function () {
    const x = button.tagName.toLowerCase()
</button>

it('Should exist as a React Component', () => {
    const button1 = shallow(<button>
                              Button
                            </button>)
    assert.ok(ReactTestUtils.isCompositeComponent(button1, Button))
  // TODO the rest of components
  })
})

it('should return the root component instance from renderer', function() {
    const renderer = createRenderer();
    renderer.render();

    const instance = getMountedInstance(renderer);

    // Since this is a component instance and *not* shallow render output we need
    // to use the existing React TestUtils.
    expect(isCompositeComponentWithType(instance, OtherComponent)).toBe(true);
  });

// id
      case '#':
        els = TestUtils.findAllInRenderedTree(self.instance, function(component){
          if (component.id === subselector.slice(1)){
            return true
          }
        })
        foundElements.push( Array.isArray(els) ? els : [els] )
        break

      // data attribute
      case '[':
        var attributeName = _.first( subselector.slice(1,-1).split('=') )
        var attributeValue = subselector.slice(1,-1).split('=').slice(1).join('=').replace(/^"(.*)"$/, '$1')

        els = TestUtils.findAllInRenderedTree(self.instance, function(component){
          if (component.getAttribute) {
            var val = component.getAttribute(attributeName)
            if (val === attributeValue || (val === 'true' && attributeValue === '')){
              return true
            }
          }
        })

        foundElements.push( Array.isArray(els) ? els : [els] )
        break

      // tag
      default:
        els = TestUtils.scryRenderedDOMComponentsWithTag(self.instance, subselector)
        foundElements.push( Array.isArray(els) ? els : [els] )
        break

it('should add a new todo when pressing enter', function() {
      const node = $component.find('.new-todo')[0];

      // TODO: this exposes too much of the internals; figure out a way to write
      // tests without knowing all of this
      Simulate.change(node, { target: { value: 'buy milk' } });
      Simulate.keyDown(node, { keyCode: ENTER });

      expect($component.find('.todo')).to.have.length(1);
      expect($component.find('.todo').text()).to.equal('buy milk');
    });

it('is an element', function() {
    var TestUtils = require('react-addons-test-utils');
    var Appbar = require('../../app/client/components/Appbar');

    assert.equal(true,TestUtils.isElementOfType(,Appbar));

    // // Render a checkbox with label in the document
    // var checkbox = TestUtils.renderIntoDocument(
    //   
    // );

    // // Verify that it's Off by default
    // var label = TestUtils.findRenderedDOMComponentWithTag(
    //   checkbox, 'label');
    // assert.equal(label.getDOMNode().textContent, 'Off');

    // // Simulate a click and verify that it is now On
    // var input = TestUtils.findRenderedDOMComponentWithTag(
    //   checkbox, 'input');
    // TestUtils.Simulate.change(input);
    // assert.equal(label.getDOMNode().textContent, 'On');