reactjs - 如何使用带有 typescript 的手动模拟， react 和开玩笑？-6ren

reactjs - 如何使用带有 typescript 的手动模拟， react 和开玩笑？

转载作者：行者123 更新时间：2023-12-02 16:14:54

25

4

我正在尝试使用 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/

25

4

0

文章推荐： python - _tkinter.TclError : unknown option "-bg" for ttk. 框架

文章推荐： sql-server - SQL Azure 将来是否支持 SQL Server Service Broker？

文章推荐： gnuplot - 如何获取自动生成的 gnuplot tic 之间的距离？

文章推荐： javascript - 如何使用 AJV 创建自定义错误消息？

typescript - 开玩笑 mock rxjs 的 lastValueFrom
我有一个使用 rxjs 的 lastValueFrom 方法的 Controller ，我想模拟该方法，这样实际的方法就不会被调用。我的 Controller 代码是: async doSomethi
typescript - 开玩笑，我如何模拟导出的函数以返回 Promise 而不是 undefined？
我正在使用开玩笑和 typescript 。我在服务文件中有这个导出的函数...... export async functionprocessData( data: MyDataI, ): Pr
node.js - 开玩笑- map : @providesModule naming collision
当我运行 npm start 或 react-native start 时，我收到了这个警告: jest-haste-map: @providesModule naming collision:

首页

博学

6Ren·AI

商城

reactjs - 如何使用带有 typescript 的手动模拟， react 和开玩笑？