React-testing-library: How to Test a redux connected component, if it is being re-render by changes in props

[raj-here]

I've created a TODO Application for testing with 2 components

component 1 Form Component: To add new data in TODO list.
component 2 Todo List: Render all the TODO list.

Here,

As per documentation, I've render the component in testing using React-Redux by providing the store with blank and initial states. Which is working fine for me.

 const renderWithRedux = (component: any, { initialState, store = createStore(reducers, initialState) }: any = {}) => {
  return { ...render(<Provider store={store}>{component}</Provider>), store }
}

PROBLEM:

I've added a new data in TODO list.
Now my question is how to test TodoListComponent(Component 2).

• How I can test newly inserted data ?
• Is there any way to get new Added data in TODOList component.

If I do render it earlier before adding the new data, It is not being tested after the adding.

Can someone please guide me on this.

 it('test initial state values ArticleList', () => {
    const wrapped = renderWithRedux(<ArticleList />, { initialState: { articleState: { articlesList: initialArticleState.articlesList.slice(0, 2)} } });
    initialArticleState.articlesList.slice(0, 2).forEach((article) => {
      expect(wrapped.getByText(article.title)).toBeInTheDocument();
    });
  });

it('test input element & Submit Button Functionality Article Form', () => {
    const articleForm = renderWithRedux(<ArticalForm />);
    const articleList = renderWithRedux(<ArticleList />, { initialState: { articleState: { articlesList: initialArticleState.articlesList.slice(0, 2)} } });

    const inputElement = articleForm.getByTestId('title') as HTMLInputElement;
    fireEvent.change(inputElement, { target: { value: 'Hello World' } });

    expect(inputElement.value).toBe('Hello World');
    fireEvent.click(articleForm.getByTestId('submit'));
    expect(inputElement).toHaveTextContent('');

   ???????????????????????????????????????????????????????????????????????????????????
   ???????????????????????????????????????????????????????????????????????????????????
   ???????????????????????????????????????????????????????????????????????????????????

    screen.debug(articleList.baseElement);

  });

[marcosvega91]

Hi @raj-here,

for testing that new element are inserted into the list you should render a component with both ArticleForm and ArticleList in this way when you add an element through the form it should be added to list. After submit of the form you could check if the list has the new inserted item.

About this kind of questions if you need further assistance I would suggest you to join our discord server.

[raj-here]

Hi @marcosvega91 ,

Thanks for the quick response, I've get resolved the issue, By Merging ArticleForm and ArticleList in one component. And it is working fine now.
I was just came back here to close the issue.

Thanks Again, And I would like to join the group discord server