纯Typescript测试相关配置
1: 安装jest相关的依赖
yarn add --dev jest @types/jest ts-jest
jest -- 我们的test runner, 测试断言库, mock库
@types/jest -- Jest的Typescript版
ts-jest -- 把Typescript编译为JavaScript
2：创建jest.config.js
在项目根目录下创建一个jest.config.js文件作为jest的配置文件，且添加以下内容
// jest.config.js
module.exports = {
roots: ['<rootDir>/src'],
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
testRegex: '^.+\\.test\\.(ts|tsx)$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};
3: 添加跑测试的脚本
// package.json
"scripts": {
"test": "jest",
//....
},
完成以上相关配置，我们就可以对一个Typescript纯函数进行测试了，例如以下例子：
//stringProcessor.ts
function reverseString(str: string) {
return str.split('').reverse().join('');
}
export {reverseString}
//stringProcessor.test.ts
import {reverseString} from './stringProcessor';
test('', ()=> {
expect(reverseString('hello')).toBe('olleh');
});
但是，如果我们需要测一个React component测试，我们需要借助另一个库Enzyme以及相关其他依赖。接下来，让我们来完成这部分的配置：
React测试相关配置
安装React测试相关的依赖
yarn add --dev @testing-library/react @testing-library/react-hooks @testing-library/jest-dom
@testing-library/react 测试React Component的库
@testing-library/react-hooks 测试自己写的的React Hooks的库
@testing-library/jest-dom 提供更多利于dom测试的断言
往jest.config.js文件里面添加支持React component测试的相关配置
//jest.config.js
module.exports = {
roots: ['<rootDir>/src'],
setupFiles: ['<rootDir>/test.setup.js', '<rootDir>/test.shim.js'],
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
moduleNameMapper: {
'\\.(css|scss)': 'identity-obj-proxy', // mock 在react组件里import的CSS
'\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/testMocks/assetsMocks.js', //mock 在react组件里import的图片
},
testRegex: '^.+\\.test\\.(ts|tsx)$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};
在项目根目录添加testMocks/assetsMocks.js
//testMocks/assetsMocks.js
module.exports = '';
测试一个最简单的React组件
组件文件counter.tsx
//counter.tsx
import * as React from 'react';
import { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<div data-testid='count-announcement'> you have been clicked {count} times</div>
<button
data-testid='increase-button'
onClick={() => {
setCount(count + 1);
}}
>
{' '}
increase count
</button>
</div>
);
};
export default Counter;
测试文件counter.test.tsx
//counter.test.tsx
import * as React from 'react';
import Counter from './counter';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
test('the count should be 1 when you click the increase button once', () => {
// render
const { getByTestId } = render(<Counter />);
const increaseButton = getByTestId('increase-button');
// act
fireEvent.click(increaseButton);
// assert
expect(getByTestId('count-announcement')).toHaveTextContent('1');
});
测试一个有<Link>的React组件
组件文件HomePage.tsx
//HomePage.tsx
import React from 'react';
import logo from './images/logo.svg';
import pink from './images/pink.png';
import './HomePage.scss';
import { Link } from 'react-router-dom';
function App() {
const name = `nana`;
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<img src={pink} className='' alt='pink' />
<Link to='/blogList'>Blog List Page</Link>
</header>
<p data-testid='name'>name: {name}</p>
</div>
);
}
export default App;
测试文件HomePage.test.tsx
//HomePage.test.tsx
import * as React from 'react';
import HomePage from './HomePage';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { BrowserRouter } from 'react-router-dom';
//This is testing demo to testing a react component with CSS and Images import
test('should render name correctly', () => {
// render
const { getByTestId } = render(
//对于有Link的组件，在测试的时候，必须把它包到BrowserRouter里面
<BrowserRouter>
<HomePage />
</BrowserRouter>,
);
const name = getByTestId('name');
// act
// assert
expect(name).toHaveTextContent('nana');
});
这里需要特别注意的是： 对于有Link的组件，在测试的时候，必须把它包到BrowserRouter里面，不然JEST会不过。
测试一个有axios请求的组件
组件文件profile.tsx
//profile.tsx
import * as React from 'react';
import axios from 'axios';
import { useEffect, useState } from 'react';
const Profile = () => {
const [isLoading, setIsLoading] = useState(true);
const [username, setUsername] = useState('');
const [errorMessage, setErrorMessage] = useState('');
useEffect(() => {
async function fetchData() {
try {
const response = await axios.get('https://my-json-server.typicode.com/pengmq/mock-server/profile', {});
setIsLoading(false);
setUsername(response.data.data.username);
} catch (error) {
setIsLoading(false);
setErrorMessage(error);
}
}
fetchData();
}, []);
return (
<div>
<div data-testid='error-message'>{errorMessage}</div>
<div data-testid='loading-text'>
<span>{isLoading ? 'loading....' : ''}</span>
</div>
<div data-testid='username'>{username}</div>
</div>
);
};
export default Profile;
测试文件profile.test.tsx
//profile.test.tsx
import * as React from 'react';
import { render, waitForElement } from '@testing-library/react';
import Profile from './profle';
import axios from 'axios';
//jest.mock(...)自动mock axios的API调用，这行代码必须放在文件最外层，不能放到test里面
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>; //This line is needed when work with typescript
test('loading text should hide and user name should show after get profile data successfully from server ', async () => {
//mock axios的API返回，这行代码必须在render之前
mockedAxios.get.mockResolvedValueOnce({ data: { data: { username: 'nana' } } });
const { getByTestId, container } = render(<Profile />);
// awaiting for sync function to be done with await waitForElement()
const [loadingText, username] = await waitForElement(() => [getByTestId('loading-text'), getByTestId('username')], {
container,
});
//assert dom changes
expect(loadingText).toHaveTextContent('');
expect(username).toHaveTextContent('nana');
});
