Menu
Using AirBnB's enzyme, we can setState of a component:
const loginComponent = shallow(<Login />);
loginComponent.setState({ error: true });
I want to do same thing using react-testing-library.
Thanks!
780
You can click the button which will set the val to true. it('small container visible only when val is true', () => { const {queryByText, getByTestId} = render(<MyComponent />); const clickButton = getByTestId('your.button.test.id'); fireEvent.
To enable us to mock useState, we use React. useState (line #5) instead of using the usual named import (i.e. import { useState } from 'react'). Below is our Jest unit test for the component. Before rendering the component for testing, we create a constant 'setStateMock' and mock it with a jest function jest.
React Testing Library is not specific to any testing framework; we can use it with any other testing library, although Jest is recommended and preferred by many developers. create-react-app uses both Jest and React Testing Library by default.
Testing the useState Hook with Enzyme import React from "react"; const App= () => { const [name, setName] = React. useState(""); return ( <form> <div className="row"> <div className="col-md-6"> <input type="text" placeholder="Enter your name" className="input" onChange={(e) => { setName(e.
There are various test libraries such as chai, mocha, etc. In this tutorial, we’ll be using the jest library along with reacting testing library to test out the React Components. Step 1: You will start a new project using create-react-app so open your terminal and type. Step 2: Switch to the jest-testing folder using the following command.
The main concern is that Enzyme offers extra utilities that allow you to test the internal workings of a component (e.g. read and set state of the component). The team at React tests React; therefore, there is no need for you to test React’s functionality such as state, componentDidMount, etc. The same goes for other libraries you may use.
When component testing in React, the focus should be on replicating how the user would interact with the React component.
SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community. In this article, we’ll take a look at using Jest — a testing framework maintained by Facebook — to test our React components.
You can't do that with react-testing-library. This is because RTL wants you to test your component as a user would.
What does this mean? In real life, your component will change the state after something happens. Maybe the user entered wrong data or the API returned an error code.
Rather than changing the state directly, you should try to reproduce the set of actions that change the state.
This approach is a bit harder to implement than what Enzyme offers but your tests will be more robust. That's because you're going to test the whole flow instead of just focusing on what gets rendered when a particular state occurs.
On top of that say you refactor your code and change how the state works. RTL tests won't care as long as the way users interact with your application is the same. An Enzyme test would fail though because it doesn't know how to interact with the internals of your component anymore.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
