首頁猿問在 Enzyme...

在 Enzyme 中，如何從功能組件的道具中獲取功能？

JavaScript

牛魔王的故事 2023-03-18 17:16:26

我正在使用 Jest 和 Enzyme 為我的 React 項目編寫單元測試。如下圖，我通過propsupdateUser給待測組件傳遞了一個命名的函數。EditCarddescribe('The EditCard screen', () => { let wrapper; beforeEach(() => { const defaultProps: Partial<EditCardProps> = { toggleEditing: jest.fn(), user: mockUsers[0], updateUser: jest.fn(), // passes this function to the "EditCard" component via props showSnackbar: jest.fn(), }; wrapper = shallow(<EditCard {...(defaultProps as EditCardProps)} />); });然后我想測試模擬點擊按鈕后調用了多少次。 it('should match the snapshot when the "Name" textfield is not filled and the "submit" button is clicked', () => { wrapper.find('#Name').simulate('change', { target: { value: null } }); wrapper.find('#submit').simulate('click'); // Try to get the "updateUser" function from the props, but get "undefined". expect(wrapper.prop('updateUser')).toHaveBeenCalledTimes(0); });但是我得到如下所示的錯誤： Matcher error: received value must be a mock or spy function Received has value: undefined 24 | wrapper.find('#Name').simulate('change', { target: { value: null } }); 25 | wrapper.find('#submit').simulate('click'); > 26 | expect(wrapper.prop('updateUser')).toHaveBeenCalledTimes(0);有人能告訴我我哪里做錯了嗎？為什么我無法從道具中獲取功能并被undefined退回？提前致謝！

查看完整描述

1 回答

慕虎7371278

TA貢獻1802條經驗獲得超4個贊

對您的代碼進行一些調整應該可以正常工作...

import * as React from "react";

import { mount, ReactWrapper } from "enzyme";

import EditCard from "../path/to/EditCard";

I'd recommend defining jest fns here to make them easier to reference anywhere

within the tests below; otherwise, it'll have to referenced via

'defaultProps.updateUser', 'defaultProps.showSnackbar', ...etc.

Using 'const' here allows us to define these variables within the

module's closure -- in short, only accessible within these tests and NOT

globally accessible (from other file tests).

const showSnackbar = jest.fn();

const toggleEditing = jest.fn();

const updateUser = jest.fn();

if the EditCard component is properly typed, then you shouldn't need to

add types to this 'defaultProps' object

const defaultProps = {

showSnackbar,

toggleEditing,

updateUser,

user: mockUsers[0]

};

describe('The EditCard screen', () => {

let wrapper: ReactWrapper;

beforeEach(() => {

I'd recommend mount over shallow because child components can be

deeply nested and require multiple .dive calls; however, if

you know the child components of "EditCard" are just simple JSX elements,

then shallow will be fine

wrapper = mount(<EditCard {...defaultProps} />);

});

it("should not call 'updateUser' when the form is submitted with an empty '#Name' field", () => {

I'm not sure what simulating "null" does for this input, but assuming this

input is required you should at least pass a string value -- assuming

"#Name" input is of type 'text' | 'password' | 'email' => string and

not a number. On a related note, if it's required, then simply remove this

code as it doesn't do much for the test.

// wrapper.find('#Name').simulate('change', { target: { value: "" } });

I'm assuming this then simulates a form submit. Unfortunately,

pressing the submit button won't work. Instead you'll have to

simulate a form submit. This is a limitation of Enzyme and last I

checked hasn't been/can't be fixed.

wrapper.find('form').simulate('submit');

it should then NOT call the jest.fn() "updateUser" when submitted since

'#Name' is empty. Notice that we're referencing 'updateUser' -- the jest fn

defined above -- and not the wrapper.prop fn.

expect(updateUser).not.toHaveBeenCalled();

});

// include other tests...

});

反對回復 2023-03-18

1 回答
0 關注
118 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 Enzyme 中，如何從功能組件的道具中獲取功能？

在 Enzyme 中，如何從功能組件的道具中獲取功能？

1 回答

添加回答

在 Enzyme 中，如何從功能組件的道具中獲取功能？

在 Enzyme 中，如何從功能組件的道具中獲取功能？