What are Jest and Enzyme?
Jest and Enzyme are tools which are used in tandem to test React components, and are used in the C#Bot testing framework for unit tests of client-side components. While they are used in this context to test react components, Jest is not specific to React, and can be used in other JavaScript applications. Enzyme however is a tool which is specific to React.
Jest
Jest is a JavaScript testing framework, it is used for running tests and making assertions in the C#Bot client-side tests. Jest uses matchers to make assertions, the syntax takes the following form.
expect(value).toBe(expectedValue);
expect(value).toBeDefined();
expect(value).toBeGreaterThan(expectedValue);
expect(value).toBeGreaterThanOrEqual(expectedValue);
expect(value).toBeLessThan(expectedValue);
expect(value).toBeLessThanOrEqual(expectedValue);
expect(value).toBeTruthy();
expect(value).toBeFalsy();
A test may be structured like the example below.
describe('Test Suite Name', () => {
//Actions to be performed before and after each test of the test suite as a whole
//These functions are optional but could be used to set up or tear down objects used in the tests
beforeEach(() => {
//Runs once before every test in the testing suite
});
beforeAll(() => {
//Runs once before the tests begin executing
});
afterEach(() => {
//Runs once after every test in the suite has concluded
});
afterAll(() => {
//Runs one time once all of the tests have concluded
});
//Use this test structure for parameterless tests
it('is the name of the test', () => {
//Use enzyme to create/interact with the component
//Use Jest matchers to make assertions
});
//Use this test structure for tests with parameters.
//You can create an array of potential inputs, and the test will run once for each entry in the array
test.each(dataArray)(
"given a string input %p we expect to return the string output %p", (inputString, outputString) => {
//test code goes here
//Use Jest matchers to make assertions
}
);
});
Enzyme
Enzyme is a JavaScript testing utility for React which allows you to create instances of React components for testing purposes. When using these components, you can search for elements via their class or id, and then click it (if the element is a button), simulate key presses (if the element is a text box, or another type of element which can be modified through typing), or get the text contained within that element. Combining these actions allows you to interact with individual components, and then make assertions using Jest based on these interactions. Some examples of general enzyme usage can be found below.
When using Enzyme, component instances are called ‘Wrappers’, and can be created in two main ways, shallow and mount. The primary difference between these two ways of rendering a wrapper is that a mount will also render any sub components of the top level component, whereas the shallow render will not.
describe('Enzyme example', () => {
it('is an example of the Enzyme wrapper types', () => {
const shallowWrap = shallow(<ComponentName {...props} />); //Sub-components of ComponentName will not be rendered
const mountWrap = mount(<ComponentName {...props} />); //Sub-components of ComponentName will be rendered
});
});
Once you have created a component wrapper, you can traverse to the elements within the wrapper in order to interact with different parts of the React component. This traversal is done with the find() function, which returns another wrapper of the element in question, meaning that any other functions which apply to Enzyme wrappers also apply to a wrapper created through traversal.
describe('Enzyme example', () => {
it('is an example of wrapper traversal', () => {
const wrap = mount(<ComponentName {...props} />);
const traversedWrap = wrap.find('button'); //traversedWrap can be used in the same way as other wrapper elements
traversedWrap.simulate('click') //Click on the element
traversedWrap.text(); //returns the text contained within the wrapper element
});
});
There may also be some scenarios where you want to run the functions of the react component which you testing, instead of simulating clicks, key presses, or getting text. Enzyme has a method which lets you run the functions, an example of which can be seen below.
describe('Enzyme example', () => {
it('is an example of running a wrappers function', () => {
const wrap = mount(<ComponentName {...props} />);
const instance = wrap.instance(); //instance is an ComponentName object which represents the component wrapped by enzyme
instance.method(); //Once an instance has been created, methods of ComponentName can be run as normal
});
});
There are many other use cases for Enzyme, and a lot more functionality which has not been mentioned here, but these examples should be enough for you to get started using Jest and Enzyme to test your React Components.
Was this article helpful?