score:0
you can automock the swr
module so that mock functions like mockimplementationonce
can be called on useswrconfig
.
assuming you have the following react component.
import react from 'react'
import { useswrconfig } from 'swr'
export default function testcomponent() {
const { mutate } = useswrconfig()
return (
<button onclick={() => { mutate('/api/user') }}>
mutate
</button>
)
}
you would mock useswrconfig
and its mutate
function in your test as follows.
import react from 'react'
import { fireevent, render, screen } from '@testing-library/react'
import { useswrconfig } from 'swr'
import testcomponent from '@/components/test-component'
jest.mock('swr') // automock `swr` lib
test('mutate is called', () => {
const mutatemock = jest.fn()
useswrconfig.mockimplementationonce(() => ({ mutate: mutatemock })) // make sure you mock `mutate` and not `mutation`
// using react-testing-library, but any other testing lib could be used
render(<testcomponent />)
fireevent.click(screen.getbyrole('button', { name: 'mutate' }))
expect(mutatemock).tohavebeencalledwith('/api/user')
})
Source: stackoverflow.com
Related Query
- How do I mock the implementation of material-ui withStyles?
- How to mock useSWRConfig implementation?
- How to create jest mock implementation with dynamic return values
- React and Jest: How to mock implementation of member function
- how to change jest mock function return value in each test?
- How to mock an exported const in jest
- How to mock React component methods with jest and enzyme
- How to mock useHistory hook in jest?
- How to mock react custom hook returned value?
- How to mock e.preventDefault in react component's child
- How to mock history.push with the new React Router Hooks using Jest
- Figuring out how to mock the window size changing for a react component test
- Jest: How to correctly mock a node module?
- How to mock window.navigator.language using jest
- How do you mock useLocation() pathname using shallow test enzyme Reactjs?
- How to mock react-router context
- React js - How to mock Context when testing component
- How to mock ResizeObserver to work in unit tests using react testing library
- How to mock an asynchronous function call in another class
- How to mock out sub-components when unit testing a React component with Jest
- How do I properly mock third party libraries (like jQuery and Semantic UI) using Jest?
- How do I mock react-i18next and i18n.js in jest?
- How to mock a custom hook inside of a React component you want to test?
- How can I mock the window.alert method in jest?
- Jest: How to mock default export Component when same module also has named export?
- How to mock DataTransfer with Jest
- How do you mock a react component with Jest that has props?
- How to mock functions, and test that they're called, when passed as props in react components?
- How do you manually mock one of your own files in Jest?
- How to mock BrowserRouter of react-router-dom using jest
More Query from same tag
- React setState if Axios.get response data is good
- What is proc and method in react javascript?
- Derive keywords from search text
- How can I save the progress of a word in hangman using JavaScript/React?
- How to prevent non-deterministic state updation in Redux?
- Error when Deleting a group of hours from firebase server
- getting only file path and not object when uploading file in react with yup
- React Hook to fetch data from APi when click 2 different button
- How do i cut an image in half so that it is not seen and that there is no horizontal scrolling?
- How to pass data from parent to child in react.js
- How to place an HTML tag in an object?
- React Native - How to open route from push notification
- Using AWS Amplify Auth on the server with custom auth-storage
- how to make only few selected years appear using react-datepicker
- React Redux Connect DefaultRootState typing
- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'
- data-binding radio field in redux-form
- Change background image with styled-component
- Using JOIN and COUNT to find totals SQL
- Webpack loading SVG with white border
- REST API web security without multiple users
- any way to have multiple tabs(screens) in react native with a preview like in a browsers do for example?
- Recharts: how is it possible to show only the value of ONE data point inside a Tooltip?
- Is it possible to dynamically handle the input of a dynamically created component?
- How to horizontal center the title in Material-UI AppBar
- How do I make a number quickly rise from zero when rendering a page in React.js?
- Wordpress - Create Page with custom CSS and JS only
- What is the difference using react-router and the express routes.js
- Passing a variable from a jade file to a React Component
- DC.JS Scrollable Rowchart with no gap in React