Question

我正在使用反应，开玩笑和酶与不可变的。我正在尝试安装一个从API获取数据的组件，我遇到了一些困难。

// FooListContainer.jsx

export default class FooListContainer extends Component {
    constructor(props) {
        super(props);

        this.state = {
           foos: List()
        }
    }

    componetWillMount() { 
        manager.bringFooList()
        .then(lst => this.setState({ foos: fromJS(lst) }))
        .done();
    }

    render() {
        return <FooList foos={this.state.foos} />
    }
}

这是ui组件所做的只是接收列表并映射它们

// FooList.jsx

export default class FooList extends Component {
    render() {
        return (
           <div>
               {this.props.foos.map(item => <div>{item}</div>)}
           </div>
        );
    }
}

现在我想测试从FooListContainter中的fetch接收的数据是否正确传递给FooList。

// FooListContainer.test.jsx

describe('rendering', () => {
    it('Should passed the data from the fetch to the FooList', () => {
        const response = ['1', '2', '3'];

        manager.bringFooList = jest.fn(() => {
           return new Promise(resolve => {
               return resolve(response);
           });
        })

        const wrapper = mount(<FooListContainer />);

        const fooList = wrapper.find(FooList);

        expect(fooList.props().foos.size).toBe(3);
    });
});

但是测试失败了，因为它期望长度为3，并且由于某种原因，实际长度为0。

我认为这与容器内部的提取是异步的事实有关 - 因此测试不会“等待”响应并且渲染在第一次状态更改和FooList接收之前发生一个空列表。

我试图在'it'函数中接收异步回调作为参数并在mount之后调用它，如下所示：

// FooListContainer.test.jsx

describe('rendering', () => {
    it('Should passed the data from the fetch to the FooList', (done) => {
        const response = ['1', '2', '3'];

        manager.bringFooList = jest.fn(() => {
           return new Promise(resolve => {
               return resolve(response);
           });
        })

        const wrapper = mount(<FooListContainer />);
        done();

        const fooList = wrapper.find(FooList);

        expect(fooList.props().foos.size).toBe(3);
    });
});

但上面的例子不起作用。我非常感谢你能给我的每一个帮助。

jest酶用异步提取到api测试组件

0 个答案: