尝试教自己测试React测试库和笑话,因为这是我的工作使用。对于我的生活,我不能弄清楚为什么模拟函数testClick没有被调用。我研究了文章和观看视频,但大多数似乎过时了,因为它似乎测试世界改变代码应该如何写超快。有人有想法吗?以下是代码:
Products.js组件:
import React, { useState } from 'react';
import { fetchProducts } from '../service';
const Products = () => {
const [product, setProduct] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
fetchProducts();
};
const hasBeenClicked = () => {
console.log('clicked!');
};
return (
<form onSubmit={handleSubmit}>
<label>
<input
type="text"
value={product}
onChange={(e) => setProduct(e.target.value)}
/>
</label>
<input
type="submit"
onClick={hasBeenClicked}
data-testid="button"
label="Search"
/>
</form>
);
};
export default Products;
产品测试. js:
import React from 'react';
import { render, screen, cleanup, fireEvent } from '@testing-library/react';
import Products from './Products';
test('Button click triggers click event', () => {
const testClick = jest.fn();
const { getByTestId } = render(<Products click={testClick} />);
const button = getByTestId('button');
fireEvent.click(button);
expect(testClick).toBeCalled();
});
结果:
PASS src/App.test.js
FAIL src/components/Products.test.js
● Console
console.log
clicked!
at apply (src/components/Products.js:13:13)
● Button clicks triggers click event
expect(jest.fn()).toBeCalled()
Expected number of calls: >= 1
Received number of calls: 0
11 | fireEvent.click(button);
12 |
> 13 | expect(testClick).toBeCalled();
| ^
14 | });
15 |
at Object.<anonymous> (src/components/Products.test.js:13:21)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 failed, 1 passed, 2 total
Snapshots: 0 total
Time: 3.18 s, estimated 4 s
1条答案
按热度按时间qnzebej01#
你通过一个
click
prop将你的模拟函数传递给Products
,而这个组件一开始并没有接收到这个prop。这个模拟的点击函数并没有以任何方式连接到你在测试中点击的按钮上。要通过此测试:
产品.js:
产品测试js: