Add smoke tests for styles (including SSR) (#10308)
* Add style to ReactDOM smoke test * Add production smoke test for ReactDOMServer
Dan Abramov committed
Jul 27, 2017 at 14:58 UTC
44c74c7b124056649ca9d9887bb73f28d9bc7685
1 file changed
+30
-2
src/renderers/dom/__tests__/ReactDOMProduction-test.js
+30
-2
@@ -15,6 +15,7 @@ describe('ReactDOMProduction', () => {
15
16
var React;
17
var ReactDOM;
18
+ var ReactDOMServer;
19
var oldProcess;
20
21
beforeEach(() => {
@@ -31,6 +32,7 @@ describe('ReactDOMProduction', () => {
32
jest.resetModules();
33
React = require('react');
34
ReactDOM = require('react-dom');
35
+ ReactDOMServer = require('react-dom/server');
36
});
37
38
afterEach(() => {
@@ -64,7 +66,7 @@ describe('ReactDOMProduction', () => {
66
67
var container = document.createElement('div');
68
var inst = ReactDOM.render(
67
- <div className="blue">
69
+ <div className="blue" style={{fontFamily: 'Helvetica'}}>
70
<Component key={1}>A</Component>
71
<Component key={2}>B</Component>
72
<Component key={3}>C</Component>
@@ -74,10 +76,11 @@ describe('ReactDOMProduction', () => {
76
77
expect(container.firstChild).toBe(inst);
78
expect(inst.className).toBe('blue');
79
+ expect(inst.style.fontFamily).toBe('Helvetica');
80
expect(inst.textContent).toBe('ABC');
81
82
ReactDOM.render(
80
- <div className="red">
83
+ <div className="red" style={{fontFamily: 'Comic Sans MS'}}>
84
<Component key={2}>B</Component>
85
<Component key={1}>A</Component>
86
<Component key={3}>C</Component>
@@ -86,6 +89,7 @@ describe('ReactDOMProduction', () => {
89
);
90
91
expect(inst.className).toBe('red');
92
+ expect(inst.style.fontFamily).toBe('Comic Sans MS');
93
expect(inst.textContent).toBe('BAC');
94
95
ReactDOM.unmountComponentAtNode(container);
@@ -93,6 +97,30 @@ describe('ReactDOMProduction', () => {
97
expect(container.childNodes.length).toBe(0);
98
});
99
100
+ it('should handle a simple flow (ssr)', () => {
101
+ class Component extends React.Component {
102
+ render() {
103
+ return <span>{this.props.children}</span>;
104
+ }
105
+ }
106
+
107
+ var container = document.createElement('div');
108
+ var markup = ReactDOMServer.renderToString(
109
+ <div className="blue" style={{fontFamily: 'Helvetica'}}>
110
+ <Component key={1}>A</Component>
111
+ <Component key={2}>B</Component>
112
+ <Component key={3}>C</Component>
113
+ </div>,
114
+ container,
115
+ );
116
+ container.innerHTML = markup;
117
+ var inst = container.firstChild;
118
+
119
+ expect(inst.className).toBe('blue');
120
+ expect(inst.style.fontFamily).toBe('Helvetica');
121
+ expect(inst.textContent).toBe('ABC');
122
+ });
123
+
124
it('should call lifecycle methods', () => {
125
var log = [];
126
class Component extends React.Component {