当前的设置是React 18,使用当前版本的webpack,babel,typescript,jest和使用MaterialUI组件库。运行/构建应用程序不会产生错误&下面的警告只在组件Jests测试期间发生。如果需要,我可以提供调用堆栈。Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of 'ForwardRef(Rating)'.
- 菜单.tsx组件:*
import React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
type MyProps = {
increment: () => void
decrement: () => void
clear: () => void
}
export default function Menu(props: MyProps){
return(
<Stack direction="row" spacing={2}>
<Button className="qa-increment" variant="contained" onClick={props.increment}>Display Additional Provider</Button>
<Button className="qa-decrement" variant="contained" onClick={props.decrement}>Remove Provider</Button>
<Button className="qa-clear" variant="contained" onClick={props.clear}>Clear Providers</Button>
</Stack>
)
}
菜单部分组件
....
</Typography>
<Menu
increment={() => {this.increaseCount()}}
decrement={() => {this.decreaseCount()}}
clear={() => {this.clearCount()}}
/>
<Grid container spacing={5}>
....
- Jest组件测试:*
import React from 'react';
import renderer from 'react-test-renderer';
import Menu from './Menu';
describe('it checks the Card copmonent', ()=> {
it('Checks against the component snapshot', () => {
const tree = renderer
.create(<Menu/>)
.toJSON();
expect(tree).toMatchSnapshot();
});
});
我一直在查看与此问题相关的posts。虽然是React/Jest的新手,以及如何使用React实现TypeScript设置。我不确定它们是否适用于我的设置。我尝试使用jest.mock()
并将renderer
函数 Package 在React.forwardRef()
中,但没有任何运气(* 我可能做错了 *)。这个post看起来很接近,我只是还没有找到一种方法来弄清楚这将如何在我的设置中工作。
更新:在我的例子中,这个问题似乎与MaterialUI组件有关。当删除它们并使用HTML5元素时,警告不再出现。继续这个兔子洞。
1条答案
按热度按时间wj8zmpe11#
我在测试中遇到了同样的警告,结果证明是因为jest使用了
node
testEnvironment
。当我将其更改为jsdom
时,警告消失了。您需要将jest-environment-jsdom
添加到您的devDependencies
中。有关testEnvironment
的更多信息,请参阅此处否则,您可以使用
jest.mock
绕过它。