我想了解为什么我的 Jest/ enzyme 测试失败了。我有一个组件,我使用 compose
来自redux的函数,结构如下:
class MyComponent extends Component {
//code here
}
export default compose(
connect(mapStateToProps),
)(MyComponent)
在我的 Jest 测试中,我这样做:
Import { MyComponent } from ‘app/MyComponent’;
describe(‘<MyComponent />’, () => {
let component;
beforeEach(() => {
props = {
id: ‘23423’
}
component = shallow(<MyComponent {…props} />);
}
it(‘Loads correctly’, () => {
expect(component.state(‘isLoading’)).toEqual(true);
expect(component.find(‘InnerComponent’).length).toBe(1);
}
但是,我收到诸如“无法读取未定义的属性‘状态’”之类的错误。我知道使用浅渲染并不能给我所需的确切结构,但我不确定还有什么可以尝试获得正确的结构。我尝试浅渲染包装的组件,然后在其中找到未包装的组件,就像这样,component = shallow(<MyComponent {...props} />).find('MyComponent').shallow();
,没有运气。任何其他建议将不胜感激。
`
最佳答案
通常你想测试组件而不是组件与 redux 的集成:
class MyComponent extends Component {
//code here
}
export { MyComponent } // export the component
export default compose(
connect(mapStateToProps),
)(MyComponent)
同样在您的测试中,您将导入命名导出 import { MyComponent } from '...'
而不是导入默认值:import MyComponent from '..'
import { MyComponent } from ‘app/MyComponent’;
describe(‘<MyComponent />’, () => {
let component;
beforeEach(() => {
props = {
id: ‘23423’
}
component = shallow(<MyComponent {…props} />);
}
it(‘Loads correctly’, () => {
expect(component.state(‘isLoading’)).toEqual(true);
expect(component.find(‘InnerComponent’).length).toBe(1);
}
}
如果你想测试组件与你的 redux store 的交互,你需要用 <Provider />
包装你的组件
import { MyComponent } from ‘app/MyComponent’;
import { Provider } from 'react-redux'
describe(‘<MyComponent />’, () => {
let component;
beforeEach(() => {
props = {
id: ‘23423’
}
component = shallow(<Provider><MyComponent {…props} /></Provider>);
}
你绝对应该 read the testing section redux 文档的
关于javascript - 如何使用 HOC 编写适当的 Jest 测试?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48515157/