猿问
下载APP

请问该如何使用 Jest 测试 React 组件?

如何使用 Jest 测试 React 组件


梵蒂冈之花
浏览 46回答 4
4回答

胡说叔叔

// React源码// Link.react.jsimport React from 'react';const STATUS = {NORMAL: 'normal',HOVERED: 'hovered',};export default class Link extends React.Component {constructor() {super();this._onMouseEnter = this._onMouseEnter.bind(this);this._onMouseLeave = this._onMouseLeave.bind(this);this.state = {class: STATUS.NORMAL,};}_onMouseEnter() {this.setState({class: STATUS.HOVERED});}_onMouseLeave() {this.setState({class: STATUS.NORMAL});}render() {return (<aclassName={this.state.class}href={this.props.page || '#'}onMouseEnter={this._onMouseEnter}onMouseLeave={this._onMouseLeave}>{this.props.children}</a>);}}// 测试代码// Link.react-test.jsimport React from 'react';import Link from '../Link.react';import renderer from 'react-test-renderer';test('Link changes the class when hovered', () => {const component = renderer.create(<Link page="http://www.facebook.com">Facebook</Link>);let tree = component.toJSON();expect(tree).toMatchSnapshot();// manually trigger the callbacktree.props.onMouseEnter();// re-renderingtree = component.toJSON();expect(tree).toMatchSnapshot();// manually trigger the callbacktree.props.onMouseLeave();// re-renderingtree = component.toJSON();expect(tree).toMatchSnapshot();});

慕神8447489

React的核心是使用组件定义界面的表现,是一个View层的前端库,那么在使用React的时候我们通常还需要一套机制去管理组件与组件之间,组件与数据模型之间的通信。为什么使用Redux?Facebook官方提出了FLUX思想管理数据流,同时也给出了自己的实现22来管理React应用。可是当我打开FLUX22的文档时候,繁琐的实现,又臭又长的文档,实在难以让我有使用它的欲望。幸好,社区中和我有类似想法的不在少数,github上也涌现了一批关于实现FLUX的框架,比较出名的有Redux23,Reflux5,Flummox7。其中Redux的简单和有趣的编程体验是最吸引我的地方。简单。和其它的FLUX实现不一样,Redux只有唯一的state树,不管项目变的有多复杂,我也仅仅只需要管理一个State树。可能你会有疑问,一个state树就够用了?这个state树该有多大?别着急,Redux中的Reducer机制可以解决这个问题。有趣。忙于迭代项目的你,体会编程带来的趣味是有多久没有体会到了?瞧下面这张图,右边那个调试工具是啥?整个应用的action和state都这么被轻松的管理了?行为还能被保存,删除,回滚,重置?修改了代码,页面不刷新也能产生变化?别开玩笑了,不行,世界那么大,让我去试试!687474703a2f2f692e696d6775722e636f6d2f4a34476557304d2e676966776x688注:Redux开发调试工具:redux-devtools136React应用无刷新保存工具:hot-loader44不明真相的群众,可能这里需要我来安利一下Flux数据流的思想,看图:╔═════════╗ ╔════════╗ ╔═════════════════╗║ Actions ║──────>║ Stores ║──────>║ View Components ║╚═════════╝ ╚════════╝ ╚═════════════════╝^ │└──────────────────────────────────────┘注意:图片仅仅是FLUX思想,而不是Facebook的实现。大致的过程是这样的,View层不能直接对state进行操作,而需要依赖Actions派发指令来告知Store修改状态,Store接收Actions指令后发生相应的改变,View层同时跟着Store的变化而变化。举个例子:A组件要使B组件发生变化。首先,A组件需要执行一个Action,告知绑定B组件的Store发生变化,Store接收到派发的指令后改变,那相应的B组件的视图也就发生了改变。假如C,D,E,F组件绑定了和B组件相同的Store,那么C,D,E,F也会跟着变化。

MMMHUHU

// React源码// Link.react.jsimport React from 'react';const STATUS = {NORMAL: 'normal',HOVERED: 'hovered',};export default class Link extends React.Component {constructor() {super();this._onMouseEnter = this._onMouseEnter.bind(this);this._onMouseLeave = this._onMouseLeave.bind(this);this.state = {class: STATUS.NORMAL,};}_onMouseEnter() {this.setState({class: STATUS.HOVERED});}_onMouseLeave() {this.setState({class: STATUS.NORMAL});}render() {return (<aclassName={this.state.class}href={this.props.page || '#'}onMouseEnter={this._onMouseEnter}onMouseLeave={this._onMouseLeave}>{this.props.children}</a>);}}12345678910111213141516171819202122232425// 测试代码// Link.react-test.jsimport React from 'react';import Link from '../Link.react';import renderer from 'react-test-renderer';test('Link changes the class when hovered', () => {const component = renderer.create(<Link page="http://www.facebook.com">Facebook</Link>);let tree = component.toJSON();expect(tree).toMatchSnapshot();// manually trigger the callbacktree.props.onMouseEnter();// re-renderingtree = component.toJSON();expect(tree).toMatchSnapshot();// manually trigger the callbacktree.props.onMouseLeave();// re-renderingtree = component.toJSON();expect(tree).toMatchSnapshot();});

慕瓜9086354

React源码 // Link.react.js import React from 'react'; const STATUS = { NORMAL: 'normal', HOVERED: 'hovered', }; export default class Link extends React.Component { constructor() { super(); this._onMouseEnter = this._onMouseE
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答