How to use rax-proptypes - 9 common examples
To help you get started, weβve selected a few rax-proptypes examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
alibaba / rax / packages / rax / src / vdom / __tests__ / context.js View on Github 
it('should update context if it changes due to setState', function() {
var container = createNodeElement('div');
class MyComponent extends Component {
static contextTypes = {
foo: PropTypes.string.isRequired,
getFoo: PropTypes.func.isRequired,
};
render() {
return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
}
}
class Parent extends Component {
static childContextTypes = {
foo: PropTypes.string.isRequired,
getFoo: PropTypes.func.isRequired,
};
state = {
bar: 'initial',it('renders based on context', () => {
class Button extends Component {
render() {
return (
<button style="{{background:">
{this.props.children}
</button>
);
}
}
Button.contextTypes = {
color: PropTypes.string
};
class Message extends Component {
render() {
return (
<div>
{this.props.text} <button>Delete</button>
</div>
);
}
}
class MessageList extends Component {
getChildContext() {
return {color: 'purple'};
}it('should filter out context not in contextTypes', function() {
class MyComponent extends Component {
static contextTypes = {
foo: PropTypes.string,
};
render() {
return <div>;
}
}
class ComponentInFooBarContext extends Component {
static childContextTypes = {
foo: PropTypes.string,
bar: PropTypes.number,
};
getChildContext() {
return {
foo: 'abc',
bar: 123,
};
}
render() {
return ;
}
}
let instance = render();</div>it('should pass context when rendering subtree elsewhere', function() {
let container = createNodeElement('div');
class MyComponent extends Component {
static contextTypes = {
foo: PropTypes.string.isRequired,
};
render() {
return <div>{this.context.foo}</div>;
}
}
class Parent extends Component {
static childContextTypes = {
foo: PropTypes.string.isRequired,
};
getChildContext() {
return {
foo: 'bar',
};
}
render() {
return ;
}
}
render(, container);
expect(container.childNodes[0].childNodes[0].data).toBe('bar');
});it('should update portal context if it changes due to re-render', () => {
const container = createNodeElement('div');
const portalContainer = createNodeElement('div');
class Sub extends Component {
static contextTypes = {
foo: PropTypes.string.isRequired,
getFoo: PropTypes.func.isRequired,
};
render() {
return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
}
}
class Parent extends Component {
static childContextTypes = {
foo: PropTypes.string.isRequired,
getFoo: PropTypes.func.isRequired,
};
getChildContext() {
return {
foo: this.props.bar,it('should filter out context not in contextTypes', function() {
class MyComponent extends Component {
static contextTypes = {
foo: PropTypes.string,
};
render() {
return <div>;
}
}
class ComponentInFooBarContext extends Component {
static childContextTypes = {
foo: PropTypes.string,
bar: PropTypes.number,
};
getChildContext() {
return {
foo: 'abc',
bar: 123,
};
}
render() {
return ;
}
}
let instance = render();
expect(instance._internal._renderedComponent._instance.context).toEqual({foo: 'abc'});</div>class MessageList extends Component {
getChildContext() {
return {color: 'purple'};
}
render() {
const children = this.props.messages.map((message) =>
);
return <div>{children}</div>;
}
}
MessageList.childContextTypes = {
color: PropTypes.string
};
let messages = ;
let str = renderToString(messages);
expect(str).toBe('<div data-rendered="server"><div>foo <button style="background:purple;">Delete</button></div><div>bar <button style="background:purple;">Delete</button></div></div>');
});const container = createNodeElement('div');
const portalContainer = createNodeElement('div');
class Sub extends Component {
static contextTypes = {
foo: PropTypes.string.isRequired,
};
render() {
return <div>{this.context.foo}</div>;
}
}
class Parent extends Component {
static childContextTypes = {
foo: PropTypes.string.isRequired,
};
getChildContext() {
return {
foo: 'bar',
};
}
render() {
return createPortal(<sub>, portalContainer);
}
}
render(, container);
jest.runAllTimers();</sub>class MyComponent extends Component {
static contextTypes = {
foo: PropTypes.string.isRequired,
getFoo: PropTypes.func.isRequired,
};
render() {
return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
}
}
class Parent extends Component {
static childContextTypes = {
foo: PropTypes.string.isRequired,
getFoo: PropTypes.func.isRequired,
};
state = {
bar: 'initial',
};
getChildContext() {
return {
foo: this.state.bar,
getFoo: () => this.state.bar,
};
}
render() {
return ;
}
