当我尝试使用jest
&运行测试时,我有一个反应组件引发错误enzyme
这里是组件:
import React, { Component } from 'react'
import './login.scss'
class LoginContainer extends Component {
componentWillMount() {
if (this.props.location.search) {
sessionStorage.setItem('hash', this.props.location.search);
this.props.history.push(this.props.goto);
}
}
okta = () => {
window.location.href = this.props.oktaRef;
}
render() {
return (<div className="container">
<div className="card card-container">
<button className="btn btn-lg btn-primary btn-block btn-signin" onClick={this.okta}>
Login with Okta
</button>
</div>
</div>);
}
}
export default LoginContainer;
现在,当我运行测试时,我在componentWillMount
生命周期事件中收到错误:
yarn run test
yarn run v1.3.2
$ cross-env BABEL_ENV=test NODE_ENV=test jest
PASS __tests__/navbar.test.js
PASS __tests__/input-field.test.js
PASS __tests__/field-group.test.js
PASS __tests__/loading-animation.test.js
FAIL __tests__/LoginContainer.test.js
● Console
console.error node_modules/react-dom/cjs/react-dom.development.js:9627
The above error occurred in the <LoginContainer> component:
in LoginContainer (created by WrapperComponent)
in WrapperComponent
Consider adding an error boundary to your tree to customize error handling behavior.
● <LoginContainer /> › renders one LoginContainer component
TypeError: Cannot read property 'search' of undefined
componentWillMount() {
10 |
> 11 | if (this.props.location.search = true) {
12 | sessionStorage.setItem('hash', this.props.location.search);
13 | this.props.history.push(this.props.goto);
14 | }
at LoginContainer.componentWillMount (src/containers/login/container/LoginContainer.jsx:7:54)
at callComponentWillMount (node_modules/react-dom/cjs/react-dom.development.js:6860:16)
at mountClassInstance (node_modules/react-dom/cjs/react-dom.development.js:6956:7)
at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:8325:9)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:8966:16)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:11798:16)
at workLoop (node_modules/react-dom/cjs/react-dom.development.js:11827:26)
at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:11858:9)
at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:12422:24)
at performWork (node_modules/react-dom/cjs/react-dom.development.js:12343:9)
Test Suites: 1 failed, 4 passed, 5 total
Tests: 1 failed, 9 passed, 10 total
Snapshots: 0 total
Time: 2.855s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
写测试的最佳方法是什么?这是我的测试:
/**
* @jest-environment node
*/
import React from 'react'
import {LoginContainer} from '../src/containers/login'
import { shallow, mount } from "enzyme";
describe("<LoginContainer />", () => {
it("renders one LoginContainer component", () => {
let wrapper = mount(<LoginContainer />);
expect(wrapper.find(LoginContainer).length).toBe(1);
});
});
答案 0 :(得分:1)
对于传递道具,就像马特·霍兰德在评论中回答的那样。但是,我认为你的问题是另一回事。这是路由器。您的测试中不存在this.props.location
。
您需要MemoryRouter
react-router
之类的内容
import React from 'react'
import { MemoryRouter } from 'react-router';
import {LoginContainer} from '../src/containers/login'
import { shallow, mount } from "enzyme";
describe("<LoginContainer />", () => {
it("renders one LoginContainer component", () => {
let wrapper = mount(
<MemoryRouter initialEntries={[ '/random' ]}>
<LoginContainer />
</MemoryRouter>
)
expect(wrapper.find(LoginContainer).length).toBe(1);
});
});