#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 = …