时间戳

首页 > 解决方案 > 如何在 react-responsive 标签中测试 React 组件

reactjs - 如何在 react-responsive 标签中测试 React 组件

问题描述

在<MyComponent>组件内部，我使用组件来区分渲染移动和桌面内容。react-responsive <MediaQuery>

export class MyComponent extends React.Component {

  //...

    render() {
      <MediaQuery query="(max-width: 600)">
        <div className="inside-mobile">mobile view</div>
      </MediaQuery>
    }
}

我想测试 HTML 里面<MyComponent>的render()using enzyme，但似乎无法深入到子元素<MediaQuery>：

it('should dive into <MediaQuery>', () => {
    const wrapper = mount(<Provider store={mockedStore}><MyComponent/></Provider>)
    const actual = wrapper.getDOMNode().querySelectorAll(".inside-mobile")       
    expect(actual).to.have.length(1)
}

但是， Aconsole.log(wrapper.debug())表明内部没有任何<MediaQuery>内容被渲染。我猜在测试中（没有实际的浏览器）window.width没有设置导致<MediaQuery>组件不渲染任何东西。

我想做的事：

我希望能够<MyComponent>使用enzymewith react-responsive（或类似的东西，例如react-media）来测试移动和桌面视口的内容。

我尝试过的事情：

console.log(wrapper.debug())显示： 

<MyComponent content={{...}}>
    <Media query="(min-width: 600px)" defaultMatches={true} />
</MyComponent>

标签： reactjsunit-testingmedia-queriesenzymechai-enzyme

解决方案

我通过模拟找到了一个工作解决方案，使用react-media而不是react-responsive，window.matchMedia以便在测试期间matches设置为true：

为不同的视口创建特定的媒体组件：

const Mobile = ({ children, content }) => <Media query="(max-width: 600px)" children={children}>{matches => matches ? content : "" }</Media>;
const Desktop = ...

使用特定的媒体组件：

<MyComponent>
    <Mobile content={
        <div className="mobile">I'm mobile</div>
    }/>
    <Desktop content={...}/>
</MyComponent>

每个视口的测试内容：

const createMockMediaMatcher = matches => () => ({
    matches,
    addListener: () => {},
    removeListener: () => {}
});

describe('MyComponent', () => {
    beforeEach(() => {
        window.matchMedia = createMockMediaMatcher(true);
    });

    it('should display the correct text on mobile', () => {

        const wrapper = shallow(<MyComponent/>);
        const mobileView = wrapper.find(Mobile).shallow().dive();
        const actual = mobileView.find(".mobile").text();

        expect(actual).to.equal("I'm mobile");
    });
});

推荐阅读