reactjs - Storybook JS 与酶的交互测试 - 状态更改被覆盖
问题描述
在模拟用户与酶的交互后,我正在使用故事书来可视化 React 组件的更改。作为一个小例子,我想要一个在单击其中一个按钮后显示组件的故事。
我遇到的问题是组件的构造函数被调用了两次:一次是通过酶安装组件时,然后是在故事书显示组件时。这会将组件恢复到其默认状态,因此模拟用户交互之后的任何更改都将丢失。
这是一些显示问题的代码。故事加载后,按钮组件处于“未点击”状态,即使点击是用酶模拟的:
import React from 'react';
class SampleComponent extends React.Component {
constructor(props){
super(props);
console.log('constructor');
this.state = {isClicked: false};
this.onClick = this.onClick.bind(this);
}
onClick(){
console.log('onClick');
this.setState({isClicked: true});
}
render(){
const text = (this.state.isClicked)? 'Clicked!' : 'Not Clicked';
return (
<div>
<input type='button' value='Click' onClick={this.onClick} />
<p>{text}</p>
</div>
);
}
}
export default SampleComponent;
故事档案:
import React from 'react';
import { storiesOf } from '@storybook/react';
import { mount } from 'enzyme';
import { specs, describe, it } from 'storybook-addon-specifications';
import SampleComponent from '../src/SampleComponent';
storiesOf('SampleComponent', module)
.add('clicked', () => {
const comp = <SampleComponent/>;
specs(() => describe('clicked', function () {
it('Should display clicked state message', function () {
const output = mount(comp);
output.find('input').simulate('click');
});
}));
return comp;
});
控制台的输出将是:
constructor
onClick
constructor
解决方案
您需要取回底层组件实例。这将做你想要的:
storiesOf('SampleComponent', module)
.add('clicked', () => {
let output;
specs(() => describe('clicked', function () {
it('Should display clicked state message', function () {
output = mount(<SampleComponent />);
output.find('input').simulate('click');
});
}));
const Inst = () => output.instance();
return <Inst />
});
推荐阅读
- linux - 非特权进程可以恶意使用 mlock() 来锁定系统吗?
- batch-file - 如何最小化运行已启动程序的窗口
- javafx - Gitlab构建失败
- node.js - 如何在谷歌分析 v4 中订购?
- r - 使用 R 函数对值进行散列会产生跨行的重复值
- python - 你如何让一个物体在一个区域内随机移动?
- javascript - 需要帮助在节点中使用 express 识别内存泄漏
- c# - 如何防止新选项卡在 dragablz:TabablzControl 的窗口中打开
- python - 有没有办法在滚动窗口中执行 last_valid_index() ?
- android-studio - 当我运行一个简单的代码时,我得到一个错误:“文件名必须以 .xml 结尾”