Match-id-26815a247af6865917eaa85295fdcb85aa2f6b59
This commit is contained in:
*
*
parent
c16eb0f3d8
commit
de43f27f2c
|
|
@ -0,0 +1,197 @@
|
|||
// For a detailed explanation regarding each configuration property, visit:
|
||||
// https://jestjs.io/docs/en/configuration.html
|
||||
|
||||
module.exports = {
|
||||
// All imported modules in your tests should be mocked automatically
|
||||
// automock: false,
|
||||
|
||||
// Stop running tests after `n` failures
|
||||
// bail: 0,
|
||||
|
||||
// Respect "browser" field in package.json when resolving modules
|
||||
// browser: false,
|
||||
|
||||
// The directory where Jest should store its cached dependency information
|
||||
// cacheDirectory: "C:\\Users\\j30009756\\AppData\\Local\\Temp\\jest",
|
||||
|
||||
// Automatically clear mock calls and instances between every test
|
||||
// clearMocks: false,
|
||||
|
||||
// Indicates whether the coverage information should be collected while executing the test
|
||||
// collectCoverage: false,
|
||||
|
||||
// An array of glob patterns indicating a set of files for which coverage information should be collected
|
||||
// collectCoverageFrom: undefined,
|
||||
|
||||
// The directory where Jest should output its coverage files
|
||||
coverageDirectory: 'coverage',
|
||||
|
||||
// An array of regexp pattern strings used to skip coverage collection
|
||||
// coveragePathIgnorePatterns: [
|
||||
// "\\\\node_modules\\\\"
|
||||
// ],
|
||||
|
||||
// A list of reporter names that Jest uses when writing coverage reports
|
||||
// coverageReporters: [
|
||||
// "json",
|
||||
// "text",
|
||||
// "lcov",
|
||||
// "clover"
|
||||
// ],
|
||||
|
||||
// An object that configures minimum threshold enforcement for coverage results
|
||||
// coverageThreshold: undefined,
|
||||
|
||||
// A path to a custom dependency extractor
|
||||
// dependencyExtractor: undefined,
|
||||
|
||||
// Make calling deprecated APIs throw helpful error messages
|
||||
// errorOnDeprecated: false,
|
||||
|
||||
// Force coverage collection from ignored files using an array of glob patterns
|
||||
// forceCoverageMatch: [],
|
||||
|
||||
// A path to a module which exports an async function that is triggered once before all test suites
|
||||
// globalSetup: undefined,
|
||||
|
||||
// A path to a module which exports an async function that is triggered once after all test suites
|
||||
// globalTeardown: undefined,
|
||||
|
||||
// A set of global variables that need to be available in all test environments
|
||||
globals: {
|
||||
'isDev': process.env.NODE_ENV === 'development',
|
||||
'MessageChannel': function MessageChannel() {
|
||||
this.port1 = {};
|
||||
this.port2 = {
|
||||
postMessage() {}
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
|
||||
// maxWorkers: "50%",
|
||||
|
||||
// An array of directory names to be searched recursively up from the requiring module's location
|
||||
// moduleDirectories: [
|
||||
// "node_modules"
|
||||
// ],
|
||||
|
||||
// An array of file extensions your modules use
|
||||
// moduleFileExtensions: [
|
||||
// "js",
|
||||
// "json",
|
||||
// "jsx",
|
||||
// "ts",
|
||||
// "tsx",
|
||||
// "node"
|
||||
// ],
|
||||
|
||||
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
|
||||
// moduleNameMapper: {},
|
||||
|
||||
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
|
||||
// modulePathIgnorePatterns: [],
|
||||
|
||||
// Activates notifications for test results
|
||||
// notify: false,
|
||||
|
||||
// An enum that specifies notification mode. Requires { notify: true }
|
||||
// notifyMode: "failure-change",
|
||||
|
||||
// A preset that is used as a base for Jest's configuration
|
||||
// preset: undefined,
|
||||
|
||||
// Run tests from one or more projects
|
||||
// projects: undefined,
|
||||
|
||||
// Use this configuration option to add custom reporters to Jest
|
||||
// reporters: undefined,
|
||||
|
||||
// Automatically reset mock state between every test
|
||||
// resetMocks: false,
|
||||
|
||||
// Reset the module registry before running each individual test
|
||||
resetModules: true,
|
||||
|
||||
// A path to a custom resolver
|
||||
// resolver: undefined,
|
||||
|
||||
// Automatically restore mock state between every test
|
||||
// restoreMocks: false,
|
||||
|
||||
// The root directory that Jest should scan for tests and modules within
|
||||
// rootDir: undefined,
|
||||
|
||||
// A list of paths to directories that Jest should use to search for files in
|
||||
// roots: [
|
||||
// "<rootDir>"
|
||||
// ],
|
||||
|
||||
// Allows you to use a custom runner instead of Jest's default test runner
|
||||
// runner: "jest-runner",
|
||||
|
||||
// The paths to modules that run some code to configure or set up the testing environment before each test
|
||||
//setupFiles: [require.resolve('./scripts/jest/setupHostConfig.js')],
|
||||
|
||||
// A list of paths to modules that run some code to configure or set up the testing framework before each test
|
||||
// setupFilesAfterEnv: [],
|
||||
|
||||
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
|
||||
// snapshotSerializers: [],
|
||||
|
||||
// The test environment that will be used for testing
|
||||
testEnvironment: 'jest-environment-jsdom-sixteen',
|
||||
|
||||
// Options that will be passed to the testEnvironment
|
||||
// testEnvironmentOptions: {},
|
||||
|
||||
// Adds a location field to test results
|
||||
// testLocationInResults: false,
|
||||
|
||||
// The glob patterns Jest uses to detect test files
|
||||
testMatch: [
|
||||
'<rootDir>/scripts/__tests__/**/*.test.js',
|
||||
'<rootDir>/scripts/__tests__/*.test.js',
|
||||
'<rootDir>/scripts/__tests__/*.test.jsx',
|
||||
],
|
||||
|
||||
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
|
||||
// testPathIgnorePatterns: [
|
||||
// "\\\\node_modules\\\\"
|
||||
// ],
|
||||
|
||||
// The regexp pattern or array of patterns that Jest uses to detect test files
|
||||
//testRegex: ['/scripts/jest/dont-run-jest-directly\\.js$'],
|
||||
|
||||
// This option allows the use of a custom results processor
|
||||
// testResultsProcessor: undefined,
|
||||
|
||||
// This option allows use of a custom test runner
|
||||
// testRunner: "jasmine2",
|
||||
|
||||
// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
|
||||
// testURL: "http://localhost",
|
||||
|
||||
// Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
|
||||
// timers: "real",
|
||||
|
||||
// A map from regular expressions to paths to transformers
|
||||
// transform: undefined,
|
||||
|
||||
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
|
||||
// transformIgnorePatterns: [
|
||||
// "\\\\node_modules\\\\"
|
||||
// ],
|
||||
|
||||
// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
|
||||
// unmockedModulePathPatterns: undefined,
|
||||
|
||||
// Indicates whether each individual test should be reported during the run
|
||||
// verbose: undefined,
|
||||
|
||||
// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
|
||||
// watchPathIgnorePatterns: [],
|
||||
|
||||
// Whether to use watchman for file crawling
|
||||
// watchman: true,
|
||||
};
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
import * as React from '../../../libs/horizon/src/external/Horizon';
|
||||
import * as HorizonDOM from '../../../libs/horizon/src/dom/DOMExternal';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
|
||||
describe('Hook Test', () => {
|
||||
const { useState, useReducer, useEffect, useLayoutEffect, useContext } = React;
|
||||
const { unmountComponentAtNode } = HorizonDOM;
|
||||
let container = null;
|
||||
beforeEach(() => {
|
||||
// 创建一个 DOM 元素作为渲染目标
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
// 退出时进行清理
|
||||
unmountComponentAtNode(container);
|
||||
container.remove();
|
||||
container = null;
|
||||
});
|
||||
|
||||
|
||||
it('简单使用useState', () => {
|
||||
const App = () => {
|
||||
const [num, setNum] = useState(0);
|
||||
return (
|
||||
<>
|
||||
<p>{num}</p>
|
||||
<button onClick={() => setNum(num + 1)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
HorizonDOM.render(<App />, container);
|
||||
expect(container.querySelector('p').innerHTML).toBe('0');
|
||||
//点击按钮触发num加1
|
||||
container.querySelector('button').click();
|
||||
expect(container.querySelector('p').innerHTML).toBe('1');
|
||||
});
|
||||
|
||||
it('简单使用useEffect', () => {
|
||||
const App = () => {
|
||||
const [num, setNum] = useState(0);
|
||||
useEffect(() => {
|
||||
document.getElementById('p').style.display = num === 0 ? 'none' : 'inline';
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<p style={{ display: 'block' }} id="p">{num}</p>
|
||||
<button onClick={() => setNum(num + 1)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
HorizonDOM.render(<App />, container);
|
||||
expect(document.getElementById('p').style.display).toBe('block');
|
||||
//点击按钮触发num加1
|
||||
container.querySelector('button').click();
|
||||
expect(document.getElementById('p').style.display).toBe('none');
|
||||
container.querySelector('button').click();
|
||||
expect(container.querySelector('p').style.display).toBe('inline');
|
||||
});
|
||||
|
||||
it('简单使用useLayoutEffect', () => {
|
||||
const App = () => {
|
||||
const [num, setNum] = useState(0);
|
||||
useLayoutEffect(() => {
|
||||
document.getElementById('p').style.display = num === 0 ? 'none' : 'inline';
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<p style={{ display: 'block' }} id="p">{num}</p>
|
||||
<button onClick={() => setNum(num + 1)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
HorizonDOM.render(<App />, container);
|
||||
expect(document.getElementById('p').style.display).toBe('none');
|
||||
container.querySelector('button').click();
|
||||
expect(container.querySelector('p').style.display).toBe('inline');
|
||||
});
|
||||
|
||||
it('简单使用useContext', () => {
|
||||
//let root = createVNode(TreeRoot, container);
|
||||
const LanguageTypes = {
|
||||
JAVA: 'Java',
|
||||
JAVASCRIPT: 'JavaScript',
|
||||
};
|
||||
const defaultValue = { type: LanguageTypes.JAVASCRIPT };
|
||||
const SystemLanguageContext = React.createContext(defaultValue);
|
||||
|
||||
const SystemLanguageProvider = ({ type, children }) => {
|
||||
return (
|
||||
<SystemLanguageContext.Provider value={{ type }}>
|
||||
{children}
|
||||
</SystemLanguageContext.Provider>
|
||||
);
|
||||
};
|
||||
const TestFunction = () => {
|
||||
const context = useContext(SystemLanguageContext);
|
||||
return <p id="p">{context.type}</p>;
|
||||
}
|
||||
let setValue;
|
||||
const App = () => {
|
||||
const [value, _setValue] = useState(LanguageTypes.JAVA);
|
||||
setValue = _setValue;
|
||||
return (
|
||||
<div className="App">
|
||||
<SystemLanguageProvider type={value}>
|
||||
<TestFunction />
|
||||
</SystemLanguageProvider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
HorizonDOM.render(<TestFunction />, container);
|
||||
//测试当Provider未提供时，获取到的默认值'JavaScript'。
|
||||
expect(container.querySelector('p').innerHTML).toBe('JavaScript');
|
||||
unmountComponentAtNode(container);
|
||||
HorizonDOM.render(<App />, container);
|
||||
//测试当Provider提供时，可以获取到Provider的值'Java'。
|
||||
expect(container.querySelector('p').innerHTML).toBe('Java');
|
||||
//测试当Provider改变时，可以获取到最新Provider的值。
|
||||
act(() => setValue(LanguageTypes.JAVASCRIPT));
|
||||
expect(container.querySelector('p').innerHTML).toBe('JavaScript');
|
||||
});
|
||||
|
||||
it('简单使用useReducer', () => {
|
||||
const intlCar = { logo: '', price: 0 };
|
||||
let dispatch;
|
||||
const App = () => {
|
||||
const carReducer = (state, action) => {
|
||||
switch (action.logo) {
|
||||
case 'ford':
|
||||
return {
|
||||
...intlCar,
|
||||
logo: 'ford',
|
||||
price: 76
|
||||
};
|
||||
case 'bmw':
|
||||
return {
|
||||
...intlCar,
|
||||
logo: 'bmw',
|
||||
price: 100
|
||||
};
|
||||
case 'benz':
|
||||
return {
|
||||
...intlCar,
|
||||
logo: 'benz',
|
||||
price: 80
|
||||
};
|
||||
default:
|
||||
return {
|
||||
...intlCar,
|
||||
logo: 'audi',
|
||||
price: 88
|
||||
};
|
||||
}
|
||||
}
|
||||
const [car, carDispatch] = useReducer(carReducer, intlCar);
|
||||
dispatch = carDispatch;
|
||||
return (
|
||||
<div>
|
||||
<p>{car.logo}</p>
|
||||
<p id={'senP'}>{car.price}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
HorizonDOM.render(<App />, container);
|
||||
expect(container.querySelector('p').innerHTML).toBe('');
|
||||
expect(container.querySelector('#senP').innerHTML).toBe('0');
|
||||
//触发bmw
|
||||
dispatch({ logo: 'bmw' });
|
||||
expect(container.querySelector('p').innerHTML).toBe('bmw');
|
||||
expect(container.querySelector('#senP').innerHTML).toBe('100');
|
||||
//触发carReducer里的switch的default项
|
||||
dispatch({ logo: 'wrong logo' });
|
||||
expect(container.querySelector('p').innerHTML).toBe('audi');
|
||||
expect(container.querySelector('#senP').innerHTML).toBe('88');
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue