Test React Component Props with Enzyme and Jest
With our component rendered and our assertions testing our nodes, lets test our component’s props. We will use the shallow render methods .props and .prop to test that our component’s props are being passed through correctly. Next we’ll use .setProps to set new props within our components and test that our component handles them correctly.
Instructor: [00:00] To begin writing test for component in node-props, let's create a new component. Export class link, extends components, our render method, and we'll return an a-tag with this.props.address. Click and close the a-tag. Perfect.
[00:18] Now we have a simple component called link that returns an a-tag with an href that will receive its value by a prop named address. Inside of our test, let's make a new describe block.
[00:31] We'll do describe, and then our link component. For our first it, it will be link component, accepts address prop. Inside of this block, we'll do const wrapper equals shallow our link component, within address prop. That goes to google.com.
[00:49] Let's make sure that we import this link component from our app file. We'll do expect(wrapper.instance.props.address) is google.com.
[01:01] When it comes to testing component props with Enzyme, it's important to understand which prop or the component we're trying to test. What do we mean by this is, are we trying to test the actual instance of the component? This address prop value right here, or are we trying to test the href value on the return a-tag node?
[01:22] For our first test here, we are testing the actual instance of the link address prop. We can see that this is passing our test.
[01:31] Next we'll do a-tag node renders href correctly. This block will do a new const wrapper equals shallow our link component address. It is google.com.
[01:43] We'll expect that our wrapper.props.href is google.com. Perfect. This test passes. With this test, we are making sure that our href is using the correct prop value, contrary to our first test where we used the instance, now we're just using the props method on the wrapper itself.
[02:05] This will return all the props of the components return node. In our case, we're looking at the a-tag. It's treating the href like a prop. Our two tests are testing the same prop essentially, but in different ways.
[02:21] What if our component had a conditional return value depending on the prop that's passed? What if we did this.props.height as a ternary returning null?
[02:31] Let's write a new test for this. We'll do it returns null with true height prop. Into this block, we'll do const wrapper equals shallow our link component with the height of false. Going to expect wrapper.find our a.length to be one.
[02:51] This test does pass, which means that this false value that we're passing on the height prop is actually returning our a-tag. Let's test if our null was being returned correctly.
[03:02] If we do wrapper.setProps with an object where height is true now, we can expect that our wrapper.get(0is null. It looks like our test still passes.
[03:15] Now, setProps is a method that takes an object and passes it through as new props to our component. This causes a re-render of our component. It's useful when wanting to test how components behave over time with changing props.
[03:31] This method will call, component will receive props lifecycle method on the component. Our get method simply returns the node at the given index of the current wrapper.
[03:42] To wrap it all up, we're using the toBeNull method from Jest to make sure that this node that we are returning is actually null.