функция и переменная фиктивного экспорта в библиотеке тестирования react

#javascript #reactjs #unit-testing #jestjs #react-testing-library

Вопрос:

Мне нужно проверить, присутствует ли кнопка удаления. Структура файлов выглядит следующим образом:

//a.js

 import b from './b'; const xyz = props =gt; {   const {var1, var2, func1, func2} = b(props);    return(  lt;Button buttonType='primary'onClick={func1}gt;Addlt;/Buttongt;  {  var2.length gt; 0 amp;amp; lt;Button buttonType='negative' onClick={func2}gt;Removelt;/Buttongt;  }) } export default xyz;  

//b.js

 const b= (props) =gt; {  const { data } = props; let [var1, setVar1] = useState(initialState); let [var2, setVar2] = useState([]); const func1 = async () =gt; { //some data } const func2 = async () =gt; { //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', () =gt; {  const { getByRole } = render(lt;xyz sdk={mockSk.app}/gt;);  expect(getByRole('button', { name: 'Delete' })).toBeInTheDocument();  });  

Я не уверен, как подделать файл b, чтобы взамен я мог получить некоторое фиктивное значение в var2. это удовлетворит условию в файле.js для отображения кнопки удаления. то, что я пробовал в тестовых наборах, — это :

 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()  } };  

это(«должна отображаться кнопка удаления», () =gt; {

 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(lt;xyz sdk={mockSk.app} /gt;);  expect(getByRole('button', { name: 'Delete' })).toBeInTheDocument();  });  

Ответ №1:

Этот шаблон обычно работает для меня.

 import * as bModule from './b'  jest.spyOn(bModule, 'b').mockReturnValue(  (_props) =gt; ({var1: value1, var2: value2, func1: jest.fn(), func2: jest.fn()} )  

Возможно, вам не потребуется включать var1 func1 , или func2 в ваш объект с издевательским возвратом, если это не приведет к запуску вашего кода и вы не захотите их тестировать. Вам также не нужно включать _props входные данные, если вам это не нужно для установки какого-либо возвращаемого объекта.

Обычно я не использую export default , так что вы можете сначала начать с export const b = (props) =gt; /*...*/ этого и посмотреть, сработает ли это в первую очередь.

Комментарии:

1. Я внес изменения в соответствии с вашим предложением, но я получаю ошибку в a.js, когда он пытается вызвать b(реквизит). сообщение об ошибке: «(0 , b.по умолчанию) не является функцией». Я также удаляю экспорт по умолчанию и делаю экспорт const b = …