reactjs - 浅不渲染包装的组件
问题描述
组件.js
<React.Fragment>
{ state.data ? jsx : null }
</React.Fragment>
export default withStyles(styles, { withTheme: true })(Component);
我无法深入了解使用 withStyles(material-ui 样式)包装的组件,因此包装器返回未定义。我已经尝试过dive() 方法。
我的测试代码看起来像这样..
组件.test.js
configure ({adapter : new EnzymeAdapter()});
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const setup = (initialState={},props={}) => {
const store = mockStore(initialState);
const wrapper = shallow(<Component store={store} {...props}/>).dive();
return wrapper;
};
const findAttrByTest = (wrapper,val) => {
return wrapper.find(`[data-test="${val}"]`);
};
describe("renders <Component>", () => {
let wrapper;
beforeEach(() => {
const props = { };
const initialState = {
value: '',
id : ''
}
wrapper = setup(initialState,props);
});
test("it should return `some text` when no data is loaded", () => {
const component = findAttrByTest(wrapper,"data-loading");
expect(component.length).toBe(1);
});
});
解决方案
通过使用 .WrappedComponent 您可以访问内部组件并删除dive()
. 测试代码会是这样
configure ({adapter : new EnzymeAdapter()});
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const setup = (initialState={},props={}) => {
const store = mockStore(initialState);
const wrapper = shallow(<Component.WrappedComponent store={store} {...props}/>);
return wrapper;
};
const findAttrByTest = (wrapper,val) => {
return wrapper.find(`[data-test="${val}"]`);
};
describe("renders <Component>", () => {
let wrapper;
beforeEach(() => {
const props = { };
const initialState = {
value: '',
id : ''
}
wrapper = setup(initialState,props);
});
test("it should return `some text` when no data is loaded", () => {
const component = findAttrByTest(wrapper,"data-loading");
expect(component.length).toBe(1);
});
});
推荐阅读
- javascript - Vuejs组件单击事件不起作用
- android - RecyclerView 为空时显示内容
- release-management - 配置更改的持续交付
- java - Java中的异常,根据类打印msg
- system-verilog - systemverilog - 单个语句中的多个增量运算符如何工作
- vector - Openlayers 4 矢量图
- c# - 如何阻止输入将先前的咨询发送到数据库
- php - Cronjob:在 php 中写入 fwrite
- android - 在锁定屏幕上创建闹钟
- javascript - 无法从 localhost:8081 (expressjs API) 获取数据,我试过 vue-resource 和 axios