This package reduces component testing boilerplate code by providing a handy mount
and shallow
functions using enzyme.
Run the following command:
npm install --save-dev react-component-setup
I read an article by Tomasz Bak
describing some best react practices. One practice described that you should use a setup() instead
of a beforeEach (in jest) for your code to be more readable. I liked this practice and incorporated into one of my projects.
However, immediately, it became tedious to write a setup() for every component; thus I created react-component-setup
.
First, install the required packages!
Import the package:
import { SetupComponent } from 'react-component-setup';
Then run the SetupComponent
initially in your Reactjs test file to generate
default properties and automatic element fetching.
SetupComponent
will return an object with mount
and shallow
functions.
Each of which corresponds with their respective enzyme call. Example return:
{
mount: [mount Function],
shalllow: [shallow Function]
}
import React, { Component } from 'react';
import { SetupComponent } from 'react-component-setup';
class CoolReactComponent extends Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<p>I am a cool react component</p>
</div>
);
}
}
const { shallow: setup } = SetupComponent({ component: CoolReactComponent }); // Component to construct
// I could have used mount instead of shallow if needed
Note that the { shallow: setup } = ...
is just a javascript object deconstructor.
Then add a simple test using whatever testing framework you want, in this case, I used jest.
describe('CoolReactComponent', () => {
it('should render a cool component', () => {
const { wrapper } = setup();
expect(wrapper.exists()).toBe(true);
});
});
Both mount
and shallow
return an object of wrapper
which is the enzyme shallow container of the constructed component.
Most components have properties. In order to supply your properties to the component provide an object with the properties value. Example:
import React, { Component } from 'react';
import { SetupComponent } from 'react-component-setup';
class NameDisplayer extends Component {
render() {
return (
<h1>First name: {this.props.firstName}. Last name: {this.props.lastName}.</h1>
);
}
}
const { shallow: setup } = SetupComponent({ component: NameDisplayer });
setup({
firstName: 'Mark'
lastName: 'Johnson'
}); // returns component like <h1>First name: Mark. Last name: Johnson.</h1>
If you want to find an element automatically (you test that element quite often)
You can add it to the SetupComponent
's elementsToFind list.
All elementsToFind does is it returns the wrapper.find()
of the query
using the name
.
Example:
import React, { Component } from 'react';
import { SetupComponent } from 'react-component-setup';
class CoolReactComponent extends Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<p className="cool-paragraph">I am a cool react component</p>
</div>
);
}
}
const { shallow: setup } = SetupComponent({
component: CoolReactComponent,
elementsToFind: [ // the elements that should be found automatically
{
name: 'coolParagraph',
query: '.cool-paragraph'
}
]
});
describe('CoolReactComponent', () => {
it('should render a chill paragraph', () => {
const { coolParagraph } = setup(); // coolParagraph is from the name in the list
expect(coolParagraph.html()).toMatchSnapshot();
});
});
I have had trouble using elementsToFind with inputs when simulating a change.
Simulating a change on input causes any variable reference to the element to become stale, thus the variable is useless since you will need to reuse the wrapper.find
method.
See more here.
To fix this issue a newly created refresh
method has been added to automatically refind the element for you.
Basic Example:
const { wrapper, coolCustomElementToFind, refresh } = setup(); // setup is the the shallow or mount function created from SetupComponent
const refreshedCustomElement = refresh(coolCustomElementToFind); // refresh does not change coolCustomElementToFind
Full Example:
import React, { Component } from 'react';
import { SetupComponent } from 'react-component-setup';
class InputComponent extends Component {
state = {
val: 'unchanged'
};
changeVal = event => this.setState({ val: event.target.value });
render() {
return (
<div>
<h1>title</h1>
<input value={this.state.val} onChange={this.changeVal} />
</div>
);
}
}
const { shallow: setup } = setupComponent({
component: InputComponent,
elementsToFind: [
{
name: 'input',
query: 'input'
}
]
})
describe('Component', () => {
it('updates values', () => {
const { input, refresh } = setup();
input.simulate('change', { target: { value: 'A new input value!' } });
// By now the input variable is outdated and it's `props('value')` don't actual match the new value
// It needs to be refreshed
expect(refresh(input).props().value).toBe('A new input value!');
});
});
If you want to add default properties to your component add an object to the SetupComponent
function. Example:
import React, { Component } from 'react';
import { SetupComponent } from 'react-component-setup';
class DisplayName extends Component {
render() {
return (
<h1>Hello {this.props.name}!</h1>
);
}
}
const { shallow: setup } = SetupComponent(
component: DisplayName,
defaultProps: { // the default props for the component
name: 'Kyle'
}
);
setup(); // returns element that is <h1>Hello, Kyle!</h1>
Note: default props will be overridden by props provided in the setup function call.
To add TODO!
If you want to add enzyme options
to the shallow or mount command they can be provided similarly to default properties via the defaultEnzymeOptions
.
Example:
import { SetupComponent } from 'react-component-setup';
const { shallow: setup } = SetupComponent(
component: ComponentName,
defaultEnzymeOptions: {
context: {
themecolor: '#fff'
}
}
);
To change the options on the fly provide a second argument to shallow/mount function.
import { SetupComponent } from 'react-component-setup';
const { shallow: setup } = SetupComponent(
component: ComponentName,
defaultEnzymeOptions: {
context: {
themecolor: '#fff'
}
}
);
setup({}, { context: { themecolor: '#different theme color' } )
-
react
version ^0.14.9 || ^15.0.0 || ^16.0.0 -
react-dom
version ^0.14.9 || ^15.0.0 || ^16.0.0 -
enzyme
version ~3.3.0
react-component-setup is MIT licensed.