javascript - 你如何模拟一个参数被传递到 jest/enzyme 中的 wrapper.instance().method？

Question

我正在努力测试我的事件处理函数之一

这里的代码是我的父类组件中的一个函数，它更新这些状态。

“inputValue”来自传递给父组件中此函数的子组件

filterPosts = (inputValue) => {
    const myPost = this.state.posts.filter(post => post.userId === Number(inputValue));
    this.setState({ inputValue,  myPost })
};

我正在努力为此编写测试。我知道我需要使用 enzyme 浅层渲染器

wrapper.instance().filterPosts

但我不知道如何测试它。我想像这样在这个测试中尝试将模拟参数作为我的“inputValue”:

const mockInputValue = 1;
wrapper.instance().filterPosts(mockInputValue);

但是这一直返回未定义。如果我只是使用:wrapper.instance().filterPosts(), 这仍然返回 undefined

有什么方法可以将这个 mockInputValue 传递给这个实例方法吗？

我对测试还是很陌生，我们将不胜感激

编辑

这就是调用 filterPosts 和呈现 this.state.myPost 的方式:(仅当 filterPosts() 中的过滤器中的 this.state.myPosts 中存在数组时才呈现)

render() {
        return (
            <div className='app'>
                <Header title='Posts Page' inputValue={this.state.inputValue} filterPosts={this.filterPosts}/>
                    <div className='my-posts'>
                        <h2>My posts</h2>
                        {
                            this.state.myPost.map(post => {
                                return (
                                    <Post
                                        key={post.id}
                                        userId={post.userId}
                                        postId={post.id}
                                        postTitle={post.title}
                                        postBody={post.body}
                                    />
                                );
                            })
                        }
                    </div>
            </div>
        );
    }

就我的子组件而言，子组件像这样从输入框传递事件变化:

<input
                className='input-filterPosts'
                value={props.inputValue}
                placeholder='Please select between 1 and 10'
                onChange={(inputValue) => props.filterPosts(inputValue.target.value)} 
                />

Answer 1

看起来该函数的目的是在给定输入值的情况下设置组件状态的 myPost 和 inputValue 属性。因此，您应该测试该函数是否正确设置了这些属性。

您的代码应该可以工作。您可以像现在一样将参数传递给实例上的函数。

这里有一篇讨论直接测试 React 组件功能的文章:https://bambielli.com/til/2018-03-04-directly-test-react-component-methods/

如果您想测试该函数是否使用给定的输入值参数调用，您可以使用 Jest spy

---

以下是测试组件功能的代码片段。希望对您有所帮助。

describe("filterPosts", () => {
  let wrapper;
  let instance;
  const mockInputValue = 1;

  beforeEach(() => {
    wrapper = shallow(<App />);
    instance = wrapper.instance();
    jest.spyOn(instance, "filterPosts");
    instance.filterPosts(mockInputValue);
  });

  it("calls the function with a given input value", () => {
    expect(instance.filterPosts).toHaveBeenCalledWith(1);
  });

  it("sets the inputValue state attribute to the given input value", () => {
    expect(wrapper.state("inputValue")).toEqual(1);
  });

  it("sets myPost to a filtered array of posts", () => {
    // whatever updated state you expect for "myPost"
    expect(wrapper.state("myPost")).toEqual([]);
  });
});