Question

describe('DropDown', () => {
  let store: any;
  let wrapper: any;

  beforeEach(() => {
    store = mockStore({
      dropDown: {
        ...
      },
    });
    wrapper = mount(
      <Provider store={store}>
        <DropDown />
      </Provider>
    );
  });

  it('Search should update the list', () => {
    const searchField = wrapper.find('.textInput');
    searchField.simulate('change', {
      target: {
        value: 'First customer',
      },
    });
    expect(wrapper.find('.customersList .list li').length).toBe(1);
  });
})

我在Cannot read property 'find' of undefined块的wrapper元素上得到一个it。为什么？如果我更新let wrapper: any = null，它将切换到cannot read property on null，因此beforeEach块不会被调用。有人知道为什么吗？

编辑：我喜欢@colinux的答案，所以我接受了它，但是我的实际原因是store对象dropDown被重命名了，并且由于某种原因它崩溃了与它无关的事情。

Answer 1

由于Jest执行测试的方式（由于存在模拟和并行性），在beforeEach和好友中分配外部变量并不安全。

相反，对于这种模式，最好定义一个通用方法并在每次测试中手动调用它。

describe('DropDown', () => {
  function prepare() {
    const store = mockStore({
      dropDown: {},
    });

    const wrapper = mount(
      <Provider store={store}>
        <DropDown />
      </Provider>,
    );

    return { store, wrapper };
  }

  it('Search should update the list', () => {
    const { wrapper } = prepare();

    const searchField = wrapper.find('.textInput');
    searchField.simulate('change', {
      target: {
        value: 'First customer',
      },
    });

    expect(wrapper.find('.customersList .list li').length).toBe(1);
  });
});

prepare方法返回可在测试中使用的变量。每个测试都能得到所需的信息。如果说要进行测试，您需要创建稍微不同的商店，则还可以使用可选参数来改进该方法。

编辑：此模式在https://kentcdodds.com/blog/avoid-nesting-when-youre-testing

的测试库中有详细描述

beforeEach不开玩笑地执行

1 个答案: