Instantly share code, notes, and snippets.

View App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import LoadingIndicator from './components/LoadingIndicator';
class App extends Component {
state = {
isLoading: true,
};
View LoadingIndicator.test.js
describe('on unmount', () => {
it('should clear timeout', () => {
jest.useFakeTimers();
const mockTimerValue = 12345;
setTimeout.mockReturnValue(mockTimerValue);
const wrapper = mount(
<LoadingIndicator isLoading={true}>
<div>ahoy!</div>
View LoadingIndicator.js
componentWillUnmount() {
clearTimeout();
}
View LoadingIndicator.js
componentWillUnmount() {
clearTimeout(this._delayTimer);
}
View LoadingIndicator.test.js
describe('on unmount', () => {
it('should clear timeout', () => {
jest.useFakeTimers();
const wrapper = mount(
<LoadingIndicator isLoading={true}>
<div>ahoy!</div>
</LoadingIndicator>
);
wrapper.unmount();
View LoadingIndicator.js
componentDidMount () {
this._delayTimer = setTimeout(
() => this.setState({ isPastDelay: true }), 200
);
}
View LoadingIndicator.test.js
describe('when isLoading is true', () => {
describe('given 200ms have elapsed', () => {
it('should render loading indicator', () => {
jest.useFakeTimers();
const wrapper = mount(
<LoadingIndicator isLoading={true}>
<div>ahoy!</div>
</LoadingIndicator>
);
View LoadingIndicator.js
componentDidMount () {
this._delayTimer = setTimeout(
() => this.setState({ isPastDelay: true }), 100
);
}
View LoadingIndicator.js
export default class LoadingIndicator extends Component {
static propTypes = {
isLoading: PropTypes.bool.isRequired,
};
state = {
isPastDelay: false
};
componentDidMount () {
View LoadingIndicator.js
render() {
if (this.props.isLoading) {
if (!this.state.isPastDelay) {
return null;
}
return <div>loading...</div>;
}
return this.props.children;
}