{"id":3165,"date":"2020-02-18T16:42:33","date_gmt":"2020-02-18T16:42:33","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3165"},"modified":"2020-10-15T22:07:20","modified_gmt":"2020-10-15T22:07:20","slug":"testing-ionic-react-apps-with-jest-and-react-testing-library","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/testing-ionic-react-apps-with-jest-and-react-testing-library","title":{"rendered":"Testing Ionic React Apps with Jest and React Testing Library"},"content":{"rendered":"

It’s 2020, and the testing frameworks for JavaScript applications have improved dramatically over the past few years.<\/p>\n

Thanks to tools like Jest and React Testing Library, you can be testing your apps with a few lines of code.<\/p>\n

Have you been looking into testing an Ionic React project, but not sure where to start? In this post, I’ll go over the basics of how to get started as we build out an app using tests.<\/p>\n

<\/p>\n

The Tools<\/h2>\n

First, let us go over a few of the tools that we will be using.<\/p>\n

Jest<\/a> is a testing framework built by the teams at Facebook (like React) and is very similar to other test frameworks like Jasmine and Mocha. Jest has been the defacto standard in React testing for quite a while and is gaining popularity in other communities as well. What makes Jest great is it is easy to use, is flexible in the types of tests you want to create, and has a powerful test runner that is smart about running only tests for code that has changed.<\/p>\n

Jest is already included and set up when you create a new Ionic React project, so getting started is super easy.<\/p>\n

React Testing Library<\/a> (RTL from here on out) is a relative newcomer to the React landscape, but it is also grown immensely in popularity. RTL lets you test React components without relying on the internal implementation details of the component. This approach mimics more of the way an actual user would use the app and promises to make tests more reliable and less brittle to change.<\/p>\n

<\/p>\n

React Testing Library is now included when creating a new Ionic App and is our recommended test library.<\/p>\n

The Ionic React Test Utils<\/a> is a small suite of utilities that can help when testing Ionic React apps. It includes helpers to fire off custom Ionic events and mocks around some of our more complex components.<\/p>\n

Getting Started<\/h2>\n

Our demo will keep a list of things we need to get done (don’t call it a todo app!). Okay, it’s a todo app, but a todo app is basic enough yet covers a few of the points I want to hit on testing Ionic components.<\/p>\n

Start off creating a New Ionic React project via the Ionic CLI:<\/p>\n

ionic start ionic-react-todos blank --type=react  \n<\/code><\/pre>\n
\n  If you are new to Ionic and need to get things set up, view our getting started guide here<\/a>.\n<\/p><\/blockquote>\n
This command kicks off a new Ionic React project named “react-todos”  using the blank template.<\/p>\n
Next, we need to install Ionic React Test Utils, which we will use a bit later on. Go into the new directory and install the npm package:<\/p>\n
cd ionic-react-todos\nnpm i @ionic\/react-test-utils\n<\/code><\/pre>\n
Open up the project in your code editor. If you look in the src<\/code> folder, you might notice that we already have a test file created for us in App.test.tsx<\/code>. It is a simple test that just makes sure the main app component renders correctly without throwing an error.<\/p>\n
it('renders without crashing', () => {\n  const div = document.createElement('div');\n  ReactDOM.render(<App \/>, div);\n  ReactDOM.unmountComponentAtNode(div);\n});\n<\/code><\/pre>\n
Go back into your command line, and fire up the Jest test runner:<\/p>\n
npm run test\n<\/code><\/pre>\n
\"\"
You might get a message saying there were no tests found, which is because Jest (by default) only runs tests on files that are modified since the last git commit. This is pretty handy and helps speed up testing by only running tests on files you are currently working on. Fortunately, we can see on the menu that we can change the “Watch Usage”. Press “a” to run all tests.<\/p>\n
\"\"
Go ahead and leave Jest running. If we make any changes to our code, Jest automatically reruns the tests.<\/p>\n
Your First Test<\/h2>\n
Okay, back in the code, let’s create a test at src\/pages\/Home.test.tsx<\/code>. We will create a basic test that makes sure the title of our page is “Ionic React Todos”. Paste the following code into the test:<\/p>\n
import React from 'react';\nimport { render } from '@testing-library\/react';\nimport Home from '.\/Home';\n\ntest('page should have a title of Ionic React Todos', async () => {\n  const { findByText } = render(<Home \/>);\n  await findByText('Ionic React Todos');\n});\n<\/code><\/pre>\n
Let’s break down the basic anatomy of a test. First, we have our imports, including the render<\/code> method from RTL and then our Home<\/code> component. Then we have our actual test. The test<\/code> method is from Jest and is available globally, so there is no need to import it. For its first parameter, it takes in the name of the test, in which we usually provide some detailed text about what we are trying to accomplish, and then an anonymous function that contains the code for the test.<\/p>\n
The render<\/code> method takes our component and returns a bunch of helper methods to aid us in selecting pieces of the DOM that was rendered. The findByText<\/code> method is one of them, and it looks for an element that contains the text passed into it. If it doesn’t find one (or finds more than one), findByText<\/code> throws an error. Therefore, there is no need for us to test the return value of findByText<\/code> in this case.<\/p>\n
For a list of all the helper methods render<\/code> returns, check out the RTL docs here<\/a>.<\/p>\n
If you view Jest again you will see that the test failed:<\/p>\n
\"\"
We get a descriptive output about what happened and where. But basically, our text “Ionic React Todos” wasn’t found. Update the <IonTitle><\/code> text in the Home component and come back, the tests should now pass:<\/p>\n
\"\"
Now that’s what we like to see!<\/p>\n
Building the Todo List<\/h2>\n
We have our first test passing, so that means it is time to write another failing one! When we have no todos to display, we want a message that says there are none. Here is the test for that:<\/p>\n
test('when there are no todos, a no todos message should show', async () => {\n  const { findByText } = render(<Home \/>);\n  await findByText('No todos, add some!')\n});\n<\/code><\/pre>\n
Take a look at the Jest runner, and you should see the new test failing. Let’s update the component to display the message when there are no todos.<\/p>\n
To get started, add a Todo<\/code> interface to the top of Home<\/code> and create a state variable using the useState<\/code> hook to hold the todos. Also, update the <IonContent><\/code> to display a message if there are no todos.<\/p>\n
Update Home<\/code> to:<\/p>\n
export interface Todo {\n  id: number;\n  text: string;\n}\n\nconst Home: React.FC = () => {\n  const [todos, setTodos] = useState<Todo[]>([]);\n  return (\n    <IonPage>\n      <IonHeader>\n        <IonToolbar>\n          <IonTitle>Ionic React Todos<\/IonTitle>\n        <\/IonToolbar>\n      <\/IonHeader>\n      <IonContent className="ion-padding">\n        {todos.length === 0 ? (\n          <div>No todos, add some!<\/div>\n        ) : (\n            <div>todos will go here<\/div>\n          )}\n      <\/IonContent>\n    <\/IonPage>\n  );\n};\n<\/code><\/pre>\n
Our last test should now be passing. Let us write another to make sure our todos appear when there are some:<\/p>\n
test('when TodoList is loaded with todos, then the todos should be in the list', async () => {\n  const todos: Todo[] = [\n    { id: 1, text: 'review PR' },\n    { id: 2, text: 'update docs' }\n  ];\n  const { findByText } = render(<Home \/>);\n  await findByText(todos[0].text);\n  await findByText(todos[1].text);\n});\n<\/code><\/pre>\n
We are running a couple of findByText<\/code> calls here to make sure both the todos are added. If either of these fails to find an element, then an error is thrown.<\/p>\n
Next, replace the <div>todos will go here<\/div><\/code> placeholder with this snippet which creates an IonList<\/code> with an IonItem<\/code> for each of the todos:<\/p>\n
<IonList>\n  {todos.map((todo, i) => (\n    <IonItem key={i}>\n      <IonLabel>\n        <h2>{todo.text}<\/h2>\n      <\/IonLabel>\n      <IonIcon data-icon="trash" icon={trash} color="danger" slot="end" \/>\n    <\/IonItem>\n  ))}\n<\/IonList>\n<\/code><\/pre>\n
\n  All the Ionic components are imported from @ionic\/react<\/code>, and the trash<\/code> icon is imported from ionicons\/icons<\/code>.\n<\/p><\/blockquote>\n
But wait, how’s our Home<\/code> component getting the array of Todos? Right now, it’s not. Let’s pretend the Home<\/code> component calls into an API to fetch the todos. We won’t have a real API, but we will create and load a json file with some data. Create a file at public\/assets\/todos.json<\/code> and paste the following into it:<\/p>\n
[\n  {\n    "id": 1, "text": "review PR"\n  },\n  {\n    "id": 2, "text": "update readme"\n  },\n  {\n    "id": 3, "text": "write docs"\n  }\n]\n<\/code><\/pre>\n
Back in Home<\/code>, add a useEffect<\/code> hook to call into the API and set the todos state:<\/p>\n
useEffect(() => {\n  async function doFetch() {\n    const result = await fetch('\/assets\/todos.json');\n    const data = await result.json();\n    setTodos(data);\n  }\n  doFetch();\n}, []);\n<\/code><\/pre>\n
Mocking an HTTP Request<\/h2>\n
Our tests start to fail because the fetch call won’t be able to make the request while running in Jest. Fortunately, Jest allows us to mock fetch and return specific data. Add the following mockFetch<\/code> method to the test file, which allows us to pass in some data that returns from the fetch<\/code> call, as well as the beforeEach<\/code> Jest helper, which calls the mock function before each test runs:<\/p>\n
function mockFetch(data: any) {\n  return jest.spyOn(window, 'fetch').mockResolvedValue(new Response(JSON.stringify(data)));\n}\n\nbeforeEach(() => mockFetch([]));\n<\/code><\/pre>\n
In the last test, we can call mockFetch<\/code> and pass in our todo array:<\/p>\n
\/\/ todos array\nmockFetch(todos);\n\/\/ render and fetchByText methods\n<\/code><\/pre>\n
When the component calls fetch<\/code>, it now returns the mock test data we have set up for it, and our test passes.<\/p>\n
Adding a Todo<\/h2>\n
Next up is the bulk of our functionality, adding a todo to the list!<\/p>\n
The next test does quite a bit. We will test clicking an add todo button, verifying the todo from loads, filling out the form, submitting the form, and lastly, making sure the todo appears in the list. This might seem like a lot, but RTL promotes testing a page, much like how a user would interact with it. This lets us cover quite a bit of functionality in a single test.<\/p>\n
Go ahead and start to stub out the test with our first step: clicking a button to display the new todo form:<\/p>\n
test('when clicking the new button, we should be able to add a new todo', async () => {\n  const { findByTitle, findByText } = render(<Home \/>);\n  const addButton = await findByTitle('Add Todo');  \n  fireEvent.click(addButton);\n});\n<\/code><\/pre>\n
fireEvent<\/code> is imported from @testing-library\/react<\/code> and helps us simulate user interaction with the DOM elements that get returned. Here we are using it to click the addButton<\/code>.<\/p>\n
We are also using a new function returned from render<\/code> here, findByTitle<\/code>, which works very similarly to findByText<\/code>, but instead looks for an element for a certain title. Update the Home<\/code> component and add the following right above the closing <\/IonContent><\/code> tag:<\/p>\n
<IonFab vertical="bottom" horizontal="end">\n  <IonFabButton title="Add Todo" onClick={() => setShowModal(true)}>\n    <IonIcon data-icon="add" icon={add} \/>\n  <\/IonFabButton>\n<\/IonFab>\n<IonModal\n  onDidDismiss={() => setShowModal(false)}\n  isOpen={showModal}\n>\n  {\/* Todo Form will go here *\/}\n<\/IonModal>\n<\/code><\/pre>\n
Also add the state variable (right below the todos state) to maintain if we are displaying the modal containing the todo form:<\/p>\n
const [showModal, setShowModal] = useState(false);\n<\/code><\/pre>\n
Buh uh oh, the tests have started to fail due to a new error:<\/p>\n
\"\"
This error leads us up to a bit of a tricky spot when it comes to testing Ionic React.<\/p>\n
Using Ionic React Test Utils to mock Ionic Web Components<\/h2>\n
\n  Note: Right before this blog was published, the JSDOM team announced<\/a> customElement support for JSDOM. We are excited for this and will monitor if it fixes the issues we ran into and will update the post accordingly.\n<\/p><\/blockquote>\n
Ionic is written in web components, and Ionic React is a thin layer around those components to make them feel and behave more like the React components. Unfortunately, JSDOM does not currently support web components and errors if trying to access web component API, like customElements<\/code> in the error above.<\/p>\n
What we can do here, though, is use Jest to mock out the Ionic React components that can’t render (like IonModal), which is where Ionic React Test Utils (IRTU) comes into play. IRTU provides a helper that can mock out all known Ionic components that have issues rendering in JSDOM. The mocked components simulate the actual ones by rendering minimal DOM to test.<\/p>\n
To set it up, go into src\/setupTests.ts<\/code> file and update it with:<\/p>\n
import { mockIonicReact } from '@ionic\/react-test-utils';\nmockIonicReact();\n<\/code><\/pre>\n
That should get the test passing.<\/p>\n
\n  For more info around this method, read Testing Web Components in React<\/a> on Dev.to.\n<\/p><\/blockquote>\n
Testing the Form<\/h2>\n
Ok, let’s continue flushing this test out. Now that the modal is loading, we will get the input box and save button:<\/p>\n
const input = await findByTitle('Todo Text');\nconst button = await findByText('Save');\n<\/code><\/pre>\n
Time to implement the functionality for the form. Add the following form to the IonModal<\/code> in Home<\/code>, replacing {\/* Todo Form will go here *\/}<\/code>:<\/p>\n
<IonToolbar>\n  <IonTitle>Add Todo<\/IonTitle>\n<\/IonToolbar>\n<IonContent>\n  <IonList>\n    <IonItem>\n      <IonLabel position="stacked">Todo<\/IonLabel>\n      <IonInput id="todo" title="Todo Text" value={text} onIonChange={e => setText(e.detail.value!)} \/>\n    <\/IonItem>\n  <\/IonList>\n  <IonButton expand="block" onClick={addTodo}>\n    Save\n  <\/IonButton>\n<\/IonContent>\n<\/code><\/pre>\n
And add the new text\/setText state variables as well as the method to save the todos to the top of the function:<\/p>\n
const [text, setText] = useState('');\n\nconst addTodo = () => {\n  const nextId = todos.reduce((id, todo) => Math.max(id, todo.id!), 0) + 1;\n  const todo: Todo = {\n    id: nextId,\n    text\n  };\n  setTodos([...todos, todo]);\n  setShowModal(false);\n  setText('');\n};\n<\/code><\/pre>\n
Next, we need to simulate filling out the form and clicking the save button. Typically, you would use the fireEvent.change<\/code> method from RTU to simulate an input change. This fires the input element’s change<\/code> event. However, Ionic components fire custom ‘ion’ events like ‘ionChange’. Therefore, we can’t use fireEvent.change<\/code> here.<\/p>\n
To help with this, IRTU exports ionFireEvent<\/code>, which wraps RTU’s fireEvent<\/code>, and augments it with all the custom Ionic events. Therefore, you can use ionFireEvent<\/code> as a drop in replacement for fireEvent<\/code>. To do so, import ionFireEvent<\/code> and alias it to fireEvent<\/code>:<\/p>\n
import { ionFireEvent as fireEvent } from '@ionic\/react-test-utils';\n<\/code><\/pre>\n
And remove the fireEvent<\/code> import from @testing-library\/react<\/code>.<\/p>\n
Now, we fire the ionChange<\/code> event and click the button and verify that our todo gets added to the list:<\/p>\n
fireEvent.ionChange(input, 'test todo');\nfireEvent.click(button);\nawait findByText('test todo');\n<\/code><\/pre>\n
How did we do?<\/h2>\n
So far, we have written quite a bit of functionality driven entirely by tests. If we fire up the dev server:<\/p>\n
ionic serve \n<\/code><\/pre>\n
We should see the list of todos get loaded from the fetch request, and be able to create a new todo.<\/p>\n
You might notice there are delete icons for each of the todos. I’ll leave that as an exercise for you to implement the delete functionality.<\/p>\n
I’ve included a link to the full demo repository below that expands on the app a bit more, including deleting todos.<\/p>\n
Wrapping up<\/h2>\n
It might have taken a bit of extra time to drive this development through tests, but now we have a good set of tests to run anytime we make updates to the app that gives us confidence that we didn’t break anything.<\/p>\n
Here is a list of resources for more info about the content covered in this post:<\/p>\n