React
To p Think of a snapshot
as being like a photograph.
It takes a snapshot of our
component at a specific
point in time})
}
This render gives us access to all of the rendered
properties of the compiled component. It might be
good to drop this into a console.log() so you can see
more clearly what it does.
If you do, you’ll see that there are a few useful
properties we can take advantage of here. I’m
going to make an assertion (make a testable
declaration) and test it by extracting the container.
The container ‘contains’ the DOM nodes (all of the
HTML) associated with the component.
it(‘renders with basic props’, () => {
const { container } = render(
})
Now we have access to the container, how do I tell that
it’s rendered according to my assertion? By adding a
snapshot test.
Think of a snapshot as being like a photograph.
It takes a snapshot of our component at a specific
point in time. Then whenever we make alterations
to the code, we can see if it still matches the original
snapshot. If it does, we can be confident that nothing
has changed in the component.
However, if it doesn’t we might have uncovered an
issue that originated in another component, one that
we might not have spotted previously:
it(‘renders with basic props’, () => {
const { container } = render(
expect(container).toMatchSnapshot()
)
TEST PROPERTIES
Props, or properties, of a component can be tested
with snapshots, too. Testing the different props you
provide to your component will give you greater
coverage and confidence. You never know when a
requirement is going to mean your component’s props
are refactored and the final output will change.
Add the following object to the top of your file:
const lightProperties = {
backgroundColour: ‘white’,
textColour: ‘darkblue’
}
We define the properties in an object and then use
the spread operator (three dots followed by the object
name: ...lightproperties) because we can only pass one
argument in when we render this way. It’s also useful
to see what properties you’re passing in isolation:
it(‘renders with basic props’, () => {
const { container } = render(<MyComponent />
)
expect(container).toMatchSnapshot()
})
it(‘renders with the light version props’, () => {
const { container } = render(
<MyComponent { ...lightProperties } />
)
expect(container).toMatchSnapshot()
})TEST CHANGES IN THE UI
Imagine our component has a button and you want to
make sure that something happens when the button
is clicked. You might think that you want to test the
state of the application; for example, you might be
tempted to test that the state has updated. However,
that’s not the object of these tests.
This introduces us to an important concept in using
a testing library: we’re not here to test the state or
the way our component works. We’re here to test how
people are going to use the component and that it
meets their expectations.
So whether or not the state has updated is
immaterial; what we want to test is what the outcome
of that button press is.
Let’s imagine we’re testing the outcome of a
function that changes the UI from dark mode to light
mode. Here’s the component: