diff --git a/README.md b/README.md index cab2e29..fc36fc7 100644 --- a/README.md +++ b/README.md @@ -482,14 +482,14 @@ component, and leaves out the `` children of the `` components. The the `` wrapper component, and the `` wrapper component. -## Stateless components +## Function components -Because [stateless components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) can't be instantiated, `renderIntoDocument` won't return an instance back. +Because [function components](https://reactjs.org/docs/components-and-props.html#function-and-class-components) can't be instantiated, `renderIntoDocument` won't return an instance back. Using the shallow renderer works as shown in the first example. For full rendering, use the `when deeply rendered` to render the component ```js -expect(, +expect(, 'when deeply rendered', 'to have rendered',
Hello, Daniel!
); diff --git a/documentation/assertions/ReactElement/when-deeply-rendered.md b/documentation/assertions/ReactElement/when-deeply-rendered.md index c48744e..5c5a09b 100644 --- a/documentation/assertions/ReactElement/when-deeply-rendered.md +++ b/documentation/assertions/ReactElement/when-deeply-rendered.md @@ -1,7 +1,7 @@ You can render a component with the full DOM renderer directly with the `when deeply rendered` assertion. -This works with both stateful and stateless (functional) components, which can be easier than creating a manual wrapper and manually rendering into the DOM with `TestUtils.renderIntoDocument(...)` or `ReactDOM.render(...)` +This works with both class and function components, which can be easier than creating a manual wrapper and manually rendering into the DOM with `TestUtils.renderIntoDocument(...)` or `ReactDOM.render(...)` Say you have these components: ```js @@ -22,7 +22,7 @@ const Pages = (props) => { ``` -You can check the rendering directly using the `when deeply rendered` assertion, saving you from creating stateless wrappers and rendering into the DOM by hand: +You can check the rendering directly using the `when deeply rendered` assertion, saving you from creating function component wrappers and rendering into the DOM by hand: ```js expect(, 'when deeply rendered', diff --git a/documentation/index.md b/documentation/index.md index 5fd5438..cfd2d5b 100644 --- a/documentation/index.md +++ b/documentation/index.md @@ -423,25 +423,25 @@ component, and leaves out the `` children of the `` components. The the `` wrapper component, and the `` wrapper component. -## Stateless components -Because [stateless components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) can't be instantiated, `renderIntoDocument` won't return an instance back. +## Function components +Because [function components](https://reactjs.org/docs/components-and-props.html#function-and-class-components) can't be instantiated, `renderIntoDocument` won't return an instance back. Using the shallow renderer works as shown in the first example. For full rendering, they can be tested with a wrapper component as such: ```js -class StatelessWrapper extends React.Component { +class FunctionWrapper extends React.Component { render() { return (this.props.children); } } -var StatelessComponent = function (props) { +var FunctionComponent = function (props) { return (
{ props.name }
) } -var component = TestUtils.renderIntoDocument(); +var component = TestUtils.renderIntoDocument(); ``` ## Cleaning up diff --git a/src/assertions/deepAssertions.js b/src/assertions/deepAssertions.js index 8e3bf0a..6d8e3bc 100644 --- a/src/assertions/deepAssertions.js +++ b/src/assertions/deepAssertions.js @@ -76,7 +76,7 @@ function installInto(expect) { checkAttached(expect); }); - class StatelessWrapper extends React.Component { + class FunctionWrapper extends React.Component { render() { return this.props.children; } @@ -87,8 +87,8 @@ function installInto(expect) { if (subject.type && subject.type.prototype && typeof subject.type.prototype.render === 'function') { component = TestUtils.renderIntoDocument(subject); } else { - // Stateless component - component = TestUtils.renderIntoDocument({subject}); + // Function component + component = TestUtils.renderIntoDocument({subject}); component = RenderHook.findComponent(component); if (component) { component = component && component.data.children[0] && RenderHook.findInternalComponent(component.data.children[0]); @@ -96,7 +96,7 @@ function installInto(expect) { expect.errorMode = 'nested'; expect.fail({ message(output) { - return output.error('Cannot find rendered stateless component. Are you sure you passed a real component to `when deeply rendered`'); + return output.error('Cannot find rendered function component. Are you sure you passed a real component to `when deeply rendered`'); } }); } diff --git a/src/tests/general/unexpected-react-deep.spec.js b/src/tests/general/unexpected-react-deep.spec.js index a8180f7..aaee009 100644 --- a/src/tests/general/unexpected-react-deep.spec.js +++ b/src/tests/general/unexpected-react-deep.spec.js @@ -942,8 +942,8 @@ describe('unexpected-react (deep rendering)', () => { describe('when deeply rendered', function () { - const Stateless = function (props) { - return
Yay
; + const Function = function (props) { + return
Yay
; }; it('renders a class component', function () { @@ -954,39 +954,38 @@ describe('unexpected-react (deep rendering)', () => { ); }); - it('renders a stateless component', function () { + it('renders a function component', function () { - expect(, 'when deeply rendered', 'to have exactly rendered',
Yay
); + expect(, 'when deeply rendered', 'to have exactly rendered',
Yay
); }); - it('errors when a stateless component render does not match', function () { + it('errors when a function component render does not match', function () { - expect(() => expect(, 'when deeply rendered', 'to have exactly rendered', - -
Yay
-
), 'to throw', + expect(() => expect(, 'when deeply rendered', 'to have exactly rendered', + +
Yay
+
), 'to throw', [ - 'expected ', - 'when deeply rendered to have exactly rendered
Yay
', + 'expected ', + 'when deeply rendered to have exactly rendered
Yay
', '', - '', - ' ', + '
', ' Yay', '
', - '
' + '
' ].join('\n')); }); }); describe('to deeply render as', function () { - const Stateless = function (props) { - return
Yay
; + const Function = function (props) { + return
Yay
; }; it('renders a class component', function () { @@ -996,26 +995,26 @@ describe('unexpected-react (deep rendering)', () => { ); }); - it('renders a stateless component', function () { + it('renders a function component', function () { - expect(, 'to deeply render as',
Yay
); + expect(, 'to deeply render as',
Yay
); }); - it('errors when a stateless component render does not match', function () { - expect(() => expect(, 'to deeply render as', - -
Yay
-
), 'to throw', + it('errors when a function component render does not match', function () { + expect(() => expect(, 'to deeply render as', + +
Yay
+
), 'to throw', [ - 'expected ', - 'to deeply render as
Yay
', + 'expected ', + 'to deeply render as
Yay
', '', - '', - '
', + '
', ' Yay', '
', - '' + '' ].join('\n')); }); diff --git a/src/tests/general/unexpected-react-shallow.spec.js b/src/tests/general/unexpected-react-shallow.spec.js index 69f1160..f2a95ce 100644 --- a/src/tests/general/unexpected-react-shallow.spec.js +++ b/src/tests/general/unexpected-react-shallow.spec.js @@ -2359,7 +2359,7 @@ describe('unexpected-react-shallow', () => { }); }); - it('renders a stateless component', function () { + it('renders a function component', function () { expect(, 'when rendered', 'to have rendered',
) ; }); diff --git a/src/types/dom-types.js b/src/types/dom-types.js index b0776eb..9983247 100644 --- a/src/types/dom-types.js +++ b/src/types/dom-types.js @@ -19,7 +19,7 @@ function installInto(expect) { return (typeof value === 'object' && value !== null && (value._reactInternalInstance || value._reactInternalComponent) && - (typeof value.setState === 'function' || typeof value.updater === 'object' /* stateless components */)); + (typeof value.setState === 'function' || typeof value.updater === 'object' /* function components */)); }, inspect(value, depth, output, inspect) {