I have a React component that I am trying to test using Enzyme/Jest. I am trying to figure out what the most appropriate test would be to ensure the component has rendered.
My component has a prop shouldRender that, if false, will cause the component to not render. My component looks like this:
import React from 'react';
const propTypes = {
shouldRender: React.PropTypes.bool,
};
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
foo: 'bar',
};
}
render() {
if (!this.props.shouldRender) {
return null;
}
return (
<div>
<span>My component</span>
</div>
);
}
}
MyComponent.propTypes = propTypes;
export default MyComponent;
I have a test that looks like this:
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../MyComponent';
describe('MyComponent', () => {
it('Should render if we want it to', () => {
const component = shallow(<MyComponent shouldRender />);
expect(component).toBeDefined(); // Passes
});
it('Should not render if we do not want it to', () => {
const component = shallow(<MyComponent />);
expect(component).not.toBeDefined(); // Does not pass, as component isn't undefined.
});
});
I'd like the second test to fail, as the component isn't rendering. Is there a better way to go about testing whether or not a component has rendered?
Happy to provide any more information if it is needed.
Thanks!
So I've had a chat to some people and decided that maybe I am going about this the wrong way.
It's probably a better idea to determine whether or not this gets rendered by the parent component, otherwise any time I want to use MyComponent, I am going to have to pass this shouldRender prop into it.
MyComponent now looks like this:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
foo: 'bar',
};
}
render() {
return (
<div>
<span>My component</span>
</div>
);
}
}
MyComponent.propTypes = propTypes;
export default MyComponent;
and MyParentComponent that uses MyComponent looks like this:
import React from 'react';
const propTypes = {
myComponent: React.PropTypes.bool,
};
class MyParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
boz: 'baz',
};
}
render() {
return (
<div>
{ this.props.myComponent &&
<MyComponent />
}
</div>
);
}
}
export default MyComponent;
Not only does allow MyComponent to be more reusable, it removes the need for the test I wanted to write altogether. Thank you to everyone that looked at this.
I think Jest's snapshot testing is what you need. With snapshot testing when a test fails you can check to see if it's intended or unintended change. Check out their example here
Related
I am trying to pass a state as props to another component. The child component (a button on the page) isn't receiving any props. I did a console.log to print the props received from the parent but I get an empty object {}. What am I doing wrong here?
Here is an excerpt from my code:
loan.js (Parent)
<ForecloseBtn id={this.state.lead_id} foreclose={this.state.isForeclosed } test="xyz"/>
ForecloseBtn.js (Child)
import React from 'react';
import { render } from 'react-dom';
class ForecloseBtn extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
this.state = {
lead_id: this.props.id,
isForeclosed: this.props.foreclose,
sample: this.props.test
};
}
render() {
return (
......
)
}
};
const App = () => (
<ForecloseBtn />
);
export default App;
You have to add a propTypes like this
static propTypes = {
id: object.isRequired,
foreclose: func.isRequired,
}
and for sure
import {
func,
object,
} from 'prop-types'
You can check my fiddle
Pass props to child
Hope this helps.
I am trying to find a solution to setState from a parent within child promise.
The parent component is
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
transition: false
};
}
handleTransition = () => {
this.setState(state => ({ transition: !state.transition }));
};
render() {
return <Child handleTransition={this.handleTransition} />;
}
}
of which this.props.handleTransition is to be triggered from a child component as
class Child extends Component {
constructor(props) {
super(props);
this.state = {};
}
onSubmit = event => {
firebase
.doCreateUserWithEmailAndPassword(email, password)
.then(() => {
// Trigger this.props.handleTransition here
})
...
Where this.props.handleTransition is wanting to be triggered with then of onSubmit
Please let me know if you require more detail? I would prefer not to use a library or package to achieve this but if it makes life easier I may consider. Redux is likely the best option but I would prefer not to unless necessary.
Note: this.props.handleTransition(); does the job but esLint returns an error of Must use destructuring props assignmenteslint(react/destructuring-assignment) and I am considering that this method is not the correct method.
// --- parent.js
import React, { Component, Fragment } from "react";
import { ChildComponent } from './containers/child'
class ParentContainer extends Component {
handleUpdate = () => {
// whatever you want to do here
}
render(){
return (
<Fragment>
<ChildComponent onUpdate={this.handleUpdate} />
</Fragment>
);
}
}
export default ParentContainer;
// --- child.js
import React, { Component, Fragment } from "react";
export class ChildComponent extends Component {
this.someAsyncFunction = () => {
fetch('/just/for/example')
.then(res =>
// Do whatever you need here, then hit your function on parent by bubbling the request up the chain
this.props.onUpdate();
)
}
render(){
return (
// whatever you want to do with this data
);
}
}
I have a code like this in my React application:
import React from 'react';
import ReactDOM from 'react-dom';
import ComponentB from './ComponentB';
class ComponentA extends React.Component {
constructor(props) {
super(props);
this.condition = this.props.condition;
}
render() {
return ReactDOM.createPortal(
<div id="abc"></div>,
document.getElementById('xyz'))
}
componentDidMount() {
ReactDOM.createPortal(
<div>
{
this.condition &&
<ComponentB />
}
</div>,
document.body)
}
}
Basically, I want to render ComponentB only after ComponentA has been mounted to DOM. Hence I have put the code for ComponentA inside componentDidMount of ComponentB. But still ComponentB is rendering before ComponentA has finished mounting to DOM.
Why is this happening and what's the solution to this problem?
I am not sure why you are using createPortal. But if you just want to achieve your goal, you just need to set your state condition in componentDidMount of first component telling to start rendering of your second component.
See if this helps.
const ComponentB = () => {
return (
<div>Hi is is componentB</div>
);
}
class ComponentA extends React.Component {
constructor(props) {
super (props);
this.state = {
renderB: false
};
}
componentDidMount() {
this.setState({
renderB: true
});
}
render () {
let {renderB} = this.state;
return (
<div>
<h3>Hey i am component A</h3>
{
renderB? <ComponentB /> : null
}
</div>
);
}
}
For jest test file I want to import component and that method.
For example I have this component :
import React from 'react'
class Dashboard extends React.Component {
constructor(props) {
super(props)
}
sum(one, two) {
return one + two
}
render() {
return(
<div>
<h1>{this.sum(12, 14)}</h1>
</div>
)
}
}
export default Dashboard
So, in the test file I like to test component with render and sum function with toEqual :
import React from 'react';
import ReactDOM from 'react-dom';
import Dashboard from '../Dashboard';
it('check component', () => {
const div = document.createElement('div');
ReactDOM.render(<Dashboard />, div);
});
it('check sum function', () => {
expect(sum(12, 12)).toEqual(24);
});
But the second test and sum has failed, because the test function could not find sum function ...
How can I export component and that contain method ?
Thanks
If you want test a function, that doesn't depend on a component you can use static modifier:
import React from 'react'
class Dashboard extends React.Component {
constructor(props) {
super(props)
}
static sum(one, two) {
return one + two
}
render() {
return(
<div>
<h1>{Dashboard.sum(12, 14)}</h1>
</div>
)
}
}
export default Dashboard
it('check component', () => {
const div = document.createElement('div');
ReactDOM.render(<Dashboard />, div);
});
it('check sum function', () => {
expect(Dashboard.sum(12, 12)).toEqual(24);
});
In most cases it isn't necessary to test react-component methods separately.
Another way to solve you problem is move sum to separate module. Then you can add unit tests to this module.
I’m trying to understand why my jest/enzyme tests are failing. I have a component that I use the compose function from redux in, structured as following:
class MyComponent extends Component {
//code here
}
export default compose(
connect(mapStateToProps),
)(MyComponent)
In my jest test, I do this:
Import { MyComponent } from ‘app/MyComponent’;
describe(‘<MyComponent />’, () => {
let component;
beforeEach(() => {
props = {
id: ‘23423’
}
component = shallow(<MyComponent {…props} />);
}
it(‘Loads correctly’, () => {
expect(component.state(‘isLoading’)).toEqual(true);
expect(component.find(‘InnerComponent’).length).toBe(1);
}
However, I get errors like "Cannot read property 'state' of undefined". I understand that using shallow rendering doesn't give me the exact structure that I need, but I'm not sure what else to try to get the right structure. I tried shallow-rendering the wrapped component and then finding the unwrapped component within it, like so, component = shallow(<MyComponent {...props} />).find('MyComponent').shallow();, with no luck. Any other suggestions would be appreciated.
`
Usually you want to test the component and not the integration of the component with redux:
class MyComponent extends Component {
//code here
}
export { MyComponent } // export the component
export default compose(
connect(mapStateToProps),
)(MyComponent)
Also on your test you would import the named export import { MyComponent } from '...' instead of importing the default: import MyComponent from '..'
import { MyComponent } from ‘app/MyComponent’;
describe(‘<MyComponent />’, () => {
let component;
beforeEach(() => {
props = {
id: ‘23423’
}
component = shallow(<MyComponent {…props} />);
}
it(‘Loads correctly’, () => {
expect(component.state(‘isLoading’)).toEqual(true);
expect(component.find(‘InnerComponent’).length).toBe(1);
}
}
If you want to test component interactions with your redux store you need to wrap your component with a <Provider />
import { MyComponent } from ‘app/MyComponent’;
import { Provider } from 'react-redux'
describe(‘<MyComponent />’, () => {
let component;
beforeEach(() => {
props = {
id: ‘23423’
}
component = shallow(<Provider><MyComponent {…props} /></Provider>);
}
You should definitely read the testing section of the redux documentation