react-dom#render JavaScript Examples

render(
    <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>
        <Provider store={store}>
            <div className='body'>
                <ReduxToastr
                    timeOut={4000}
                    newestOnTop
                    preventDuplicates
                    position='top-right'
                    transitionIn='fadeIn'
                    transitionOut='fadeOut'
                />
                <ErrorBoundary
                    message={
                        "We're sorry, a critical error has occured in the client and we're unable to show you anything.  Please try refreshing your browser after filling out a report."
                    }
                >
                    <Application />
                </ErrorBoundary>
            </div>
        </Provider>
    </DndProvider>,
    document.getElementById('component')
);

describe('Home', () => {
  let container = null;

  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });

  afterEach(() => {
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });

  it('it renders home component', () => {
    act(() => {
      render(
        <BrowserRouter>
          <Home />
        </BrowserRouter>,
        container,
      );
    });
  });
});

it('hides details when button clicked', () => {
  const div = document.createElement('div');
  document.body.appendChild(div);

  act(() => {
    render(
      <Profile
        name="John Doe"
        title="Team Lead"
        details="This is my 5th year and I love helping others"
      />,
      div
    );
  });

  expect(div.querySelector('.card-text.details')).toHaveTextContent(
    'This is my 5th year and I love helping others'
  );

  const showDetailsBtn = div.querySelector('.btn.btn-primary');
  showDetailsBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));

  expect(div.querySelector('.card-text.details')).not.toBeInTheDocument();
});

// the app
render(
  <Provider store={ store }>
    <ConnectedRouter history={ history }>
      <div className="intel-demo-container">
        <Route component={ ConnectedNavigation } />
        <ConnectedLog />
        <Route exact path="/" component={ Monitor } />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById( "app" ),
);

export default function createTests() {
    let node;
    beforeEach(() => {
        node = document.createElement('div');
        document.body.appendChild(node);
    });
    afterEach(() => {
        unmountComponentAtNode(node);
        document.body.removeChild(node);
    });
    describe('when scrollbars are in flexbox environment', () => {
        it('should still work', done => {
            class Root extends Component {
                render() {
                    return (
                        <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column' }}>
                            <Scrollbars ref={(ref) => { this.scrollbars = ref; }}>
                                <div style={{ width: 10000, height: 10000 }}/>
                            </Scrollbars>
                        </div>
                    );
                }
            }
            render(<Root/>, node, function callback() {
                setTimeout(() => {
                    const { scrollbars } = this;
                    const $scrollbars = findDOMNode(scrollbars);
                    const $view = scrollbars.view;
                    expect($scrollbars.clientHeight).toBeGreaterThan(0);
                    expect($view.clientHeight).toBeGreaterThan(0);
                    done();
                }, 100);
            });
        });
    });
}

render(
  <Provider store={store}>
    <Router history={history}>
      <Suspense
        fallback={
          <div style={{
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
          >
            <CircularProgress
              sx={{
                color: layoutConfig.colorPalette.primary.main
              }}
              thickness={5}
            />
          </div>
          }
      >
        <App />
      </Suspense>
    </Router>
    <ReduxToastr
      timeOut={0}
      newestOnTop={false}
      preventDuplicates
      position='top-center'
      transitionIn='fadeIn'
      transitionOut='fadeOut'
    />
  </Provider>,
  document.getElementById('root')
)

describe('Component', () => {
  let node

  beforeEach(() => {
    node = document.createElement('div')
  })

  afterEach(() => {
    unmountComponentAtNode(node)
  })

  it('displays a welcome message', () => {
    render(<Component/>, node, () => {
      expect(node.innerHTML).toContain('Welcome to React components')
    })
  })
})

render() {
    const {eeObject} = this.state;

    const visParams = {
      min: 0,
      max: 4000,
      palette: ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5']
    };

    const layers = [new EarthEngineLayer({eeObject, visParams, opacity: 0.5})];

    return (
      <div style={{position: 'relative', height: '100%'}}>
        <DeckGL controller initialViewState={INITIAL_VIEW_STATE} layers={layers}>
          <GoogleLoginPane loginProvider={this.loginProvider} />
          <InfoBox title="Image">
            The{' '}
            <a href="https://developers.google.com/earth-engine/datasets/catalog/CGIAR_SRTM90_V4">
              SRTM elevation dataset
            </a>{' '}
            displayed using an <code>ee.Image</code> object.
          </InfoBox>
        </DeckGL>
      </div>
    );
  }

/* wrapping App here as opposed to in index.js to follow redux documenation for react router setup:
  https://redux.js.org/advanced/usage-with-react-router
  https://react-redux.js.org/api/provider
  */
  render() {
    //fixed navigation bar
    return(
      <div>
        <div className="navbar">
          <Link className="link" to="/addrecipe">Add Recipe</Link>
          <form className="search">
            <input type="text"></input>
            <Link className="searchbutton" to="/addrecipe"><i className="material-icons">search</i></Link>
          </form>
          <Link className="link" to="/addrecipe">Login</Link>
        </div>
        <Switch>
          <Route exact path="/">
            <LandingPageContainer />
          </Route>
          <Route path="/addrecipe">
            <AddRecipeContainer />
          </Route>
          <Route path="/viewrecipe">
            <ViewRecipeContainer />
          </Route>
        </Switch>
      </div>
    )
  }

render(
	<Router>
		<Switch>
			<Route exact path="/" component={Homepage} />
			<Route exact path="/dashboard" component={Dashboard} />
			<Redirect to="/" />
		</Switch>
		<Footer />
	</Router>, 
	document.getElementById('root')
);

describe('Component', () => {
	let node;

	beforeEach(() => {
		node = document.createElement('div');
	});

	afterEach(() => {
		unmountComponentAtNode(node);
	});

	it('displays a welcome message', () => {
		render(<Component />, node, () => {
			expect(node.innerHTML).toContain('Welcome to React components');
		});
	});
});

render() {
    return (
      <div style={{ padding: 50 }}>
        <Tabs>
          <TabList>
            <Tab>First</Tab>
            <Tab>Second</Tab>
          </TabList>
          <TabPanel>
            <p>Tab to focus `First`, then arrow to select `Second`.</p>
          </TabPanel>
          <TabPanel>
            <p>Tab to focus input, then begin typing. Focus should stay.</p>
            <input
              type="text"
              onChange={this.handleInputChange}
              value={this.state.inputValue}
            />
          </TabPanel>
        </Tabs>
      </div>
    );
  }

/*
  Error Logging
*/

// import Raven from 'raven-js';
// import { sentry_url } from './data/config';
// if(window) {
//   Raven.config(sentry_url).install();
// }

/*
  Rendering
  This is where we hook up the Store with our actual component and the router
*/
render(
  <Provider store={store}>
    {/* Tell the Router to use our enhanced history */}
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={PhotoGrid} />
        <Route path="/view/:postId" component={Single}></Route>
      </Route>
    </Router>
  </Provider>,
  document.getElementById("root")
);

render(
    <Admin
        authProvider={authProvider}
        dataProvider={dataProvider}
        i18nProvider={i18nProvider}
        title="Example Admin"
        layout={Layout}
        customRoutes={[
            <Route
                exact
                path="/custom"
                component={props => <CustomRouteNoLayout {...props} />}
                noLayout
            />,
            <Route
                exact
                path="/custom2"
                component={props => <CustomRouteLayout {...props} />}
            />,
        ]}
    >
        {permissions => [
            <Resource name="posts" {...posts} />,
            <Resource name="comments" {...comments} />,
            permissions ? <Resource name="users" {...users} /> : null,
            <Resource name="tags" {...tags} />,
        ]}
    </Admin>,
    document.getElementById('root')
);

render() {
    const { number } = this.state;

    return (
      <div>
        Current number:
        {' '}
        {number}

        <br />

        <MaterialUiPhoneNumber
          defaultCountry="it"
          preferredCountries={['it', 'se']}
          onChange={(e) => {
            this.setState({ number: e });
          }}
        />
      </div>
    );
  }

mountExtension = () =>
  setTimeout(() => {
    const mount = document.querySelector(APP_MOUNT_SELECTOR)
    if (!mount) {
      return
    }

    const previousAppContainer = document.querySelector(APP_CONTAINER_SELECTOR)
    if (previousAppContainer) {
      console.log('removing!')
      previousAppContainer.remove()
    }

    chrome.storage.sync.get('token', ({ token = null }) => {
      setState(state => {
        state.token = token
        state.repoDetails = getRepoDetails()
        state.initialTableHeight = mount.offsetHeight
      })

      render(
        <GlobalErrorBoundary>
          <InvalidTokenErrorBoundary>
            <Root />
          </InvalidTokenErrorBoundary>
        </GlobalErrorBoundary>,
        mount
      )
    })
  }, 500)

main = () =>
  render(
    <Suspense fallback={<div />}>
      <Router>
        <StrictMode>
          <App />
        </StrictMode>
      </Router>
    </Suspense>,
    rootElement
  )

describe("Card test suite", () => {
	let container = null;

	beforeEach(() => {
		container = document.createElement("div");
		document.body.appendChild(container);
	});

	afterEach(() => {
		unmountComponentAtNode(container);
		container.remove();
		container = null;
	});

	it("renders Card children props", () => {
		const children = "I'm a Child to be rendered in the Card";
		act(() => {
			render(<Card>{children}</Card>, container);
		});

		expect(container.textContent).toBe(children);
	});
});

describe('App component', () => {
  let node

  beforeEach(() => {
    node = document.createElement('div')
  })

  afterEach(() => {
    unmountComponentAtNode(node)
  })

  it('displays a welcome message', () => {
    render(<App/>, node, () => {
      expect(node.textContent).toContain('Welcome to React')
    })
  })
})

render(
  <ThemeProvider theme={theme}>
    <ApolloProvider client={client}>
      <CookiesProvider>
        <UserProvider>
          <CssBaseline />
          <App />
        </UserProvider>
      </CookiesProvider>
    </ApolloProvider>
  </ThemeProvider>,
  document.getElementById('root')
)

render() {
    const { listOfItems, activeFilter, term, fullList } = this.state;
    return (
      <div>
        {/* <BannerMessage>
          <a href="https://www.cdc.gov/coronavirus/2019-ncov/community/index.html">
            {'Learn more about what you can do to stop the spread of COVID-19 in your community.'}
          </a>
        </BannerMessage> */}
        <Header />
        <Search search={this.searchFilter} term={term} />
        <Filter
          current={activeFilter}
          filterHandler={this.setFilter}
          items={fullList}
        />
        <List items={listOfItems} />
        <Footer />
      </div>
    );
  }

it('renders without crashing', () => {
  act( () => {
    render(<Button>Hello, world!</Button>, container);
  });
  expect(document.querySelector("[data-testid='button']").textContent).toMatch(
    "Hello, world!"
  );

  act( () => {
    render(<Button></Button>, container);
  });
  expect(document.querySelector("[data-testid='button']").textContent).toMatch(
    "Add text"
  );
});

render() {
        const {title, text, buttons} = this.props;

        return (
            <div className="comp_confirm-dialog">
                <div className="confirm-dialog-content">
                    <div className="confirm-dialog-header">
                        <div className="title">{title}</div>
                    </div>
                    <div className="confirm-dialog-body">
                        <div className="text" dangerouslySetInnerHTML={{__html: text}} />
                    </div>
                    <div className="confirm-dialog-footer">
                        {
                            buttons.map((button, index) => {
                                return (
                                    <button key={index} onClick={() => this.handleClickButton(button)}
                                            className={button?.className}>
                                        {button?.label}
                                    </button>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }

standaloneModal = (props) => {
  const modalRef = createRef();
  const rootDiv = document.createElement("div");

  rootDiv.className = cn("modal-holder").toClassName();

  document.body.appendChild(rootDiv);

  const renderModal = (props, animate) => {
    render((
      <Modal
        ref={modalRef}
        {...props}
        onHide={() => {
          props.onHidden?.();
          rootDiv.remove();
        }}
        animateAppearance={animate}
      />
    ), rootDiv);
  };

  renderModal(props, true);

  return {
    update(newProps) {
      renderModal({ ...props, ...(newProps ?? {}) }, false);
    },
    close() {
      modalRef.current.hide();
    },
  };
}

async createApp() {
    const { store, getRoot } = await configureStore(this.options, this.events);
    const rootElement = getRoot(this.root);

    this.store = store;
    window.Htx = this.store;

    render((
      <App
        store={this.store}
        panels={registerPanels(this.options.panels) ?? []}
      />
    ), rootElement);

    const destructor = () => {
      unmountComponentAtNode(rootElement);
      destroy(this.store);
    };

    this.destroy = destructor;
  }

render(
  <React.StrictMode>
    <FirebaseContext.Provider value={{ firebase }}>
      <GlobalStyles />
      <App />
    </FirebaseContext.Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

render() {
    const { classes } = this.props;

    return (
      <div>
        <HighchartsReact highcharts={Highcharts} options={this.state.volOptions} />
        <HighchartsReact highcharts={Highcharts} options={this.state.priceOptions} />
      </div>
    )
  }

render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route
          path="credits"
          element={<Credits />}
        />
        <Route path="graphs" element={<GraphPage />} />
        <Route path="vaccination" element={<VaccinePage />} />
        <Route path="deaths" element={<DeathsPage />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  rootElement
);

render(App(), document.getElementById('root'));