Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

126
Visualizações
mock export function and variable in react testing library

I need to test if delete button is present. The files structure are as below:

//a.js

import b from './b';
const xyz = props => { 
  const {var1, var2, func1, func2} = b(props); 

  return(
    <Button buttonType='primary'onClick={func1}>Add</Button>
    {
        var2.length > 0 && <Button buttonType='negative' onClick={func2}>Remove</Button>
    }) }   export default xyz;

//b.js

const b= (props) => {

const { data } = props;
let [var1, setVar1] = useState(initialState);
let [var2, setVar2] = useState([]);
const func1 = async () => { //some data }
const func2 = async () => { //some data }

return { var1, var2, func1, func2}
}
export default b;

//a.spec.js

import xyz from './a';
import { render, fireEvent } from '@testing-library/react';

//I am trying to get delete button in this test case but it is failing because I couldn't mock the b file properly.

it('should display Delete button', () => {
        const { getByRole } = render(<xyz sdk={mockSk.app}/>);
        expect(getByRole('button', { name: 'Delete' })).toBeInTheDocument();
    });

I am not certain how to mock b file so I can have some dummy value in var2 in return. it will satisfy the condition in a.js to display the delete button. the things that I have tried in test suites are :

const mockDeleteData = {
    data: [{
         userId: 1,
         id: 1,
         title: 'My First Album'
    }]
}
let mockSk = {
    app: {
        onConfigure: jest.fn(),
        getParameters: jest.fn().mockReturnValueOnce({}),
        setReady: jest.fn(),
        getCurrentState: jest.fn()
    }
};

it('should display Delete button', () => {

1) jest.mock('./b'); //trying to mock b file but not sure how to assign dummy value to var2
//2) jest.spyOn(b, 'b.func1'); // trying random things to see if it is working.
3) b.mockResolvedValue({ // just checking if it returning this but it return undefined
         data: [
             {
                 userId: 1,
                 id: 1,
                 title: 'My First Album'
             },
             {
                 userId: 1,
                 id: 2,
                 title: 'Album: The Sequel'
             }
         ]
     });
   4) b.default.var2 = mockDeleteData; // returns undefined instead of mockdata
5)const b= require('./b');
    const handleClick = jest.spyOn(b, 'func1');
    handleClick.mockReturnValue(mockDeleteData);

        const { getByRole } = render(<xyz sdk={mockSk.app} />);
        expect(getByRole('button', { name: 'Delete' })).toBeInTheDocument();
    });
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

This pattern usually works for me.

import * as bModule from './b'

jest.spyOn(bModule, 'b').mockReturnValue(
  (_props) => ({var1: value1, var2: value2, func1: jest.fn(), func2: jest.fn()}
)

You may not need to include var1, func1, or func2 in your mocked return object, if it doesn't cause your code to throw and you don't want to test them. You also don't need to include the _props input if you don't need that to set any return object.

I don't normally use export default, so you might first start with export const b = (props) => /*...*/ and see if you get that working first.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda