javascript - 如何在 enzyme Jest 测试中定义 Prop

Question

当我尝试使用 jest 和 enzyme 运行测试时，我有一个 React 组件抛出错误，这是该组件:

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);
  });
});

Answer 1

关于传递 Prop ，就像Matt Holland在评论中的回答一样。然而，我认为你的问题是另一个问题；这是路由器。 this.props.location 在您的测试中不存在。

您需要类似于 react-router 中的 MemoryRouter

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);
  });
});