Question

伙计们，前端newb在这里。试图了解如何正确地将模拟props传递给组件的构造函数。...

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        let dataToDecode = QueryString.parse(props.location.search).data;
        const data = QueryString.parse(Base64.decode(dataToDecode));
        this.state = {
            email: data.email,
            ...
        };
    ...

那么一个模拟props的人会如何反应？ testing-library/react或jest可以提供帮助吗？

即测试需要涵盖正确的uri和不正确的uri。
https://domain/path?data=somebase64encodedstring

it('renders without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<MyComponent />, div);
});

谢谢！

Answer 1

我建议您使用Enzyme库，该库允许您浅渲染或完全渲染组件。酶使您可以轻松测试组件的输出。

在这种情况下，使用shallow rendering就足够了。

这是一种可以使用模拟道具浅化渲染组件的方法。

import * as React from 'react';
import { shallow } from 'enzyme';

describe('<MyComponent />', () => {

  it('sample test', () => {
    const myComponent = <MyComponent 
      location={mockLocation} 
      otherProps={otherMockProps}
    />
    const wrapper = shallow(myComponent);
    // expect().....
  });

})

从上面可以看到，我们在组件上调用了浅层渲染API shallow()以及所需的道具。从此以后，您可以执行其他形式的行为，例如调用方法或监视方法调用，并测试所需的行为。

测试反应组件，模拟道具

1 个答案: