Reactjs 我试图使用jest在代码中执行单元测试，但出现了错误

我尝试在代码中执行单元测试，该测试将在函数中获取两个参数，然后测试函数是否工作。我是一个新开玩笑的人，仍然在试图弄清楚如何编写测试用例

import React, { FC } from 'react';
import styled from 'styled-components';

interface AlertProps {
  message: string;
  onClose: () => void
}

const Button = styled.button`
    background-color: white;
    font-size: 15px;
    color: black;
    margin: 1em;
    border: 3px;
    padding: 0.25em 6em;
`;

const Para = styled.p`
  font-size: 20px;
  color: white;
  font-family: sans-serif;
  
`;

const Box = styled.div`
  background-color: #b81c36;
  width: 300px;
  padding: 20px;
  margin: auto;
  border-radius: 10px
 
`;
 
const Alert: FC<AlertProps> = ({ message, onClose }) => {
  return(
    <>
        <Box>
          <Para >{message}</Para>
          <Button  onClick={onClose}>Close</Button>
        </Box>
    </>
  );
}

export default Alert;

import React，{FC}来自'React'；
从“样式化组件”导入样式化；
接口警报道具{
消息：字符串；
onClose:（）=>void
}
const Button=styled.Button`
背景色：白色；
字体大小：15px；
颜色：黑色；
边缘：1米；
边界：3px；
填充：0.25em6em；
`;
const Para=styled.p`
字体大小：20px；
颜色：白色；
字体系列：无衬线；
`;
常量框=styled.div`
背景色：#b81c36；
宽度：300px；
填充：20px；
保证金：自动；
边界半径：10px
`;
常量警报：FC=（{message，onClose}）=>{
返回(
{message}
接近
);
}
导出默认警报；

您可以使用

样式化组件

和

例如

Alert.tsx

：

import React, { FC } from 'react';
import styled from 'styled-components';

interface AlertProps {
  message: string;
  onClose: () => void;
}

export const Button = styled.button`
  background-color: white;
  font-size: 15px;
  color: black;
  margin: 1em;
  border: 3px;
  padding: 0.25em 6em;
`;

export const Para = styled.p`
  font-size: 20px;
  color: white;
  font-family: sans-serif;
`;

export const Box = styled.div`
  background-color: #b81c36;
  width: 300px;
  padding: 20px;
  margin: auto;
  border-radius: 10px;
`;

const Alert: FC<AlertProps> = ({ message, onClose }) => {
  return (
    <>
      <Box>
        <Para>{message}</Para>
        <Button onClick={onClose}>Close</Button>
      </Box>
    </>
  );
};

export default Alert;

import React from 'react';
import Alert, { Box, Button, Para } from './Alert';
import { mount } from 'enzyme';
import { enzymeFind } from 'styled-components/test-utils';

describe('65697242', () => {
  it('should pass', () => {
    const mOnClose = jest.fn();
    const wrapper = mount(<Alert message="teresa teng" onClose={mOnClose}></Alert>);
    const button = enzymeFind(wrapper, Button);
    button.simulate('click');
    const para = enzymeFind(wrapper, Para);
    expect(enzymeFind(wrapper, Box)).toBeTruthy();
    expect(para.text()).toBe('teresa teng');
    expect(mOnClose).toBeCalled();
  });
});

单元测试结果：

 PASS  examples/65697242/Alert.test.tsx (5.402 s)
  65697242
    ✓ should pass (42 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 Alert.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.86 s

---

我遵循了代码，但在导入样式化组件测试UTIL时得到了一些结果。您能告诉我需要安装哪些其他文件来忽略此错误吗/