jestjs 相关问题

Jest是一个由Facebook基于Jasmine制作的JavaScript单元测试框架，提供自动模拟创建和jsdom环境。它通常用于测试React组件。

所提供的对象中不存在属性`*`

我有课导出类玩家{ 构造函数（）{} 播放 = async (soundUrl: 任意) => { const { sound } =等待 Audio.Sound.createAsync(soundUrl); 等待声音.playAsync(); }; 辉...

jestjs

回答 1 投票 0

JEST 错误：Svg 不是样式组件，无法通过组件选择器引用

添加“svg”作为“background-image”和“src”img属性。测试的时候出现这个错误：Svg不是样式组件，无法通过组件引用

typescript jestjs styled-components react-testing-library

回答 1 投票 0

使用 Jest 模拟另一家商店使用的 Pinia 商店操作

我很难用笑话测试嵌套的 pinia 商店操作。我有以下笑话测试。当我运行此测试时，我收到类型错误类型错误：foodStore.getSnack.mockReturnValue 不是

vue.js unit-testing jestjs pinia

回答 1 投票 0

Jest 中的错误 - 将节点更新到 v20 后出现“SyntaxError: Unexpected token 'export'”

我正在开发一个 NestJS 项目，该项目曾经在节点 v16 上运行。将节点更新到 v20 并触发某些应用程序的 Jest 测试后，我收到以下错误 - SyntaxError: Unexpected token '

node.js jestjs

回答 1 投票 0

在 setInterval 中使用时间谍断言似乎不正确

使用jest 26.6.3，我无法使这里的第二个测试正常工作。如果我添加日志，我可以看到正在调用的回调...... 导出类 MyClass { 构造函数（）{} 公共富（）{ 控制台.log(&

jestjs

回答 1 投票 0

开玩笑如何测试地图内容，即键和值

我有一个 JSON 对象，其地图如下： {"name": "Bertha", [["id", "123"], ["status", "active"]]} 请注意，我是代表...

javascript jestjs

回答 1 投票 0

将 Jest 与 @web/test-runner 一起使用

我正在尝试使用@web/test-runner 作为雪包顶部的测试运行器。到目前为止，我成功使用 @web/test-runner-playwright 启动无头浏览器来运行我的测试。现在我需要测试

jestjs playwright headless web-test-runner

回答 3 投票 0

开玩笑超时错误：测试超时超过 5000 毫秒

我已经为控制器创建了一个单元测试用例，并在运行测试用例时模拟请求、响应和下一步，它会抛出笑话超时错误。任何人都可以帮我解决这个问题。员工.续...

typescript express unit-testing jestjs ts-jest

回答 2 投票 0

如何用jest和nodejs模拟@google-cloud/secret-manager

我在这上面花了很多钱，但我不知道如何模拟@google-cloud/secret-manager。我尝试了这篇文章中的解决方案，但它对我不起作用。我设置了一个nodejs应用程序来使用秘密人...

node.js jestjs google-secret-manager

回答 1 投票 0

如何在 Jest 中测试结果的类型是否为 javascript“函数”？

如何正确测试（使用笑话）结果是否是实际的 JavaScript 函数？描述('', () => { 它（'测试'，（）=> { const theResult = SomethingThatReturnsAFunction(); ...

javascript unit-testing jestjs

回答 3 投票 0

如何在笑话和测试/库中测试工具提示标题

我想测试工具提示标题是否等于特定文本。这是我的工具提示，我想为其编写测试：我想测试工具提示标题是否等于特定文本。这是我的工具提示，我想为其编写测试： <Tooltip title={ this.props.connection ? "Connected" : "Disconnected (Try again)" }> <Badge status="default" data-testid="connection-sign" /> </Tooltip> 这是我开玩笑的测试： test("Show error title in tooltip", async () => { baseDom = render(cardComponent); fireEvent.mouseMove(await baseDom.findByTestId("connection-sign")); //To hover element and show tooltip expect( baseDom.getByTitle( "Disconnected (Try again)" ) ).toBeInTheDocument(); }); 但是这个测试失败了，无法找到具有此标题的元素。如何测试我的工具提示是否包含“已断开连接（重试）”？您的测试中有多个错误。将组件类型而不是组件实例传递给 render // this is wrong, passing component type baseDom = render(cardComponent); // this is right, passing component instance created with JSX baseDom = render(<cardComponent />); 使用 mouseMove 代替 mouseOver 事件按标题搜索元素并传递文本，而不是按文本搜索 // wrong, because, the prop on the Tooltip is called 'title' // but it is actually text as 'getByTitle' looks for HTML // title attribute baseDom.getByTitle("Disconnected (Try again)"); // right, because you are actually looking for text not // HTML title attribute (but wrong see (4)) baseDom.getByText("Disconnected (Try again)"); 使用同步方法进行工具提示搜索而不是异步 // wrong, because, Tooltip is added dynamically to the DOM baseDom.getByText("Disconnected (Try again)"); // right await baseDom.findByText("Disconnected (Try again)"); 总而言之，修正所有错误后，测试应该如下所示： import React from "react"; import { render, fireEvent } from "@testing-library/react"; import App from "./App"; test("Show error title in tooltip", async () => { const baseDom = render(<cardComponent />); fireEvent.mouseOver(baseDom.getByTestId("connection-sign")); expect( await baseDom.findByText("Disconnected (Try again)") ).toBeInTheDocument(); }); 我尝试了很多方法但没有成功，所以我尝试了鼠标输入而不是mouseOver或mouseMove，它对我有用。这是测试工具提示内容的解决方案，如下所示： import { render, cleanup, waitFor, fireEvent, screen } from '@testing-library/react'; // Timeline component should render correctly with tool-tip test('renders TimeLine component with mouse over(tool-tip)', async () => { const { getByTestId, getByText, getByRole } = render( <TimeLine items={timeLineItems()} currentItem={currentTimeLineItem()} onTimeLineItemChange={() => {}} /> ); const courseTitle = "Course collection-3"; fireEvent.mouseEnter(getByRole('button')); await waitFor(() => getByText(courseTitle)); expect(screen.getByText(courseTitle)).toBeInTheDocument(); }); 除了接受的答案之外，重要的是要确保您是否为 getPopupContainer 工具提示设置了 Antd 属性，弹出窗口可能对反应测试库不可见，就像我的情况一样，因为 DOM 容器集可能会测试组件时，尤其是单元测试时，在主体中不可用。例如就我而言，我有 <Popover getPopupContainer={() => document.getElementById('post--component-drawer')} content={<h1>Hello world</h1>}> <span data-testid="symbol-input--color-input">Click me</span> </Popover> div post--component-drawer 不适用于该单元测试。所以我必须模拟 Popover 以确保我将 prop getPopupContainer 覆盖为 null，以便弹出窗口可见所以在我的测试文件的开头，我嘲笑了Popover jest.mock('antd', () => { const antd = jest.requireActual('antd'); /** We need to mock Popover in order to override getPopupContainer to null. getPopContainer * sets the DOM container and if this prop is set, the popup div may not be available in the body */ const Popover = (props) => { return <antd.Popover {...props} getPopupContainer={null} />; }; return { __esModule: true, ...antd, Popover, }; }); test('popver works', async () => { render(<MyComponent/>); fireEvent.mouseOver(screen.getByTestId('symbol-input--color-input')); await waitFor(() => { expect(screen.getByRole('heading', {level: 1})).toBeInTheDocument(); }); }); 我发现这是最新的方式。您必须在测试中执行 async()，然后等待 findByRole，因为它不是即时的！ render(<LogoBar />); fireEvent.mouseEnter(screen.getByLabelText('DaLabel')); await screen.findByRole(/tooltip/); expect(screen.getByRole(/tooltip/)).toBeInTheDocument(); 我在类似的代码和 React 测试库中苦苦挣扎，使用外部组件，对我来说，诀窍是使用 fireEvent.focus(...component...) 相反。希望它可以帮助一些人！这是对 Akshay Pal 解决方案的轻微修改： import { render, cleanup, waitFor, fireEvent, screen } from '@testing-library/react'; // Timeline component should render correctly with tool-tip test('renders TimeLine component with mouse over(tool-tip)', async () => { render( <TimeLine items={timeLineItems()} currentItem={currentTimeLineItem()} onTimeLineItemChange={() => {}} /> ); const courseTitle = "Course collection-3"; fireEvent.mouseEnter(screen.getByRole('button')); expect(await screen.getByText(courseTitle)).toBeTruthy(); });

reactjs unit-testing jestjs react-testing-library

回答 6 投票 0

在 Jest 单元测试中的 Standalone 组件中模拟提供服务

我有一项服务未在根目录中提供，而是在我的组件中提供，如下所示： @Injectable() 导出类 NavbarFacadeService 扩展 AbstractStateFacade 我的服务未在根目录中提供，而是在我的组件中提供，如下所示： @Injectable() export class NavbarFacadeService extends AbstractStateFacade<IDrawerState, DrawerStateActions> implements OnDestroy { ... } @Component({ selector: 'navbar-drawer', standalone: true, imports: [], providers: [NavbarFacadeService], template: ` ... `, changeDetection: ChangeDetectionStrategy.OnPush, }) export class NavbarDrawerComponent implements AfterViewInit { ... } 在组件中提供它而不是在根目录中提供它的原因是因为我希望在组件被销毁时自动清理服务。这工作正常。问题是对此进行单元测试。在我的单元测试中，我应该能够像这样模拟 NavbarFacadeService 的实例： const mockNavbarFacadeService = MockService(NavbarFacadeService, { ... }); beforeEach(async () => { await TestBed.configureTestingModule({ imports: [NavbarDrawerComponent], providers: [ { provide: NavbarFacadeService, useValue: mockNavbarFacadeService }, ] }).compileComponents(); fixture = TestBed.createComponent(NavbarDrawerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); 但是，当以这种方式提供时，当单元测试运行时，该服务不是模拟实例，而是实际提供的实例，并且正在执行真实的函数而不是我模拟的函数。但是，如果我从组件中删除提供程序，然后返回到在根中提供服务，那么它会正确获取模拟实例。那么，在使用提供服务的独立组件时，是否有其他方法可以设置 TestBed 来提供我不知道的模拟值？ Angular 将创建使用 @Injectable({providedIn: 'root'}) 声明的服务的全局共享单个实例，另一方面，未使用 @Injectable({providedIn: 'root'}) 声明的服务将在使用该服务的每个组件上具有单独的实例。当您从服务中删除 {providedIn: 'root'} 时，您必须在组件中提供它，如下所示，否则构造函数中的注入将不起作用。 @Component({ selector: 'xxx', providers: [Your_Service], // <-- here }) export class AppComponent implements OnInit { } 但是，当您运行测试用例时，模拟的服务将无法工作，因为该组件有自己的注入服务，当 TestBed 创建该组件时，Angualr 将创建该服务的一个新实例，该实例与您测试中的实例不同case，组件在运行测试用例时将使用该实例。 beforeEach(() => { fixture = TestBed.createComponent(AppComponent); // <-- Here component = fixture.componentInstance; fixture.detectChanges(); }); 有两种方法可以解决这个问题使用overrideProvider beforeEach(async () => { await TestBed.configureTestingModule({ imports: [HttpClientTestingModule], }).compileComponents(); TestBed.overrideProvider(DataService, {useValue: dataServiceMock}); // <-- }); 使用overrideComponent beforeEach(async () => { await TestBed.configureTestingModule({ imports: [HttpClientTestingModule], }) .overrideComponent(ProductComponent, { set: { providers: [ {provide: NavbarFacadeService, useValue: mockNavbarFacadeService}, ] } }).compileComponents(); });

angular unit-testing jestjs

回答 1 投票 0

为什么我应该模拟一个函数而不是使用函数本身来进行单元测试？

老实说，我对在对我的应用程序进行单元测试时模拟某些函数的目标感到困惑。我看过一些文章建议我应该嘲笑我测试的所有内容，但也有其他人建议我应该避免

javascript unit-testing testing jestjs vitest

回答 1 投票 0

Jest 测试由于初始空值而失败

我正在 NextJS 中为我的网站上的页面准备测试，在该页面中我应该通过钩子对 /api 路由进行 fetch 调用。该路由执行一个查询，从...

javascript reactjs next.js jestjs

回答 1 投票 0

Jest 的 IntelliJ Ultimate Editor 语法突出显示

我正在 IntelliJ Ultimate 中使用 Jest 编写 javascript 单元测试。一切都很好，我什至可以直接在编辑器中运行测试。我只想解决一件事：笑话功能......