-
Notifications
You must be signed in to change notification settings - Fork 47.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
react-test-renderer
and refs
#7740
Comments
Thanks for taking the time to file an issue! This is not a bug. If your components crash expecting some methods (like import React from 'react';
import renderer from 'react-test-renderer';
function createNodeMock() {
// You can return anything from this function.
// For example:
return {
focus()
// Do nothing
}
}
}
it('should have valid ref', () => {
const foo = renderer.create(<Foo />, {createNodeMock});
expect(foo.toJSON()).toMatchSnapshot();
});
I hope this helps! I will close because we generally close issues that are fixed in master, and we think this is an adequate solution. |
A warning could be added if we use |
Since test renderer renders deeply, I’m worried this might end up as a non-actionable warning soup. I think fixing it on a case by case basis with mocks might work out better. |
For now I've disable the generation of the component by doing: |
@gaearon Can you recommend a workaround prior to the release of React 15.4? In my case, for instance, the component which uses ref is the one being tested, so mocking the entire component (via |
There is no workaround prior to its release because the workaround is added in that release. 😉 |
Fair enough. I'll checkout the release candidate to make sure everything is working and then sit tight until 15.4 is released. It also occurs to me that I could refactor the component such that imperative interactions associated with |
Hi, at start just want to say great work with When testing some components i stumbled on some fishy behavior, basic everything works when on first render we have components rendered that has refs callbacks, but when on update we add new components with ref callbacks we got an error dummy example const B = React.createClass({
onRefEl(ref) {
console.log('ref el', ref);
},
_renderEl(i) {
return (
<span key={i} ref={this.onRefEl}>index: {i}</span>
);
},
onRef(ref) {
console.log('ref in B', ref);
},
render() {
return (
<div ref={this.onRef}>{this.props.array.map(this._renderEl)}</div>
);
}
});
const A = React.createClass({
render() {
return <div><B array={this.props.array}/></div>;
}
});
function createNodeMock(element) {
console.log('yee createNodeMock called');
return '[ref object]';
}
it('dummy test', () => {
const component = renderer.create(<A array={[0]}/>, {createNodeMock});
let tree = component.toJSON();
console.log('render 0', tree);
component.update(<A array={[0, 1]}/>);
console.log('render 1', tree);
// TypeError: options.createNodeMock is not a function
tree = component.toJSON();
expect(tree).toMatchSnapshot();
}); imho it's not correct behavior, after some digging i would say change ReactTestInstance.prototype.update = function (nextElement, options) {
console.log("::my:update");
invariant(this._component, "ReactTestRenderer: .update() can't be called after unmount.");
var nextWrappedElement = React.createElement(TopLevelWrapper, { child: nextElement });
var component = this._component;
ReactUpdates.batchedUpdates(function () {
var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(_assign({}, defaultTestOptions, options));
transaction.perform(function () {
ReactReconciler.receiveComponent(component, nextWrappedElement, transaction, emptyObject);
});
ReactUpdates.ReactReconcileTransaction.release(transaction);
});
}; then in our test we can pass options, and we don't have it('dummy test', () => {
const component = renderer.create(<A array={[0]}/>, {createNodeMock});
let tree = component.toJSON();
console.log('render 0', tree);
component.update(<A array={[0, 1]}/>, {createNodeMock});
console.log('render 1', tree);
// no TypeError!
tree = component.toJSON();
expect(tree).toMatchSnapshot();
}); but it's get more complicated if we want to simulate async update by setState, then also we are missing options so our dummy will look like: // B component is the same as above...
const A = React.createClass({
getInitialState() {
return {
array: []
};
},
componentDidMount() {
setTimeout(() => {
try {
this.setState({array: [0]});
} catch (error) {
// TypeError: options.createNodeMock is not a function
console.log(error);
}
}, 300);
},
render() {
console.log('render A');
return <div><B array={this.state.array}/></div>;
}
});
// createNodeMock is the same
it('dummy test', (done) => {
const component = renderer.create(<A/>, {createNodeMock});
let tree = component.toJSON();
console.log('render 0', tree);
setTimeout(() => {
console.log('render 1', tree);
tree = component.toJSON();
expect(tree).toMatchSnapshot();
done();
}, 600);
}); and the How the Is this making sense at all ? or what do you think guys? |
Let's reopen so we don't lose track of this. |
@piecyk thanks for the details report, I'll look into this today and see what can be done 👍 |
I was using the RC release for this great createNodeMock feature, but also falled into this |
simple example that breaks (i think it's even a different bug). tested on test("works", () => {
class Foo extends React.Component {
render () {
return <div />;
}
}
const inst = renderer.create(<Foo/>, { createNodeMock: () => "whatever" });
inst.unmount();
});
test("doesnt", () => {
class Foo extends React.Component {
render () {
return <div ref="foo" />;
}
}
const inst = renderer.create(<Foo/>, { createNodeMock: () => "whatever" });
inst.unmount();
}); will produce
what's weird is I have refs working in some cases (like most of my usecases) but there are specific cases that definitely break. Let me know if you want me to do more investigation. |
do you guys plan to fix this for 15.4.0 ? This bug makes |
I unfortunately haven't had a lot of time to work on React lately, I can try to make an effort tonight after work to fix it. |
I will try to have another look on that... it('dynamic ref', () => {
const onRef = jest.fn();
class A extends React.Component {
state = {a: []}; // but when on init we set state = {a: [1]}; it will pass
componentDidMount() {
this.setState({a: [1]});
}
renderChild(i) {
return <div key={i} ref={onRef}>{i}</div>
}
render() {
return <div>{this.state.a.map(this.renderChild)}</div>
}
}
function createNodeMock(element) {
return null;
}
ReactTestRenderer.create(<A/>, {createNodeMock});
expect(onRef).toBeCalled();
}) |
It works great! thanks you guys for fixing this. |
See facebook/react#7740 for details. 1) resetHeight() is called and tries to set this.div.innerHTML. Shallow renderer does not use a DOM so doesn't know what this.div is. 2) this.textarea.focus() is called. Mock out focus.
While debugging a testing issue with the new scrollbar component i stumbled over the known problem of „react-test-renderer“ not being able to handle element refs correctly (since it doesn’t involve any real DOM rendering). You can read more about that issue here: facebook/react#7740 This was the root cause and i couldnt make it work with react-test-renderer, so i refactored all the snapshot tests to use enzyme (which supports full DOM rendering). You can see the difference (react-test-renderer outputs a JSON with react component „markup“ whereas enzyme outputs only plain DOM nodes)
* [DDW-829] Installs react-custom-scrollbars as dependency * [DDW-829] Creates ScrollBar component * [DDW-829] Creates SCROLLBAR identifier * [DDW-829] Creates ScrollBarSkin using react-custom-scrollbars package * [DDW-829] Exports ScrollBarSkin from index using identifier * [DDW-829] Changes render prop to children * [DDW-829] Adds SCROLLBAR_THEME_API * [DDW-829] Adds theme api export * [DDW-829] Creates SimpleScrollBar theme file * [DDW-829] Exports SimpleScrollBar theme file * [DDW-829] Adds configurable CSS vars to theme file * [DDW-829] Swaps className prop for style prop * [DDW-829] Adds ScrollBar story * [DDW-829] Fixes ScrollBar height issue * [DDW-829] Cleans up ScrollBar storybook styles * [DDW-829] Updates CHANGELOG * [DDW-829] Removes root class from ScrollBar's theme * [DDW-829] Adds optionHeight prop to Options component * [DDW-829] Adds optionHeight prop to OptionsSkin and fixes scroll bar height calculation * Add support for *.module.scss file name convention * [DDW-829] Adds big countries list for testing * [DDW-829] Use maintained custom scrollbars package * [DDW-829] Fixes ESLint warning in ScrollBar story * [DDW-829] Arranges ScrollBar scss vars in ABC order * [DDW-829] Makes ScrollBar thumb darker * [DDW-829] Fixes ESLint error in Autocomplete behavior tests * [DDW-829] Fix broken jest snapshots by using enzyme While debugging a testing issue with the new scrollbar component i stumbled over the known problem of „react-test-renderer“ not being able to handle element refs correctly (since it doesn’t involve any real DOM rendering). You can read more about that issue here: facebook/react#7740 This was the root cause and i couldnt make it work with react-test-renderer, so i refactored all the snapshot tests to use enzyme (which supports full DOM rendering). You can see the difference (react-test-renderer outputs a JSON with react component „markup“ whereas enzyme outputs only plain DOM nodes) * [DDW-829] Updates CHANGELOG to include snapshot test refactoring * Prepares CHANGELOG for 0.9.2 release * 0.9.2 * 0.9.2-rc.1 * Fixes prepare-sass-files-for-publishing.js * 0.9.2-rc.2 * [DDW-733] Implement password input component * [DDW-733] Fixes ESLint warning * [DDW-733] Fixes flow error * [DDW-733] Fixes CSS variable names and adds comments to theme file * [DDW-733] Updates CHANGELOG * [DDW-1227] Fix options component dimensions (#135) * [DDW-1227] Introduce a fix for options fixed height * [DDW-1227] Add more optionHeight declarations * [DDW-1227] Fix typo * [DDW-1227] Add GlobalListeners mouse event on root element position * [DDW-1227] Fix flow issues * [DDW-1227] Update CHANGELOG * [DDW-1227] Update stoybook stories due to latest changes * [DDW-1227] CHANGELOG update * Prepare release 0.9.3 (#136) * Prepare release 0.9.3 Co-authored-by: MarcusHurney <marcushurney@gmail.com> Co-authored-by: Danilo Prates <daniloprates@gmail.com> Co-authored-by: Tomislav Horaček <tomislav.horacek@thespian.hr>
* [DDW-829] Installs react-custom-scrollbars as dependency * [DDW-829] Creates ScrollBar component * [DDW-829] Creates SCROLLBAR identifier * [DDW-829] Creates ScrollBarSkin using react-custom-scrollbars package * [DDW-829] Exports ScrollBarSkin from index using identifier * [DDW-829] Changes render prop to children * [DDW-829] Adds SCROLLBAR_THEME_API * [DDW-829] Adds theme api export * [DDW-829] Creates SimpleScrollBar theme file * [DDW-829] Exports SimpleScrollBar theme file * [DDW-829] Adds configurable CSS vars to theme file * [DDW-829] Swaps className prop for style prop * [DDW-829] Adds ScrollBar story * [DDW-829] Fixes ScrollBar height issue * [DDW-829] Cleans up ScrollBar storybook styles * [DDW-829] Updates CHANGELOG * [DDW-829] Removes root class from ScrollBar's theme * [DDW-829] Adds optionHeight prop to Options component * [DDW-829] Adds optionHeight prop to OptionsSkin and fixes scroll bar height calculation * Add support for *.module.scss file name convention * [DDW-829] Adds big countries list for testing * [DDW-829] Use maintained custom scrollbars package * [DDW-829] Fixes ESLint warning in ScrollBar story * [DDW-829] Arranges ScrollBar scss vars in ABC order * [DDW-829] Makes ScrollBar thumb darker * [DDW-829] Fixes ESLint error in Autocomplete behavior tests * [DDW-829] Fix broken jest snapshots by using enzyme While debugging a testing issue with the new scrollbar component i stumbled over the known problem of „react-test-renderer“ not being able to handle element refs correctly (since it doesn’t involve any real DOM rendering). You can read more about that issue here: facebook/react#7740 This was the root cause and i couldnt make it work with react-test-renderer, so i refactored all the snapshot tests to use enzyme (which supports full DOM rendering). You can see the difference (react-test-renderer outputs a JSON with react component „markup“ whereas enzyme outputs only plain DOM nodes) * [DDW-829] Updates CHANGELOG to include snapshot test refactoring * Prepares CHANGELOG for 0.9.2 release * 0.9.2 * 0.9.2-rc.1 * Fixes prepare-sass-files-for-publishing.js * 0.9.2-rc.2 * [DDW-733] Implement password input component * [DDW-733] Fixes ESLint warning * [DDW-733] Fixes flow error * [DDW-733] Fixes CSS variable names and adds comments to theme file * [DDW-733] Updates CHANGELOG * [DDW-1227] Fix options component dimensions (#135) * [DDW-1227] Introduce a fix for options fixed height * [DDW-1227] Add more optionHeight declarations * [DDW-1227] Fix typo * [DDW-1227] Add GlobalListeners mouse event on root element position * [DDW-1227] Fix flow issues * [DDW-1227] Update CHANGELOG * [DDW-1227] Update stoybook stories due to latest changes * [DDW-1227] CHANGELOG update * Prepare release 0.9.3 (#136) * Prepare release 0.9.3 * [DDW-246]: Eliminate usage of deprecated lifecycle methods (#138) * [DDW-246]: Eliminate usage of deprecated lifecycle methods * [DDW-246]: Restore single quote usage * [DDW-246]: Fix props type in tooltip component * [DDW-733] Refactor jest setup (#139) Co-authored-by: Nikola Glumac <niglumac@gmail.com> * [DDW-170] Improved Password input (#140) * [DDW-733] Refactor jest setup * [DDW-733] Implement advanced password input * [DDW-733] Refactor jest setup * [DDW-733] Implement advanced password input * [DDW-733] Center password input asteriks vertically * [DDW-733] Refine indicator and tooltip styles * [DDW-733] Add theme var for tooltip font-family * [DDW-733] Fix tooltip default font-family Co-authored-by: Nikola Glumac <niglumac@gmail.com> * [DDW-170] Improve password repeat feature * [DDW-170] Update changelog * [DDW-170] Prepare changelog for vNext * 0.9.4-rc.1 * [DDW-170] Add className prop to password input * 0.9.4-rc.2 * [DDW-170] Fix tooltip regression on hover * 0.9.4-rc.3 * [DDW-170] Fixes show on focus feature * 0.9.4-rc.4 * [DDW-170] Make tooltip border-radius configurable * 0.9.4-rc.5 * [DDW-170] Remove margin from password input * [DDW-170] Fix custom error logic * 0.9.4-rc.6 * [DDW-170] Fix pw input bg colors * 0.9.4-rc.7 * [DDW-170] Add dedicated flag for password repeats * 0.9.4-rc.8 * [DDW-170] Improve password repeat feature (#141) * [DDW-170] Improve password repeat feature * [DDW-170] Update changelog * [DDW-170] Prepare changelog for vNext * 0.9.4-rc.1 * [DDW-170] Add className prop to password input * 0.9.4-rc.2 * [DDW-170] Fix tooltip regression on hover * 0.9.4-rc.3 * [DDW-170] Fixes show on focus feature * 0.9.4-rc.4 * [DDW-170] Make tooltip border-radius configurable * 0.9.4-rc.5 * [DDW-170] Remove margin from password input * [DDW-170] Fix custom error logic * 0.9.4-rc.6 * [DDW-170] Fix pw input bg colors * 0.9.4-rc.7 * 0.9.4 * Update changelog Co-authored-by: MarcusHurney <marcushurney@gmail.com> Co-authored-by: Danilo Prates <daniloprates@gmail.com> Co-authored-by: Tomislav Horaček <tomislav.horacek@thespian.hr> Co-authored-by: Yakov Karavelov <yakovkaravelov@users.noreply.github.com> Co-authored-by: Nikola Glumac <niglumac@gmail.com>
* [DDW-829] Installs react-custom-scrollbars as dependency * [DDW-829] Creates ScrollBar component * [DDW-829] Creates SCROLLBAR identifier * [DDW-829] Creates ScrollBarSkin using react-custom-scrollbars package * [DDW-829] Exports ScrollBarSkin from index using identifier * [DDW-829] Changes render prop to children * [DDW-829] Adds SCROLLBAR_THEME_API * [DDW-829] Adds theme api export * [DDW-829] Creates SimpleScrollBar theme file * [DDW-829] Exports SimpleScrollBar theme file * [DDW-829] Adds configurable CSS vars to theme file * [DDW-829] Swaps className prop for style prop * [DDW-829] Adds ScrollBar story * [DDW-829] Fixes ScrollBar height issue * [DDW-829] Cleans up ScrollBar storybook styles * [DDW-829] Updates CHANGELOG * [DDW-829] Removes root class from ScrollBar's theme * [DDW-829] Adds optionHeight prop to Options component * [DDW-829] Adds optionHeight prop to OptionsSkin and fixes scroll bar height calculation * Add support for *.module.scss file name convention * [DDW-829] Adds big countries list for testing * [DDW-829] Use maintained custom scrollbars package * [DDW-829] Fixes ESLint warning in ScrollBar story * [DDW-829] Arranges ScrollBar scss vars in ABC order * [DDW-829] Makes ScrollBar thumb darker * [DDW-829] Fixes ESLint error in Autocomplete behavior tests * [DDW-829] Fix broken jest snapshots by using enzyme While debugging a testing issue with the new scrollbar component i stumbled over the known problem of „react-test-renderer“ not being able to handle element refs correctly (since it doesn’t involve any real DOM rendering). You can read more about that issue here: facebook/react#7740 This was the root cause and i couldnt make it work with react-test-renderer, so i refactored all the snapshot tests to use enzyme (which supports full DOM rendering). You can see the difference (react-test-renderer outputs a JSON with react component „markup“ whereas enzyme outputs only plain DOM nodes) * [DDW-829] Updates CHANGELOG to include snapshot test refactoring * Prepares CHANGELOG for 0.9.2 release * 0.9.2 * 0.9.2-rc.1 * Fixes prepare-sass-files-for-publishing.js * 0.9.2-rc.2 * [DDW-733] Implement password input component * [DDW-733] Fixes ESLint warning * [DDW-733] Fixes flow error * [DDW-733] Fixes CSS variable names and adds comments to theme file * [DDW-733] Updates CHANGELOG * [DDW-1227] Fix options component dimensions (#135) * [DDW-1227] Introduce a fix for options fixed height * [DDW-1227] Add more optionHeight declarations * [DDW-1227] Fix typo * [DDW-1227] Add GlobalListeners mouse event on root element position * [DDW-1227] Fix flow issues * [DDW-1227] Update CHANGELOG * [DDW-1227] Update stoybook stories due to latest changes * [DDW-1227] CHANGELOG update * Prepare release 0.9.3 (#136) * Prepare release 0.9.3 * [DDW-246]: Eliminate usage of deprecated lifecycle methods (#138) * [DDW-246]: Eliminate usage of deprecated lifecycle methods * [DDW-246]: Restore single quote usage * [DDW-246]: Fix props type in tooltip component * [DDW-733] Refactor jest setup (#139) Co-authored-by: Nikola Glumac <niglumac@gmail.com> * [DDW-170] Improved Password input (#140) * [DDW-733] Refactor jest setup * [DDW-733] Implement advanced password input * [DDW-733] Refactor jest setup * [DDW-733] Implement advanced password input * [DDW-733] Center password input asteriks vertically * [DDW-733] Refine indicator and tooltip styles * [DDW-733] Add theme var for tooltip font-family * [DDW-733] Fix tooltip default font-family Co-authored-by: Nikola Glumac <niglumac@gmail.com> * [DDW-170] Improve password repeat feature * [DDW-170] Update changelog * [DDW-170] Prepare changelog for vNext * 0.9.4-rc.1 * [DDW-170] Add className prop to password input * 0.9.4-rc.2 * [DDW-170] Fix tooltip regression on hover * 0.9.4-rc.3 * [DDW-170] Fixes show on focus feature * 0.9.4-rc.4 * [DDW-170] Make tooltip border-radius configurable * 0.9.4-rc.5 * [DDW-170] Remove margin from password input * [DDW-170] Fix custom error logic * 0.9.4-rc.6 * [DDW-170] Fix pw input bg colors * 0.9.4-rc.7 * [DDW-170] Add dedicated flag for password repeats * 0.9.4-rc.8 * [DDW-170] Improve password repeat feature (#141) * [DDW-170] Improve password repeat feature * [DDW-170] Update changelog * [DDW-170] Prepare changelog for vNext * 0.9.4-rc.1 * [DDW-170] Add className prop to password input * 0.9.4-rc.2 * [DDW-170] Fix tooltip regression on hover * 0.9.4-rc.3 * [DDW-170] Fixes show on focus feature * 0.9.4-rc.4 * [DDW-170] Make tooltip border-radius configurable * 0.9.4-rc.5 * [DDW-170] Remove margin from password input * [DDW-170] Fix custom error logic * 0.9.4-rc.6 * [DDW-170] Fix pw input bg colors * 0.9.4-rc.7 * Bump lodash from 4.17.15 to 4.17.19 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](lodash/lodash@4.17.15...4.17.19) Signed-off-by: dependabot[bot] <support@github.com> * Bump elliptic from 6.4.0 to 6.5.3 (#144) Bumps [elliptic](https://github.com/indutny/elliptic) from 6.4.0 to 6.5.3. - [Release notes](https://github.com/indutny/elliptic/releases) - [Commits](indutny/elliptic@v6.4.0...v6.5.3) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [issue-145] Remove deprecated postinstall-build package (#146) * [issue-145] Remove deprecated postinstall-build package * [issue-145] Update changelog * 0.9.5-rc.1 * Bump lodash.merge from 4.6.1 to 4.6.2 (#148) Bumps [lodash.merge](https://github.com/lodash/lodash) from 4.6.1 to 4.6.2. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump node-sass from 4.13.0 to 4.13.1 (#147) Bumps [node-sass](https://github.com/sass/node-sass) from 4.13.0 to 4.13.1. - [Release notes](https://github.com/sass/node-sass/releases) - [Changelog](https://github.com/sass/node-sass/blob/master/CHANGELOG.md) - [Commits](sass/node-sass@v4.13.0...v4.13.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Dominik Guzei <dominik.guzei@gmail.com> * 0.9.5 Co-authored-by: MarcusHurney <marcushurney@gmail.com> Co-authored-by: Danilo Prates <daniloprates@gmail.com> Co-authored-by: Tomislav Horaček <tomislav.horacek@thespian.hr> Co-authored-by: Yakov Karavelov <yakovkaravelov@users.noreply.github.com> Co-authored-by: Nikola Glumac <niglumac@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Just stumbled upon this, my solution for this was to not use react-test-renderer, but
Shoutout to https://www.leighhalliday.com/introduction-react-testing-library where I was able to find this API for generating snapshots. |
Tried this but still useRef is always null |
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
It's not possible to test component that use
ref
with thereact-test-renderer
utilitiesTesting: the refs are alwaysnull
.What is the expected behavior?
The ref should be usable.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
react@15.3.1
react-dom@15.3.1
react-test-renderer@15.3.1
Only tested with these versions.
The text was updated successfully, but these errors were encountered: