我正在尝试使用 jest 来模拟 React 组件使用的钩子(Hook)的返回值，但我无法让它工作。考虑价格标签组件。它所做的只是呈现从 usePrice Hook 返回的价格。
在usePrice.ts
export default function usePrice() {
return 1337;
}
在 PriceTag.tsx 中:
import React from 'react';
import usePrice from './usePrice';
export default function PriceTag() {
const price = usePrice();
return <p>Price: {price}</p>
}
在测试中，我断言显示了正确的价格。由于我想为该组件创建多个测试，因此 setPrice 帮助程序用于为每个测试设置下一个返回值。
在__mocks__/usePrice.ts
let price = 58008;
export function setPrice(newPrice) {
price = newPrice;
}
export default function usePrice() {
return price;
}
在 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();
});
});
当我运行测试时，出现以下故障:
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 | });
我可以看到使用了模拟，因为 58008 在 DOM 中呈现。但是，我希望返回 100。我相信这是由于 Jest 提升变量的方式，但如果我能让它工作，它会非常有用。
此代码的灵感直接来自他们模拟 fs 模块的示例:https://jestjs.io/docs/manual-mocks#examples
最佳答案
我相信您看到的问题是由于您正在导入模拟本身。
import { setPrice } from './__mocks__/usePrice';
Jest 希望您导入实际的模块。尝试将其更改为
import { setPrice } from './usePrice';
关于reactjs - 如何使用带有 typescript 的手动模拟， react 和开玩笑？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67000607/