How to use componentDidCatch method in storybook-root

Best JavaScript code snippet using storybook-root

componentDidCatch.test.js

Source:componentDidCatch.test.js Github

copy

Full Screen

...20 let expectedError;21 /** @type {typeof import('../../../').Component} */22 let ThrowErr;23 class Receiver extends Component {24 componentDidCatch(error) {25 this.setState({ error });26 }27 render() {28 return this.state.error29 ? String(this.state.error)30 : this.props.children;31 }32 }33 let thrower;34 sinon.spy(Receiver.prototype, 'componentDidCatch');35 sinon.spy(Receiver.prototype, 'render');36 function throwExpectedError() {37 throw (expectedError = new Error('Error!'));38 }39 beforeEach(() => {40 ThrowErr = class ThrowErr extends Component {41 constructor(props) {42 super(props);43 thrower = this;44 }45 componentDidCatch() {46 expect.fail("Throwing component should not catch it's own error.");47 }48 render() {49 return <div>ThrowErr: componentDidCatch</div>;50 }51 };52 sinon.spy(ThrowErr.prototype, 'componentDidCatch');53 expectedError = undefined;54 Receiver.prototype.componentDidCatch.resetHistory();55 Receiver.prototype.render.resetHistory();56 });57 afterEach(() => {58 expect(59 ThrowErr.prototype.componentDidCatch,60 "Throwing component should not catch it's own error."61 ).to.not.be.called;62 thrower = undefined;63 });64 it('should be called when child fails in constructor', () => {65 class ThrowErr extends Component {66 constructor(props, context) {67 super(props, context);68 throwExpectedError();69 }70 componentDidCatch() {71 expect.fail("Throwing component should not catch it's own error");72 }73 render() {74 return <div />;75 }76 }77 render(78 <Receiver>79 <ThrowErr />80 </Receiver>,81 scratch82 );83 rerender();84 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(85 expectedError86 );87 });88 // https://github.com/preactjs/preact/issues/157089 it('should handle double child throws', () => {90 const Child = ({ i }) => {91 throw new Error(`error! ${i}`);92 };93 const fn = () =>94 render(95 <Receiver>96 {[1, 2].map(i => (97 <Child key={i} i={i} />98 ))}99 </Receiver>,100 scratch101 );102 expect(fn).to.not.throw();103 rerender();104 expect(scratch.innerHTML).to.equal('Error: error! 2');105 });106 it('should be called when child fails in componentWillMount', () => {107 ThrowErr.prototype.componentWillMount = throwExpectedError;108 render(109 <Receiver>110 <ThrowErr />111 </Receiver>,112 scratch113 );114 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(115 expectedError116 );117 });118 it('should be called when child fails in render', () => {119 ThrowErr.prototype.render = throwExpectedError;120 render(121 <Receiver>122 <ThrowErr />123 </Receiver>,124 scratch125 );126 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(127 expectedError128 );129 });130 it('should be called when child fails in componentDidMount', () => {131 ThrowErr.prototype.componentDidMount = throwExpectedError;132 render(133 <Receiver>134 <ThrowErr />135 </Receiver>,136 scratch137 );138 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(139 expectedError140 );141 });142 it('should be called when child fails in getDerivedStateFromProps', () => {143 ThrowErr.getDerivedStateFromProps = throwExpectedError;144 sinon.spy(ThrowErr.prototype, 'render');145 render(146 <Receiver>147 <ThrowErr />148 </Receiver>,149 scratch150 );151 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(152 expectedError153 );154 expect(ThrowErr.prototype.render).not.to.have.been.called;155 });156 it('should be called when child fails in getSnapshotBeforeUpdate', () => {157 ThrowErr.prototype.getSnapshotBeforeUpdate = throwExpectedError;158 render(159 <Receiver>160 <ThrowErr />161 </Receiver>,162 scratch163 );164 thrower.forceUpdate();165 rerender();166 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(167 expectedError168 );169 });170 it('should be called when child fails in componentDidUpdate', () => {171 ThrowErr.prototype.componentDidUpdate = throwExpectedError;172 render(173 <Receiver>174 <ThrowErr />175 </Receiver>,176 scratch177 );178 thrower.forceUpdate();179 rerender();180 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(181 expectedError182 );183 });184 it('should be called when child fails in componentWillUpdate', () => {185 ThrowErr.prototype.componentWillUpdate = throwExpectedError;186 render(187 <Receiver>188 <ThrowErr />189 </Receiver>,190 scratch191 );192 thrower.forceUpdate();193 rerender();194 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(195 expectedError196 );197 });198 it('should be called when child fails in componentWillReceiveProps', () => {199 ThrowErr.prototype.componentWillReceiveProps = throwExpectedError;200 let receiver;201 class Receiver extends Component {202 constructor() {203 super();204 this.state = { foo: 'bar' };205 receiver = this;206 }207 componentDidCatch(error) {208 this.setState({ error });209 }210 render() {211 return this.state.error ? (212 String(this.state.error)213 ) : (214 <ThrowErr foo={this.state.foo} />215 );216 }217 }218 sinon.spy(Receiver.prototype, 'componentDidCatch');219 render(<Receiver />, scratch);220 receiver.setState({ foo: 'baz' });221 rerender();222 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(223 expectedError224 );225 });226 it('should be called when child fails in shouldComponentUpdate', () => {227 ThrowErr.prototype.shouldComponentUpdate = throwExpectedError;228 let receiver;229 class Receiver extends Component {230 constructor() {231 super();232 this.state = { foo: 'bar' };233 receiver = this;234 }235 componentDidCatch(error) {236 this.setState({ error });237 }238 render() {239 return this.state.error ? (240 String(this.state.error)241 ) : (242 <ThrowErr foo={this.state.foo} />243 );244 }245 }246 sinon.spy(Receiver.prototype, 'componentDidCatch');247 render(<Receiver />, scratch);248 receiver.setState({ foo: 'baz' });249 rerender();250 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(251 expectedError252 );253 });254 it('should be called when child fails in componentWillUnmount', () => {255 ThrowErr.prototype.componentWillUnmount = throwExpectedError;256 render(257 <Receiver>258 <ThrowErr />259 </Receiver>,260 scratch261 );262 render(263 <Receiver>264 <div />265 </Receiver>,266 scratch267 );268 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(269 expectedError270 );271 });272 it('should be called when applying a Component ref', () => {273 const Foo = () => <div />;274 const ref = value => {275 if (value) {276 throwExpectedError();277 }278 };279 // In React, an error boundary handles it's own refs:280 // https://codesandbox.io/s/react-throwing-refs-lk958281 class Receiver extends Component {282 componentDidCatch(error) {283 this.setState({ error });284 }285 render() {286 return this.state.error ? (287 String(this.state.error)288 ) : (289 <Foo ref={ref} />290 );291 }292 }293 sinon.spy(Receiver.prototype, 'componentDidCatch');294 render(<Receiver />, scratch);295 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(296 expectedError297 );298 });299 it('should be called when applying a DOM ref', () => {300 const ref = value => {301 if (value) {302 throwExpectedError();303 }304 };305 // In React, an error boundary handles it's own refs:306 // https://codesandbox.io/s/react-throwing-refs-lk958307 class Receiver extends Component {308 componentDidCatch(error) {309 this.setState({ error });310 }311 render() {312 return this.state.error ? (313 String(this.state.error)314 ) : (315 <div ref={ref} />316 );317 }318 }319 sinon.spy(Receiver.prototype, 'componentDidCatch');320 render(<Receiver />, scratch);321 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(322 expectedError323 );324 });325 it('should be called when unmounting a ref', () => {326 const ref = value => {327 if (value == null) {328 throwExpectedError();329 }330 };331 ThrowErr.prototype.render = () => <div ref={ref} />;332 render(333 <Receiver>334 <ThrowErr />335 </Receiver>,336 scratch337 );338 render(339 <Receiver>340 <div />341 </Receiver>,342 scratch343 );344 expect(Receiver.prototype.componentDidCatch).to.have.been.calledOnceWith(345 expectedError346 );347 });348 it('should be called when functional child fails', () => {349 function ThrowErr() {350 throwExpectedError();351 }352 render(353 <Receiver>354 <ThrowErr />355 </Receiver>,356 scratch357 );358 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(359 expectedError360 );361 });362 it('should be called when child inside a Fragment fails', () => {363 function ThrowErr() {364 throwExpectedError();365 }366 render(367 <Receiver>368 <Fragment>369 <ThrowErr />370 </Fragment>371 </Receiver>,372 scratch373 );374 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(375 expectedError376 );377 });378 it('should re-render with new content', () => {379 class ThrowErr extends Component {380 componentWillMount() {381 throw new Error('Error contents');382 }383 render() {384 return 'No error!?!?';385 }386 }387 render(388 <Receiver>389 <ThrowErr />390 </Receiver>,391 scratch392 );393 rerender();394 expect(scratch).to.have.property('textContent', 'Error: Error contents');395 });396 it('should be able to adapt and rethrow errors', () => {397 let adaptedError;398 class Adapter extends Component {399 componentDidCatch(error) {400 throw (adaptedError = new Error(401 'Adapted ' +402 String(error && 'message' in error ? error.message : error)403 ));404 }405 render() {406 return <div>{this.props.children}</div>;407 }408 }409 function ThrowErr() {410 throwExpectedError();411 }412 sinon.spy(Adapter.prototype, 'componentDidCatch');413 render(414 <Receiver>415 <Adapter>416 <ThrowErr />417 </Adapter>418 </Receiver>,419 scratch420 );421 expect(Adapter.prototype.componentDidCatch).to.have.been.calledWith(422 expectedError423 );424 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(425 adaptedError426 );427 rerender();428 expect(scratch).to.have.property('textContent', 'Error: Adapted Error!');429 });430 it('should bubble on repeated errors', () => {431 class Adapter extends Component {432 componentDidCatch(error) {433 // Try to handle the error434 this.setState({ error });435 }436 render() {437 // But fail at doing so438 if (this.state.error) {439 throw this.state.error;440 }441 return <div>{this.props.children}</div>;442 }443 }444 function ThrowErr() {445 throwExpectedError();446 }447 sinon.spy(Adapter.prototype, 'componentDidCatch');448 render(449 <Receiver>450 <Adapter>451 <ThrowErr />452 </Adapter>453 </Receiver>,454 scratch455 );456 rerender();457 expect(Adapter.prototype.componentDidCatch).to.have.been.calledWith(458 expectedError459 );460 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(461 expectedError462 );463 expect(scratch).to.have.property('textContent', 'Error: Error!');464 });465 it('should bubble on ignored errors', () => {466 class Adapter extends Component {467 componentDidCatch() {468 // Ignore the error469 }470 render() {471 return <div>{this.props.children}</div>;472 }473 }474 function ThrowErr() {475 throw new Error('Error!');476 }477 sinon.spy(Adapter.prototype, 'componentDidCatch');478 render(479 <Receiver>480 <Adapter>481 <ThrowErr />482 </Adapter>483 </Receiver>,484 scratch485 );486 rerender();487 expect(Adapter.prototype.componentDidCatch, 'Adapter').to.have.been488 .called;489 expect(Receiver.prototype.componentDidCatch, 'Receiver').to.have.been490 .called;491 expect(scratch).to.have.property('textContent', 'Error: Error!');492 });493 it('should not bubble on caught errors', () => {494 class TopReceiver extends Component {495 componentDidCatch(error) {496 this.setState({ error });497 }498 render() {499 return (500 <div>501 {this.state.error502 ? String(this.state.error)503 : this.props.children}504 </div>505 );506 }507 }508 function ThrowErr() {509 throwExpectedError();510 }511 sinon.spy(TopReceiver.prototype, 'componentDidCatch');512 render(513 <TopReceiver>514 <Receiver>515 <ThrowErr />516 </Receiver>517 </TopReceiver>,518 scratch519 );520 rerender();521 expect(TopReceiver.prototype.componentDidCatch).not.to.have.been.called;522 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(523 expectedError524 );525 expect(scratch).to.have.property('textContent', 'Error: Error!');526 });527 it('should be called through non-component parent elements', () => {528 ThrowErr.prototype.render = throwExpectedError;529 render(530 <Receiver>531 <div>532 <ThrowErr />533 </div>534 </Receiver>,535 scratch536 );537 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(538 expectedError539 );540 });541 it('should bubble up when ref throws on component that is not an error boundary', () => {542 const ref = value => {543 if (value) {544 throwExpectedError();545 }546 };547 function ThrowErr() {548 return <div ref={ref} />;549 }550 render(551 <Receiver>552 <ThrowErr />553 </Receiver>,554 scratch555 );556 expect(Receiver.prototype.componentDidCatch).to.have.been.calledWith(557 expectedError558 );559 });560 it.skip('should successfully unmount constantly throwing ref', () => {561 const buggyRef = throwExpectedError;562 function ThrowErr() {563 return <div ref={buggyRef}>ThrowErr</div>;564 }565 render(566 <Receiver>567 <ThrowErr />568 </Receiver>,569 scratch570 );571 rerender();572 expect(scratch.innerHTML).to.equal('<div>Error: Error!</div>');573 });574 it('should pass errorInfo on render error', () => {575 let info;576 class Receiver extends Component {577 constructor(props) {578 super(props);579 this.state = { error: null };580 }581 componentDidCatch(error, errorInfo) {582 info = errorInfo;583 this.setState({ error });584 }585 render() {586 if (this.state.error) return <div />;587 return this.props.children;588 }589 }590 function ThrowErr() {591 throw new Error('fail');592 }593 render(594 <Receiver>595 <ThrowErr />...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import React from 'react';2import ReactDOM from 'react-dom';3import './index.css';4import App from './App';5import * as serviceWorker from './serviceWorker';6import { Provider } from 'react-redux';7import { store } from './redux/store';8ReactDOM.render(9 <Provider store={store}>10 document.getElementById('root')11);12serviceWorker.unregister();13import React from 'react';14import logo from './logo.svg';15import './App.css';16import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';17import { Home } from './pages/Home';18import { About } from './pages/About';19import { NotFound } from './pages/NotFound';20import { Header } from './components/Header';21import { Footer } from './components/Footer';22import { GlobalProvider } from './context/GlobalState';23function App() {24 return (25 <Route exact path="/" component={Home} />26 <Route exact path="/about" component={About} />27 <Route component={NotFound} />28 );29}30export default App;31* {32 margin: 0;33 padding: 0;34 box-sizing: border-box;35}36body {37 background: #f4f4f4;38 font-size: 16px;39 font-family: 'Roboto', sans-serif;40}41import React, { Fragment, useContext } from 'react';42import { GlobalContext } from '../context/GlobalState';43export const Home = () => {44 const { transactions } = useContext(GlobalContext);45 console.log(transactions);46 return (47 );48};49import React, { Fragment } from 'react';50export const About = () => {51 return (52 );53};54import React, { Fragment } from 'react';55export const NotFound = () => {56 return (

Full Screen

Using AI Code Generation

copy

Full Screen

1import React from 'react';2import { render } from 'react-dom';3import { App } from './App';4render(<App />, document.getElementById('root'));5import React from 'react';6import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';7import { ErrorBoundary } from './ErrorBoundary';8import { Home } from './Home';9import { NotFound } from './NotFound';10export const App = () => (11 <Route exact path="/" component={Home} />12 <Route component={NotFound} />13);14import React from 'react';15import { Link } from 'react-router-dom';16import { NotFound } from './NotFound';17export class ErrorBoundary extends React.Component {18 state = { hasError: false, error: null, info: null };19 static getDerivedStateFromError(error) {20 return { hasError: true, error };21 }22 componentDidCatch(error, info) {23 this.setState({ info });24 }25 render() {26 const { hasError, error, info } = this.state;27 if (hasError) {28 return (29 error={error}30 info={info}31 );32 }33 return this.props.children;34 }35}36import React from 'react';37import { Link } from 'react-router-dom';38export const NotFound = ({ error, info }) => (39 {error && <pre>{error.toString()}</pre>}40 {info && <pre>{info.componentStack}</pre>}41);42import React from 'react';43import { Link } from 'react-router-dom';44export const Home = () => (45);

Full Screen

Using AI Code Generation

copy

Full Screen

1import React, { Component } from "react";2import { render } from "react-dom";3import { storiesOf } from "@storybook/react";4import { withInfo } from "@storybook/addon-info";5class Test extends Component {6 constructor(props) {7 super(props);8 this.state = { hasError: false };9 }10 componentDidCatch(error, info) {11 this.setState({ hasError: true });12 }13 render() {14 if (this.state.hasError) {15 return <h1>Something went wrong.</h1>;16 }17 return this.props.children;18 }19}20storiesOf("Test", module)21 .addDecorator(story => <Test>{story()}</Test>)22 .add("Test", withInfo("test")(() => <div>Test</div>));23import { configure, addDecorator } from "@storybook/react";24import { withInfo } from "@storybook/addon-info";25import { withA11y } from "@storybook/addon-a11y";26import { withKnobs } from "@storybook/addon-knobs";27import { withOptions } from "@storybook/addon-options";28import { withTests } from "@storybook/addon-jest";29import { withBackgrounds } from "@storybook/addon-backgrounds";30import { withViewport } from "@storybook/addon-viewport";31import { withConsole } from "@storybook/addon-console";32import { withPerformance } from "@storybook/addon-performance";33import { withRedux } from "@storybook/addon-redux";34import { withState } from "@dump247/storybook-state";35import { withNotes } from "@storybook/addon-notes";36import { withCSSResources } from "@storybook/addon-cssresources";37import { withContexts } from "@storybook/addon-contexts/react";38import { withStorySource } from "@storybook/addon-storysource";39import { withSmartKnobs } from "storybook-addon-smart-knobs";40import { withPropsTable } from "storybook-addon-react-docgen";41import { withCreevey } from "creevey";42import { withToggles } from "storybook-addon-toggles";43import { withSmartKnobs } from "storybook-addon-smart-knobs";44import { withPropsTable } from "storybook-addon-react-docgen";45import { withCreevey } from "creevey";46addDecorator(withInfo);47addDecorator(withA11y);

Full Screen

Using AI Code Generation

copy

Full Screen

1import { setCustomElements } from '@storybook/web-components';2import customElements from '../custom-elements.json';3import { applyPolyfills, defineCustomElements } from '@storybook/components/loader';4import { applyPolyfills as applyPolyfillsRoot, defineCustomElements as defineCustomElementsRoot } from '@storybook/web-components/loader';5applyPolyfills().then(() => {6 defineCustomElements(customElements);7});8applyPolyfillsRoot().then(() => {9 defineCustomElementsRoot(customElements);10});11setCustomElements(customElements);12import { setCustomElements } from '@storybook/web-components';13import customElements from '../custom-elements.json';14import { applyPolyfills, defineCustomElements } from '@storybook/components/loader';15import { applyPolyfills as applyPolyfillsRoot, defineCustomElements as defineCustomElementsRoot } from '@storybook/web-components/loader';16applyPolyfills().then(() => {17 defineCustomElements(customElements);18});19applyPolyfillsRoot().then(() => {20 defineCustomElementsRoot(customElements);21});22setCustomElements(customElements);

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful