React Hooks 组件 Jest写法

React 拥有了更加强大的 Hooks书写方式，本人公司基本都抛弃使用class组件写法，随之jest单元测试写法也有些变化。

下面上一个demo

// demo.js
import React from 'react';
const TestComponent = () => {
const [count, setCount] = React.useState(0);
return (
<h3>{count}</h3>
<span>
<button id="count-up" type="button" onClick={() => setCount(count + 1)}>Count Up</button>
<button id="count-down" type="button" onClick={() => setCount(count - 1)}>Count Down</button>
<button id="zero-count" type="button" onClick={() => setCount(0)}>Zero</button>
</span>
);
}
export default TestComponent;
// demo.test.js
import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import TestComponent from './FunctionalComponent';
Enzyme.configure({ adapter: new Adapter() });
describe('<TestComponent />', () => {
let wrapper;
const setState = jest.fn();
const useStateSpy = jest.spyOn(React, 'useState')
useStateSpy.mockImplementation((init) => [init, setState]);
beforeEach(() => {
wrapper = Enzyme.shallow(<TestComponent />);
});
afterEach(() => {
jest.clearAllMocks();
});
describe('Count Up', () => {
it('calls setCount with count + 1', () => {
wrapper.find('#count-up').props().onClick();
expect(setState).toHaveBeenCalledWith(1);
});
});
describe('Count Down', () => {
it('calls setCount with count - 1', () => {
wrapper.find('#count-down').props().onClick();
expect(setState).toHaveBeenCalledWith(-1);
});
});
describe('Zero', () => {
it('calls setCount with 0', () => {
wrapper.find('#zero-count').props().onClick();
expect(setState).toHaveBeenCalledWith(0);
});
});
});

最后

以上就是贤惠小松鼠为你收集整理的React Hooks 组件 Jest写法的全部内容，希望文章能够帮你解决React Hooks 组件 Jest写法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。