Reactjs Jest快照不包括组件
我使用CRA和内置的jest单元测试库。我用快照编写了一些简单的单元测试,当测试通过时,我的覆盖率并没有提高 当前结果:当运行Reactjs Jest快照不包括组件,reactjs,unit-testing,jestjs,create-react-app,Reactjs,Unit Testing,Jestjs,Create React App,我使用CRA和内置的jest单元测试库。我用快照编写了一些简单的单元测试,当测试通过时,我的覆盖率并没有提高 当前结果:当运行npm测试时-测试通过,当运行npm运行测试覆盖率-生成包含html的覆盖率文件夹,但只有React组件不覆盖 预期结果:运行时显示带有快照的React组件的npm运行测试覆盖率 package.json "scripts": { "test": "react-scripts test --env=jsdom", "test-cover
npm测试时
-测试通过,当运行npm运行测试覆盖率
-生成包含html的覆盖率文件夹,但只有React组件不覆盖
预期结果:运行时显示带有快照的React组件的npm运行测试覆盖率
package.json
"scripts": {
"test": "react-scripts test --env=jsdom",
"test-coverage": "set CI=true && react-scripts test --coverage --watchAll",
},
"jest": {
"collectCoverageFrom": [
"src/lib/**/*.{js,jsx}",
"!**/node_modules/**",
"!**/coverage/**"
],
"coverageReporters": [
"text",
"html"
],
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
}
}
}
Button.js
export const Button = ({
style,
onClick,
disabled = false,
children,
showSpinner = false,
className
}) => {
return (
<div
style={style}
className={cn('button', className)}
onClick={onClick}
disabled={disabled}
>
{children}
{showSpinner && (
<Spinner className='button--spinner' animation='border' />
)}
</div>
);
};
export default withButton(Button);
import React from 'react';
import renderer from 'react-test-renderer';
import { Button } from './Button';
import Icon from '../../Icon';
describe('<Button/> ', () => {
const jsxElement = (
<>
<h1>Hello, world!</h1>Icon <Icon name='doctor' />
</>
);
['string children', <Icon name='doctor' />, jsxElement].forEach(
children => {
it('should render children when it was passed', () => {
const button = renderer.create(<Button>{children}</Button>).toJSON();
expect(button).toMatchSnapshot();
});
}
);
it('should render spinner when showSpinner is true', () => {
const button = renderer.create(<Button showSpinner={true} />).toJSON();
expect(button).toMatchSnapshot();
});
it('should not render spinner by default', () => {
const button = renderer.create(<Button />).toJSON();
expect(button).toMatchSnapshot();
});
});
导出常量按钮=({
风格
onClick,
禁用=错误,
儿童
showSpinner=false,
类名
}) => {
返回(
{儿童}
{showSpinner&&(
)}
);
};
使用按钮导出默认值(按钮);
按钮测试.js
export const Button = ({
style,
onClick,
disabled = false,
children,
showSpinner = false,
className
}) => {
return (
<div
style={style}
className={cn('button', className)}
onClick={onClick}
disabled={disabled}
>
{children}
{showSpinner && (
<Spinner className='button--spinner' animation='border' />
)}
</div>
);
};
export default withButton(Button);
import React from 'react';
import renderer from 'react-test-renderer';
import { Button } from './Button';
import Icon from '../../Icon';
describe('<Button/> ', () => {
const jsxElement = (
<>
<h1>Hello, world!</h1>Icon <Icon name='doctor' />
</>
);
['string children', <Icon name='doctor' />, jsxElement].forEach(
children => {
it('should render children when it was passed', () => {
const button = renderer.create(<Button>{children}</Button>).toJSON();
expect(button).toMatchSnapshot();
});
}
);
it('should render spinner when showSpinner is true', () => {
const button = renderer.create(<Button showSpinner={true} />).toJSON();
expect(button).toMatchSnapshot();
});
it('should not render spinner by default', () => {
const button = renderer.create(<Button />).toJSON();
expect(button).toMatchSnapshot();
});
});
从“React”导入React;
从“反应测试渲染器”导入渲染器;
从“./Button”导入{Button};
从“../../Icon”导入图标;
描述(“”,()=>{
常数jsxElement=(
你好,世界!图标
);
['string children',jsxElement].forEach(
儿童=>{
它('传递时应呈现子对象',()=>{
const button=renderer.create({children}).toJSON();
expect(按钮).toMatchSnapshot();
});
}
);
它('当showSpinner为true时应渲染微调器',()=>{
const button=renderer.create().toJSON();
expect(按钮).toMatchSnapshot();
});
它('默认情况下不应渲染微调器',()=>{
const button=renderer.create().toJSON();
expect(按钮).toMatchSnapshot();
});
});
基于官方文件。它应该有用
当我在终端中按模式分别运行覆盖率测试时,我看到该组件已被覆盖
当我删除覆盖率文件夹并重新运行测试覆盖率时,我的按钮被覆盖。所以,这对我来说是可行的,但仍然很有趣,为什么它在运行新的
测试覆盖率时没有重新创建覆盖率文件夹结构当我删除覆盖率文件夹并重新运行测试覆盖率时,我的按钮被覆盖了。所以,这对我来说是可行的,但仍然很有趣,为什么它在新的测试覆盖率运行期间没有重新创建覆盖率文件夹结构