如何对单元测试作出反应-Redux连接组件？
我用摩卡，柴，卡玛，西农，Webpack进行单元测试。
我按照这个链接来配置React Redux代码的测试环境。
如何实现测试+代码覆盖与Karma、Babel和Webpack的反应
我可以成功地测试我的操作和还原javascript代码，但是当涉及到测试我的组件时，它总是会抛出一些错误。
import React from 'react';
import TestUtils from 'react/lib/ReactTestUtils'; //I like using the Test Utils, but you can just use the DOM API instead.
import chai from 'chai';
// import sinon from 'sinon';
import spies from 'chai-spies';
chai.use(spies);
let should = chai.should()
, expect = chai.expect;
import { PhoneVerification } from '../PhoneVerification';
let fakeStore = {
'isFetching': false,
'usernameSettings': {
'errors': {},
'username': 'sahil',
'isEditable': false
},
'emailSettings': {
'email': 'test@test.com',
'isEmailVerified': false,
'isEditable': false
},
'passwordSettings': {
'errors': {},
'password': 'showsomestarz',
'isEditable': false
},
'phoneSettings': {
'isEditable': false,
'errors': {},
'otp': null,
'isOTPSent': false,
'isOTPReSent': false,
'isShowMissedCallNumber': false,
'isShowMissedCallVerificationLink': false,
'missedCallNumber': null,
'timeLeftToVerify': null,
'_verifiedNumber': null,
'timers': [],
'phone': '',
'isPhoneVerified': false
}
}
function setup () {
console.log(PhoneVerification);
// PhoneVerification.componentDidMount = chai.spy();
let output = TestUtils.renderIntoDocument(<PhoneVerification {...fakeStore}/>);
return {
output
}
}
describe('PhoneVerificationComponent', () => {
it('should render properly', (done) => {
const { output } = setup();
expect(PhoneVerification.prototype.componentDidMount).to.have.been.called;
done();
})
});下面的错误产生了上面的代码。
FAILED TESTS:
PhoneVerificationComponent
✖ should render properly
Chrome 48.0.2564 (Mac OS X 10.11.3)
Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.试着从辛农间谍转到柴间谍。
我应该如何单元测试我的反应-Redux连接的组件(智能组件)？
回答 4
Stack Overflow用户
发布于 2016-02-23 13:34:42
实现这一点的一个更好的方法是导出普通组件和封装在connect中的组件。指定的导出将是组件，默认为包装组件：
export class Sample extends Component {
render() {
let { verification } = this.props;
return (
<h3>This is my awesome component.</h3>
);
}
}
const select = (state) => {
return {
verification: state.verification
}
}
export default connect(select)(Sample);通过这种方式，您可以在应用程序中正常导入，但是当涉及到测试时，您可以使用import { Sample } from 'component'导入您的命名导出。
Stack Overflow用户
发布于 2018-03-04 13:22:29
这个被接受的答案的问题是，我们输出一些不必要的东西只是为了能够测试它。在我看来，导出一个类只是为了测试它不是一个好主意。
这里有一个更简洁的解决方案，不需要导出任何东西，只需要导出连接的组件：
如果您使用的是jest，您可以模拟connect方法返回三件事：
- mapStateToProps
- mapDispatchToProps
- ReactComponent
这样做很简单。有两种方法:内联模拟或全局模拟。
1.使用内联模拟
在测试的描述函数之前添加以下片段。
jest.mock('react-redux', () => {
return {
connect: (mapStateToProps, mapDispatchToProps) => (ReactComponent) => ({
mapStateToProps,
mapDispatchToProps,
ReactComponent
}),
Provider: ({ children }) => children
}
})
2.使用文件模拟
- 在根目录中创建一个文件
__mocks__/react-redux.js( package.json所在的位置) - 在文件中添加以下代码段。
module.exports = {
connect: (mapStateToProps, mapDispatchToProps) => (ReactComponent) => ({
mapStateToProps,
mapDispatchToProps,
ReactComponent,
}),
Provider: ({children}) => children
};
在进行了模拟之后，您将能够使用Container.mapStateToProps、Container.mapDispatchToProps和Container.ReactComponent访问上述三种工具。
只需执行以下操作即可导入容器
import Container from '<path>/<fileName>.container.js'
希望能帮上忙。
请注意，如果您使用文件模拟。模拟的文件将用于所有测试用例(除非在测试用例之前执行jest.unmock('react-redux')) )。
编辑:我写了一个详细的博客，详细解释了上面的内容：
http://rahulgaba.com/front-end/2018/10/19/unit-testing-redux-containers-the-better-way-using-jest.html
Stack Overflow用户
发布于 2019-11-26 04:50:30
redux-mock-store是一个很棒的工具，可以测试redux连接的组件。
const containerElement = shallow((<Provider store={store}><ContainerElement /></Provider>));创建假存储并挂载组件
您可以参考本文测试redux存储连接的React组件，使用Jest和酶\ TDD \\_
https://stackoverflow.com/questions/35131312
复制相似问题
腾讯云开发者
