I am trying to use jest to mock the return value of a hook used by a React component, but I can't get it to work. Consider the price tag component. All it does is render the price returned from the usePrice hook.
In usePrice.ts
export default function usePrice() { return 1337; } In PriceTag.tsx:
import React from 'react'; import usePrice from './usePrice'; export default function PriceTag() { const price = usePrice(); return <p>Price: {price}</p> } In the test, I'm asserting that the correct price is shown. Since I want to create several tests for this component, the setPrice helper is used to set the next return value for every test.
In __mocks__/usePrice.ts
let price = 58008; export function setPrice(newPrice) { price = newPrice; } export default function usePrice() { return price; } In PriceTag.test.tsx
import { render } from '@testing-library/react'; import React from 'react'; import PriceTag from './PriceTag'; import { setPrice } from './__mocks__/usePrice'; jest.mock('./usePrice'); describe('PriceTag', () => { it('renders the price', () => { setPrice(100); const { getByText } = render(<PriceTag />); const textEl = getByText('Price: 100'); expect(textEl).toBeInTheDocument(); }); }); When I run the test I get the following failure:
TestingLibraryElementError: Unable to find an element with the text: Price: 100. This could be because the text is broken up by multiple elements. In this case, you can pro vide a function for your text matcher to make your matcher more flexible. <body> <div> <p> Price: 58008 </p> </div> </body> 11 | const { getByText } = render(<PriceTag />); 12 | > 13 | const textEl = getByText('Price: 100'); | ^ 14 | 15 | expect(textEl).toBeInTheDocument(); 16 | }); I can see that the mock is used since 58008 is rendered in the DOM. However, I expect 100 to be returned. I believe this is due to how Jest hoists variables, but it would be very useful if I could get this to work.
This code is directly inspired by their example for mocking the fs module: https://jestjs.io/docs/manual-mocks#examples
