We are going to mock a Falcon Client component that grabs data from
We our going to create a simple component that grabs store configuration (using
Apollo) and renders it on the page.
It's worth checking this works on your site. I added the
<Banner /> component and saw the text
If that's not working, check you have the config
appName in your
Create the file
Now we are going to add our first test. This test won't test the component but we just want to check out tet file is being run.
Now from your client directory run the
test command (
yarn test or
You should see the following text:
o from in the same command line window. That will watch for tests that have changed.
Change the description of the text, save it and you should see the test run again automatically, this time with a little more detail.
Now we are going to test our component and check it does what's expected.
The first thing we need to do is check the loading state. If you're familiar with
Jest this will look very similar.
We are testing that the text
loading... is rendered. In reality you might want to test something less specific.
We use the
apollo prop with our
<FalconClientMock /> component to map our GraphQL queries. This means that we don't need to rely on an API to test our component, it's completely seperated....a unit test.
You will notice the mock passes both the query and the result.
If you go back to your terminal window you should see this test passing.
If you want to check it's behaving how you expect you could change the test to make sure it fails if the text isn't
We will also want to write a test to check the loaded state.
You'll notice we are now adding
data to the
result in our mock.
waait resolves a promise after a set timeout. This allows us to wait for the data to be fetched correctly so we don't get our loading state.
act is required when a components state changes / re-render occurs. Without this your test will work but will throw a horrible warning.
You will notice we are testing the
appName added to
result in the mock not the true
appName from our config. This allows us a control and means we can be very specific about what we expect.
That's it, our test is now ready.
Here is the final code for the test file.