How to use react-dom - 10 common examples

// Use Array find() for nodes with 'view:' in the id, and check for ok (truthiness) instead of null since
    // not found nodes will return undefined instead of null

    // VA file number input is not visible; error is shown for empty SSN input
    const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag(form, 'input');
    expect(inputs.find(input => input.id === 'root_veteranSocialSecurityNumber')).to.be.ok;
    expect(inputs.find(input => input.id === 'root_vaFileNumber')).not.to.be.ok;

    const errors = ReactTestUtils.scryRenderedDOMComponentsWithClass(form, 'usa-input-error-message');
    expect(errors.find(input => input.id.includes('root_veteranSocialSecurityNumber'))).to.be.ok;

    // Check no-SSN box
    const noSSNBox = ReactTestUtils.scryRenderedDOMComponentsWithTag(form, 'input')
      .find(input => input.id === 'root_view:noSSN');
    ReactTestUtils.Simulate.change(noSSNBox,
      {
        target: {
          checked: true
        }
      });

    // No error is shown for empty SSN input; error is shown for empty file number input
    const newErrors = ReactTestUtils.scryRenderedDOMComponentsWithClass(form, 'usa-input-error-message');
    expect(newErrors.find(input => input.id.includes('root_veteranSocialSecurityNumber'))).not.to.be.ok;
    expect(newErrors.find(input => input.id.includes('root_vaFileNumber'))).to.be.ok;
  });
  it('should submit with no errors with all required fields filled in', () => {

const errors = ReactTestUtils.scryRenderedDOMComponentsWithClass(form, 'usa-input-error-message');
    expect(errors.find(input => input.id.includes('root_veteranSocialSecurityNumber'))).to.be.ok;

    // Check no-SSN box
    const noSSNBox = ReactTestUtils.scryRenderedDOMComponentsWithTag(form, 'input')
      .find(input => input.id === 'root_view:noSSN');
    ReactTestUtils.Simulate.change(noSSNBox,
      {
        target: {
          checked: true
        }
      });

    // No error is shown for empty SSN input; error is shown for empty file number input
    const newErrors = ReactTestUtils.scryRenderedDOMComponentsWithClass(form, 'usa-input-error-message');
    expect(newErrors.find(input => input.id.includes('root_veteranSocialSecurityNumber'))).not.to.be.ok;
    expect(newErrors.find(input => input.id.includes('root_vaFileNumber'))).to.be.ok;
  });
  it('should submit with no errors with all required fields filled in', () => {

}

        // to minim
        const minimNamespace = new Namespace();
        dataStructureElements = minimNamespace.fromRefract(dataStructureElements);

        renderedElement = React.createElement(Attributes, {
          element: dataStructureElements.first,
          dataStructures: dataStructureElements,
          collapseByDefault: false,
          maxInheritanceDepth: undefined,
          includedProperties: 'show',
          inheritedProperties: 'show',
        });

        htmlString = ReactDomServer.renderToStaticMarkup(renderedElement);
      });

},
            // actions
            {
                hello
            }
        );

        const context = {
            store: {
                name: 'ludafa'
            },
            dispatch
        };


        const result = ReactDOM.renderToStaticMarkup(
            <ContextProvider store={context}>
                <Hello age={18} />
            </ContextProvider>
        );

        expect(result).toBe('<div>I am ludafa and I am 18</div>');


    });

async function completeLogin(matrixChat) {
        // we expect a single <Login> component
        const login = ReactTestUtils.findRenderedComponentWithType(
            matrixChat, sdk.getComponent('structures.auth.Login'));

        // When we switch to the login component, it'll hit the login endpoint
        // for proof of life and to get flows. We'll only give it one option.
        httpBackend.when('GET', '/login')
            .respond(200, {"flows": [{"type": "m.login.password"}]});
        httpBackend.flush(); // We already would have tried the GET /login request

        // Give the component some time to finish processing the login flows before
        // continuing.
        await sleep(100);

        httpBackend.when('POST', '/login').check(function(req) {
            expect(req.data.type).toEqual('m.login.password');
            expect(req.data.identifier.type).toEqual('m.id.user');
            expect(req.data.identifier.user).toEqual('user');

var legend = TestUtils.renderIntoDocument(
      <LegendChart /> 
    );

    var legendWithTitle = TestUtils.renderIntoDocument(
      <LegendChart title="foo" /> 
    );

    // Verify there is no heading element
    var noTitleHeadings = TestUtils.scryRenderedDOMComponentsWithTag(
      legend, 'h4');
    expect(noTitleHeadings).to.have.length(0);

    // Verify there is a heading element
    var titleHeadings = TestUtils.scryRenderedDOMComponentsWithTag(
      legendWithTitle, 'h4');
    expect(titleHeadings).to.have.length(1);
  });
});

destroy() {
    // TODO: is this right?
    this.emitter.emit('did-destroy');
    this.emitter.dispose();
    ReactDom.unmountComponentAtNode(this.getElement());
  }
}

export default ({atomicNumber, chunks}) => {
  history.push(`/${atomicNumber||''}`)
  linkHistoryToStore(store)

  const styleTagString = collectStyles()

  // HACK: Pass FullElement down for render
  global.fullElementHack = atomicNumber ? new FullElement(atomicNumber, fullElements[atomicNumber]) : {}

  const renderedAppString = renderToString(<Root store={store} />)
  const stateScriptString = `window.dryState = ${JSON.stringify(store.getState()).replace(/</g, '\\u003c')}`

  const documentString = renderToStaticMarkup(<Document chunks={chunks} styleTagString={styleTagString} renderedAppString={renderedAppString} stateScriptString={stateScriptString} />)

  console.log('⚡️', atomicNumber)
  return `<!DOCTYPE html> ${documentString}`
}

BakedDoc.load(data, (err, doc, file) => {
    if (err) return done(err)
    console.log('loaded data. rendering')

    var embedData = JSON.stringify(data).replace(/</g, '\u003c');
    var html = renderToString(<div/>) // doc
    console.log('rendered')

    done(null, `<!doctype html>
      <head>
        <meta charset="utf8">
        <title>${data[0].content} | Notablemind</title>
        <script src="${relPath}vendor/d3.js"></script>
        <script src="${relPath}vendor/vega.js"></script>
        <script src="${relPath}vendor/babel.js"></script>
        <link rel="stylesheet" href="${relPath}build.css">
        <link rel="stylesheet" href="${relPath}baked.css">
        <link rel="stylesheet" href="${relPath}vendor/font-awesome-4.3.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="${relPath}vendor/katex/katex.min.css">

        <script>
          var NM_BAKED_DATA=${embedData};

function getResourceInfoHint() {
      const infoText = translate('project_validation.resource_id.info');

      if (typeof infoText !== 'string') { // if translate wrapped as react element
        let html = ReactDOMServer.renderToStaticMarkup(infoText);

        if (html) {
          // remove span wrapper if present
          let parts = html.split('<span>');
          html = parts[0] || parts[1];
          parts = html.split('</span>');
          html = parts[0];
          return html;
        }
      }
      return infoText;
    }